UI 가이드라인과 당신이 주의해야만 하는 이유 (UI guidelines and why you should care)

또는 "사랑의 노동자로서 UX"

이 글은Davi Costa UI guidelines and why you should care 글을 번역했습니다. 저의 모든 글은 허가를 받고 진행 하였습니다.


presentation
Lubos Volkov @ Unsplash
[🇧🇷 Esse artigo também está disponível em português.]
UI 디자인을 생각할 때 가장 먼저 떠오르는 것은 Dribble의 아름다운 애니메이션과 컨셉입니다. 비록 비주얼이 놀랍지만(incredible), 인터페이스들이 충족시켜야 할 감정적인 측면은 다루지 않겠습니다.
아름다운 것을 감상하지 않는 디자이너는 찾기 어렵기 때문에 기능적인 요구조건으로 대신 가고 싶습니다. 누가 인터페이스를 설계하는가에 의해 이루어지는 모든 결정에서 사용적합성을 고려하는 것이 중요합니다.

사용성은 과학에 기초합니다.

이것의 주요 원리는 인간 사고의 기초에서 찾을 수 있습니다. 이는 우리가 인터페이스를 유용하게 만드는 방법에 대한 것입니다. 이것은 기능에만 의존하지 않습니다. 제품은 이론적으로 어떤 것을 할 수 있지만 사용자 인터페이스가 너무 어렵기 때문에 사용자가 작업을 수행할 수 없는지는 중요하지 않습니다. 사용 편의성과 유틸리티도 중요하지만 대부분의 기업은 그에 따라 리소스를 할당하지 않습니다.
누구나 쉽게 사용할 수 있는 제품을 원하며, 이는 제품의 기능(적합성)을 직관적으로 암시하고 친숙하다고 느낄 때만 발생합니다(친숙한 상태).이러한 주요 구성 요소는 여러 가지 방법으로 달성할 수 있으며, 이 기사에서 중점적으로 다루고 있습니다.
가이드라인(UX와 어떻게 관련되어 있는지), 중요도 및 기타 관련 주제에 대한 가이드라인을 살펴보기 전에 먼저 기반을 확장하고 자주 간과되는 사용 가능한 인터페이스의 측면을 설명하겠습니다.

환경의 다양한 차원

이것을 읽고 있다면, PC, 스마트폰, 스마트 TV, 태블릿, 스마트워치, VR 또는 AR 헤드셋, 칫솔(a toothbrush), 디지털 인터페이스 생성과 관련된 몇 가지 단계에 관여할 가능성이 높습니다. 세상에, 벌써 지쳤어요. 모든 물체에 인터넷을 적용하기 위한 이 산업 경쟁은 다른 글의 주제입니다.
요약하면 Microsoft, Google 또는 Apple에서 만든 OS에서 웹 또는 앱 컨테이너를 통해 실행되는 인터페이스를 디자인하거나 지원합니다. 제품이 사용될 환경을 이해하는 것의 중요성은 누구에게도 새로운 것은 아니지만, 저는 이것이 우리의 작업 영역에 미치는 영향은 아직 완전히 파악되지 않았다고 생각합니다.
사용자가 디자인한 것을 경험하는 환경을 구성하는 몇 가지 요소를 살펴보겠습니다.
presentation
소프트웨어 정의 요소(OS/Platform, Container, Web 또는 Local), 하드웨어 정의 요소(Interaction method, Screen size and type) 및 사용자 정의(Geographic area, Connection type and speed)를 나열하는 이미지입니다.
소프트웨어 정의 요소, OS 및 컨테이너에 초점을 맞추겠습니다. 이 글에서 가장 중요한 요소이지만, 모두 UI 디자인에 중요합니다. 컨테이너 구분은 OS에서 로컬로 실행되는 인터페이스와 웹 브라우저를 통과하는 인터페이스 간의 차이와 관련이 있습니다.
요즘은 주로 모바일 앱에 광고를 하지만, 우리 모두는 웹사이트가 곧 사라지지 않을 것이라는 것을 알고 있습니다. progressive web apps (PWA)와 같은 최근의 노력은 이러한 현실을 강화하면서도 그 과정에서 서로 다른 컨테이너 간의 경계를 모호하게 만듭니다.

간단한 운동

잠시 시간을 내어 아래 화면을 분석하십시오.
presentation
iOS(플랫폼)용으로 개발된 네이티브 로컬 앱(컨테이너)입니다.
만약 당신이 Android를 매일 사용하고 iOS와 거의 접촉하지 않는다면, 당신의 반응은 나와 다를 것이라고 확신합니다. 왜냐하면, 제품과 상호작용을 할 때, 우리는 사물들이 어떻게 작용하는지에 대한 다양한 정신적 모델을 만들고, 어떤 것은 더 넓게 그리고 다른 것들은 더 구체적으로 만들기 때문입니다. 클릭/터치할 수 있는 곳은 어디입니까? 어디로 가야 항해를 합니까? 내용을 업데이트하려면 어떻게 해야 합니까?
이것들은 우리에게 마이크로초 단위로 일어나는 생각들입니다. 하지만 만약 상호작용이 우리의 이전의 경험과 일치하지 않는다면 훨씬 더 오래 지속될 수 있습니다. 이러한 불균형은 결국 인지적 긴장감(cognitive strain)을 증가시킵니다. 이는 좋은 인터페이스를 지원하는 과학적 근거의 한 예에 불과합니다.

사용 편의성을 위한 지름길

우리가 디자인한 화면에서 사용자들의 기존 기대를 충족시키기 위해 관리하는 것은 UI 디자이너의 가장 큰 과제입니다. 다년간의 업무 경험과 함께, 좋은 디자인은 자연스럽게 나오기 시작합니다. 사용적합성 테스트를 수행하고 사용자의 자발적 피드백을 수신함으로써 지식을 흡수합니다. 좋은 소식은 이러한 학습의 일부를 최적화할 수 있는 방법, 즉 사용성이 좋은 화면을 위한 촉매제가 있다는 것입니다.
이것을 가이드라인이라고 불립니다. UI에 적용해야 하는 구성 요소를 매핑 및 설명하는 환경 설계 방법을 설명하는 문서 세트입니다. 또한 복사 및 설계 원칙과 같은 관련 주제를 다루기도 하며, 일반적으로 공식 디자인 자산(아마도 가장 잘 알려진 요소)과 함께 제공됩니다.
표준은 환경에 따라 다르므로 앞서 언급한 플랫폼 및 컨테이너 요소를 이해하는 것이 중요합니다. 이러한 요소가 따라야 할 지침을 결정합니다.
웹을 소유하는 사람이 없으므로 웹 사이트에 대한 UI 문서는 매우 분산되어 있습니다. 이 글이 끝날 무렵에는 유용한 자료가 몇 개 있지만, 좀 더 복잡한 전력 다이나믹으로 인해 지역 응용 분야에 중점을 두겠습니다.
presentation
iOS를 위해 무엇이 좋은 디자인을 만드는지를 폭넓게 설명하는 애플의 가이드라인(Apple’s guidelines)에서 발췌한 것입니다.
우수한 플랫폼 가이드라인은 동일한 품질 수준의 네이티브 시스템 앱에 도달하는 데 필요한 사항을 정확하게 설명합니다. 또한 일반적으로 주요 새 OS 버전을 처음 미리 볼 때 새로운 기능과 향상된 기능을 설명하기 위해 업데이트됩니다.
예를 들어 Google이 Android에서 폴더블 디스플레이 지원을 구현하면 이 요인에 대한 대처 방법을 설명하는 지침을 업데이트하거나 만들 수 있습니다.
이것들은 또한 논란의 대상이 될 수 있습니다. 가이드라인 추가의 유명한 예는 애플사의 것(one )으로, 새로운 아이폰 X 화면에서 디자이너들에게 그 등급을 받아들이라고 요구(embrace the notch)하는 것입니다.
요컨대, 그들은 무엇을 해야 하고 무엇을 하지 말아야 하는지에 대한 지침입니다.

가이드라인에 대한 UX 근거

그들이 우리 일을 어떻게 개선하는지 봅시다. 🎉
제품에서 플랫폼 표준을 올바르게 적용하면 완전히 새로운 상호 작용이 처음부터 만들어졌을 때보다 사용 편의성이 향상될 가능성이 높습니다. 지침을 적용할 때의 이점은 대부분 사용적합성이 좋은 것과 중복됩니다. 그럼에도 불구하고, 저는 그것이 모든 전선에 미치는 영향을 설명할 것입니다.

사용자를 위해

간단히 말해, 지침을 따르는 인터페이스는 사용하기 더 쉽습니다. 사용자는 기존의 정신 모델을 (의도적으로) 적용할 수 있어 인지적 부담을 줄일 수 있습니다. 버튼은 위치, 모양, 그리고 동작 때문에 버튼이라는 것을 알고 있습니다. 그 경험은 그들에게 직관적이 됩니다.
제품이 효용도 제공한다면, 이러한 조합은 유용하다고 간주하는 결과로 이어집니다. 사용자는 가능한 모든 값을 추출할 수 있으므로 마지막 홈 스크린 페이지에서 이 값을 잊지 못할 것입니다.

비지니스를 위해

가이드라인을 사용하면 아이디어 개발을 가속화하고 고객 만족도를 높일 수 있습니다. 반복 횟수가 줄어들면 비용이 절감됩니다. 사용 편의성은 유틸리티와 결합될 경우 채택률이 높아질 수 있습니다.
비지니스 사례 :
  • 68%의 사용자가 디자인이 불량한 UX로 인해 웹 사이트를 떠나는 경우가 있습니다.
  • "사용 편의성에 투자된 1달러는 10달러에서 100달러 사이로 반환되었습니다."
  • 소비자의 86%가 더 나은 고객 경험을 위해 더 많은 비용을 지불할 것입니다.
더 많은 숫자와 이 숫자의 자료를 보려면 이쪽(here)으로 가세요.

디자이너 및 프로그래머를 위해

P!nk가 말하듯이, "우리들은?-What about us?" 아이디어 개발에 책임이 있는 사람들은 어떨까요?
  • UI 패턴의 공식 문서입니다. 우리가 디자인하는 인터페이스는 종종 등록해야 하는 것과 같은 공통적인 목표를 가지고 있습니다. 이러한 목표는 솔루션 및 생성 컨텍스트와 함께 UI 패턴이라고 합니다. 공동의 목표를 달성하기 위한 우리의 접근 방식은 표준화되어야 합니다. 기준이 뭐예요? 대부분 사용법을 잘 알고 있죠. 좋은 가이드라인은 그것을 문서화합니다. 비록 그것이 완벽하지는 않지만요.
  • 대규모로 검증되었습니다. 문서에 포함된 모든 지침에 대해 일반적으로 광범위한 테스트가 수행되었습니다. 이를 유지하는 대기업들은 자신의 중요성을 인식하고 철저한 사용자 테스트에 그리 많지 않은 리소스를 투자합니다. 이러한 이전 검증은 사용자와의 테스트에서 제외되지 않지만, 구현과 관련된 조사 결과 수가 줄어들고 보다 높은 수준의 주제를 확보하는 데 초점이 맞춰질 가능성이 높습니다.
  • 구현 시간을 단축합니다. 애플리케이션에서 기본적으로 플랫폼용으로 작성되고 있으며 사용되는 인터페이스 요소 중 전부 또는 대부분이 표준을 따르는 경우 이는 드래그 앤 드롭과 같은 코딩입니다. 물론 플랫폼 소유자가 제공하는 개발 리소스의 부족을 감안하기 위해 숙박시설이 필요한 경우도 있으며 개인화도 수반되는 경향이 있습니다. 결국 표준을 준수하면 기본 프런트 엔드 구현 속도가 더 빨라진다고 해도 과언이 아닙니다.

공통적인 어려움

비즈니스는 지침을 따르고 사용자에게 혜택을 주며 설계 및 구현 프로세스를 가속화하는 것이 바람직합니다. 모든 상자가 체크되어 있는데, 왜 아직도 앱이 일치하지 않는 거죠?
presentation
왜 제품이 마지막 예처럼 계속 보이는 것일까요?
경험상, 저는 사람들이 그들을 무시하는 세 가지 주요 이유를 열거할 수 있습니다.
1. 디자이너들은 가끔 모르기도 합니다.
presentation
watchOS는 UI 사용자 지정을 제한하여 이러한 화면을 사용할 수 없습니다. Kelsey Parker의 프로젝트
우리가 알고 있는 UX와 그것과 함께 제공된 모든 발전은 매우 최근의 것입니다. 서로 다른 영역에서 온 사람들, 주로 그래픽 디자이너들이 이 분야에서 기회를 포착하고 있습니다. 또한 이 직업을 위해 나 자신을 포함한 점점 더 많은 젊은 사람들이 일하고 있습니다.
아직도 대부분의 가이드라인이 제대로 소개되지 않았습니다. 때때로 그것들은 교수나 수석 디자이너가 한 프레젠테이션에서 잠깐 언급되기도 합니다. 정말 유감입니다. 우리의 초창기에는 그것들을 적용함으로써 감소될 수 있는 실행 갭-execution gap이 있기 때문입니다.
디지털 제품에 대한 기존 인식 없이 UI 디자인에 들어간 경우 기존 패턴을 인식하지 못합니다. 그것은 일반적으로 더 많은 공부를 하고 가이드라인들에 더 많은 주의를 기울일 필요가 있습니다.
디자인 스프린트나 해커톤과 같이 프로토타입을 서두르는 경우에도 플랫폼 표준 구성 요소와 패턴을 올바르게 적용하면 더 전문적으로 보이는 작업이 불가피합니다.
이 현실은 이 글을 쓰는 주요 원인 중 하나였습니다. 지금까지 저는 왜 그리고 어떻게 우리가 가이드라인을 관리해야 하는지에 대해 지역 사회와 공유하는 다른 사람들을 보지 못했습니다. 특히 이제 막 UI를 디자인하기 시작한 사람들에게 종합적인 설명을 제공하는 GO-to 가이드를 제공하는 것은 훌륭한 자원입니다.
관리부족이 문제가 될 때가 있습니다. 일반적인 시나리오는 디자이너들이 좋은 디자인(good design)을 인지하고 지지하며 보상하지 않는 회사에서 일하는 경우입니다. 이런 상황이라면 제가 여기서 설명하는 것 중 일부는 먼 신기루로 보일 수도 있습니다. 제가 말씀드릴 수 있는 것은, 만약 여러분의 시간이 제한되어 있고 여러분의 자원이 부족하다면, 아마도 기준을 엄격히 따르는 것이 좋은 생각일 것입니다. 당신이 요령을 터득하는 데는 시간이 좀 걸리겠지만, 결국 최종 결과를 보는 것은 신선한 공기가 될 것입니다.
2. 교차 플랫폼 개발 프레임워크가 지금 한창 유행하고 있습니다.
presentation
이 앱의 공통점은 무엇입니까? 이것들은 모두 이 프레임워크를 사용하여 개발되었습니다.
프로그래머가 여러 플랫폼을 쉽게 컴파일할 수 있는 하나의 코드를 작성하여 보다 "매력적인" 개발을 약속하는 새로운 프레임워크가 이틀에 한 번 나올 것 같습니다. React, Xamarin, Ionic, Flutter... 적어도 한 명은 들어봤을 거야 이론적으로, 이것들은 놀라운 해결책처럼 보입니다. 프로그래밍 팀을 절반으로 줄이고 운영 비용을 절감하거나 로드맵을 통합하고 제품 개발을 가속화하는 것을 좋아하지 않는 기업이 있을까요?
Google, Facebook 및 Microsoft는 이러한 프레임워크의 일부에 있습니다. 반면에 애플은 여러 가지 이유로 이 배에 올라타지 않았습니다. 하이브리드 앱은 장단점을 따져보는 많은 사람들이 있기 때문에 다른 기사에 대한 토론이 될 수 있습니다. 최근 사용자 중심적이지 않은 비교를 읽고 싶다면, Amit Manchanda가 쓴 이 글(this article)를 확인해 보세요.
그는 하이브리드 앱에 호의적이지만 UX 관련 반대 의견을 요약본에 포함시켰습니다.
"Cross-Platform 앱에 대해 이야기할 때 모든 플랫폼에서 동일한 UX를 달성하는 것은 어려운 일입니다. 각 플랫폼이 제공하는 고유한 기능을 포착하는 것은 엄청난 과제입니다."
고마워, Amit. 👍 간단히 말해서, 하이브리드 앱은 일반적으로 환경을 존중하지 않습니다. 왜 그러냐고 물으시는 거죠?
"선택한 교차 플랫폼 프레임워크는 서로 다른 플랫폼(Android 및 iOS)에서 여러 장치의 모든 기능을 지원하지 않을 수도 있습니다. 따라서 때때로 이러한 기능 지원이 부족하여 개발자가 놀라운 설계를 생성하지 못하게 할 수 있습니다."
그들은 네이티브 앱이 가진 모든 것을 제공하지 않습니다. 그리고 그것을 극복하는 것은 프로그래머들에게 장애물이죠. 위의 스크린샷에서 볼 수 있듯이 이러한 프레임워크를 사용하는 앱에서는 컷아웃으로 화면을 지원하는 것이 고통스러웠습니다. 악명 높은 Android 업데이트가 통신사와 장치 제조업체에 의존하는 것처럼, 앱이 업데이트되기 위해서는 프레임워크에 따라 다릅니다.
Amit가 자기 글에서 이득을 본 이유를 하나 더 말씀드리죠.
"Developers는 Objective-C 또는 Swift와 같은 특정 언어를 배울 필요가 없기 때문에 기술 장벽이 줄어듭니다. HTML, JavaScript 및 CSS3의 숙련도는 플랫폼 간 애플리케이션 개발로 충분합니다."
이 시나리오에 따르면 우수한 하이브리드 앱을 만들 수 없는 프로그래머는 대개 특정 작업을 수행하기 위해 기본 툴을 사용해야 하기 때문입니다.
2019년인데 아직도 확신이 안 서요. 언급되는 주요 이점은 대개 시간과 비용으로 귀결됩니다. 환경을 존중하는 좋은 디자인을 성취하는 것이 목표라면 시간을 절약할 수 없을 거라고 생각합니다. 정확한 세부 수준에 도달하면 결국 시간을 절약할 수 있습니까?
돈은 더 어려운 평가입니다. 만약 그 사업이 장기적으로 생각된다면, 저는 토박이 최고라고 믿습니다. 오늘날에는 우수한 사용자 환경을 제공하지 않으면 경쟁력을 갖추기 어려우며, 위에서 언급한 모든 이유와 다양한 이유(various others)로 교차 플랫폼 개발 프레임워크를 구축하기가 더 어렵습니다.
어떤 사람들은 그들의 유해한 퍼포먼스와 잘 작동 하지않는 것에 대해 존경하지 않는다고 말할지도 모릅니다. 누군가 그렇게 말할지도 몰라요.
이러한 프레임워크를 개발하기 위해 노력하는 분들을 위해 제가 제안하고자 하는 것은 각 플랫폼을 독특하게 만드는 것에 대해 관심을 갖고 관심을 갖는 것입니다.
이것은 확실히 필요 이상의 것이었지만, 저는 그것을 제 시스템에서 꺼내야만 했습니다.
Let’s go back to guidelines. Android and iOS have their standards, which ones will you follow when creating hybrid apps? No one knows. You’ll have to choose a coherent bunch and hope they’ll work out.
가이드라인으로 돌아가죠. Android와 iOS에는 표준이 있습니다. 하이브리드 앱을 만들 때 어떤 표준을 따르겠습니까? 아무도 몰라요. 당신은 일관성 있는 다발을 선택해야 할 것이고 그것들이 잘 풀리기를 희망해야 할 것입니다.
치수, 플랫폼 아이콘, 제스처 및 애니메이션은 하이브리드 앱을 설계할 때 각별한 주의가 필요한 부분입니다.
간단 노트. 저는 게임을 디자인해 본 경험이 전혀 없고, 실제로 게임을 하지도 않습니다. 앱스토어에 게시된 거의 모든 게임이 Unity를 이용해 개발되었다고 들었습니다. 저는 정말로 어떤 종류의 공식적인 지침이 있는지, 어떻게 적용되는지 모르겠어요. 제가 말씀드릴 수 있는 것은 의심할 여지 없이 항상 사용적합성 시험(usability tests)을 실시해야 한다는 것입니다.
3. 잘못된 창의적 자유를 주세요.
presentation
예를 들어, 어두운 UI는 각별한 주의(extra attention)를 기울여야 합니다. Dribble shot by GUOHAO.W
오, Dribble 기억나나요? 아름다운 그라데이션과 많은 양의 세련된 그래프를요? 비주얼을 위한 비주얼. 이제 비즈니스 + 사용자 + 개발 = UX(business + user + devs = UX)의 드릴을 숙지해야 합니다. 우리가 내리는 결정은 성스러운 삼위일체를 만족시킬 필요가 있습니다. 영감을 얻기 위해 개념은 훌륭하지만, 매일 그 중 하나를 사용해 보십시오. 그러면 3초 분량의 애니메이션이 나오기를 기다리며 움찔할 것입니다.
창의적 자유는 사용성을 희생하여서는 안 되며 팀 전체가 결과에 동의할 때 발휘되어야 합니다. 모든 이해 관계자가 동의했으며 UI에 대한 새 구성 요소를 생성하시겠습니까?
요다의 스승은 이렇게 말합니다: "심오한 지식을 가지는 것은 지침을 초월하기 위해 필요하다." 농담은 제쳐두고, 새로운 패턴을 만들기 전에 여러분은 기존의 패턴을 어떻게 적용하는지 알아야 합니다.
또 다른 중요한 요구 사항도 있습니다. 이 경계를 넘어서면, 새롭게 생성된 요소들과 관련된 모든 상호작용을 테스트하는 것이 필수적이 되고, 그럼에도 불구하고, 사용자의 기존 정신 모델에 대한 영향을 측정하는 데는 시간이 걸립니다.
갑자기 Snapchat(with Snapchat,)을 볼 수 있게 되었으므로 당신은 당신의 사용자가 아닙니다. 이 오랜 UX 진부한 표현은 여기에 더 이상 적절히 적용될 수 없습니다. 스냅의 CEO인 Evan Spiegel은 중국 여행을 다녀온 후 이 앱을 완전히 새로 디자인했습니다. 새로 만든 상호작용이 그의 문제에 대한 해결책은 아닌 것으로 밝혀졌습니다. 제대로 테스트되지 않았기 때문이죠. 만약 그가 이 글을 전에 읽었다면, 나는 회사의 현재 평가에 대해 몇 달러를 더 예상했을 것입니다.
제품의 정체성을 구별하는 것은 어떨까요? "지침을 따르면 화면이 둔해질 것입니다."라고 생각할 수도 있습니다. 인쇄, 이미지, 아이콘 스타일 및 색상은 모두 대비 비율과 같은 고전적인 디자인 원리를 고려할 때 사용성에 큰 영향을 미치지 않고 제품에 더 잘 맞게 맞춤 제작할 수 있는 모든 요소입니다. 입력된 아이콘과 선형 아이콘의 사용만 관찰하십시오. 아이콘은 인터페이스에서 서로 다른 의미를 가지기 때문입니다.
디자인 시스템이나 스타일 가이드를 갖는 것은 가이드라인을 잊는 핑계가 아닙니다. 여기에 있는 구성 요소와 패턴이 표준을 따르는지, 아니면 앞서 말씀드린 바와 같이 사용자들과 함께 광범위하게 테스트되었는지 확인하십시오.
제가 사용적합성, 지침, 중요성, UX와 어떻게 관련되는지, 그리고 가장 일반적인 함정에 대해 말씀드렸습니다. 만약 제가 여전히 그것들이 필수적이라는 것을 당신에게 납득시키지 못한다면, 제가 할 수 있는 것은 더 이상 없습니다. 만약 여러분이 이것을 읽고, 그들이 보살핌을 받아야 한다고 정직하게 믿는다면, 어떻게 가이드라인이 올바르게 적용될 수 있는지 살펴보도록 해요.

퍼즐 조립 방법

I’m not going to make this look easy to you. As designers our job is to take on the complexity and make it simple so, naturally, our work is complex. In the end, it’s worth it. Experiencing good design on the wild makes anyone a little more happy with the world.
이렇게 쉽게 보이진 않을 거예요. 디자이너로서 우리의 일은 복잡함을 떠맡고 단순하게 만드는 것입니다. 당연히 우리의 일은 복잡합니다. 결국 그럴만한 가치가 있어요. 야생에서 좋은 디자인을 경험하는 것은 누구든지 세상을 좀 더 행복하게 만듭니다.
디자이너와 사진작가들은 오랫동안 3분의 1의 법칙을 채택해 왔으며 지금은 많은 분야에서 널리 퍼져 있습니다(now widespread in many different fields). 저는 그것의 명확성을 좋아합니다. 그래서 이 지침들을 세 단계로 합성해 보겠습니다.
이 가이드라인을 사용하여 프로세스를 최적화하고 양호한 사용성을 개선할 수 있는 방법은 다음과 같습니다.

1

역할에 따라 인터페이스가 실행될 플랫폼과 프로그래머가 이를 구현하는 방법을 결정하거나 검색합니다.
예를 들어 iOS용 네이티브 앱입니다..
앱이 하이브리드라면, 대부분의 예상 사용자가 사용하는 플랫폼의 표준을 따라 레몬을 레모네이드로 만드십시오. 이를 뒷받침할 자료가 있을 수도 있지만, 디자이너들에게는 정말 어려운 일입니다. OS 표준을 설명하기 위해 최소 몇 가지 사소한 차이를 구현해 보십시오.

2

플랫폼 문서를 열고 환경에 사용할 수 있는 모든 설계 리소스를 다운로드합니다. 패턴을 보다 빠르게 적용하고 일관성을 유지할 수 있습니다.
이전 예에서는 Apple의 HIG를 열고 Sketch, Adobe XD, Keynote 및 Photoshop(really?)에서 사용할 수 있는 공식 라이브러리를 다운로드했습니다.

3

설명서에 설명된 대로 구성 요소를 적용합니다. 시스템 앱에서 패턴을 찾아보고 일반적으로 어떻게 적용되는지 더 잘 이해하십시오. 장점이 단점보다 클 때만 새로운 패턴을 만듭니다.
이전 예를 계속하면 iOS 앱의 설정 화면을 디자인할 때 Apple이 해당 설정을 어떻게 해결하는지 확인할 수 있습니다.
"잠깐만요, 복잡함이 어디에 있나요?"
과소평가하지 마세요, 3단계가 가장 중요합니다. 구성 요소가 있고 가이드라인을 읽어본 경우에도 패턴을 재사용하지 않기 때문에 사용자의 멘탈 모델과 다른 인터페이스를 만들 수 있습니다.
저와 같은 하드코어 iOS 사용자인 경우(그런 것이 있는 경우), 첫 번째 탭이 검색용 탭인 탭 표시줄이나 "확인"이라고 표시된 편집 모드를 종료하는 버튼을 표시합니다. 비록 이러한 세부 사항이 가이드라인에 명시되어 있지는 않지만, 경험에 문제가 됩니다.
기본 플랫폼 애플리케이션에 대해 자세히 알아보시면 이러한 특성을 알 수 있습니다. 이 문서 하단에 있는 패턴 라이브러리에 연결했는데 템플릿으로 처리하면 안 됩니다. 제품의 컨텍스트에 현명하게 발라줍니다.

생각들

이 글이 길지 않은 듯, 몇 가지 관련 주제를 언급하고 싶었습니다.
Jason은 이 글(this article)에서 디자인 트렌드에 대한 흥미로운 접근 방식을 가지고 있습니다.
"디자인 트렌드는 인기에 밀리고 쇠퇴할 수 있지만 기본 기술의 유용성은 일정합니다. […] 저는 디자인 트렌드에 대한 우리의 집단적 집착이 품질 디자인 패턴에 대한 우리의 진정한 욕구를 보여주는 것이라는 것을 깨달았습니다."
와이어프레임용 빠른 팁입니다.
기본적으로 중간 정도까지 설계할 때 기본 플랫폼 구성 요소를 적용할 수 있습니다. 프로토타입은 일반적으로 이러한 단계에서 브랜드화할 필요가 없습니다. 많은 생성이나 사용자 지정 없이 공용 구성 요소 라이브러리만 적용하면 많은 시간을 절약할 수 있습니다.
이 글까지 가이드라인을 소화하지 못했다면, 혼자가 아닙니다.(you’re not alone.)
재미있는 것은 시스템 앱이 플랫폼 패턴에 따르지 않는 수많은 예들을 봐왔다는 것입니다. 그들을 소유하고 있는 회사들은 요즘 직원 기반을 너무 빨리 키우고 있어서 때때로 디자이너들은 시스템에 그들의 흔적을 남기기 전에 제가 여기서 설명하는 것을 이해하지 못하기도 합니다.
음, 이제 제공할 때가 된 것 같네요...

자원!

시작에 도움이 될 수 있는 링크를 수집했습니다. 당신에게 중요한 것을 책갈피로 자유롭게 하세요. 그들에게 상담하고, 다운로드하세요, 제발 당신이 읽은 글 한 가지만 더 남겨두지 마세요.
Official platform documentation iOS, macOS, watchOS, tvOS, Google’s Material, Microsoft’s Fluent
Official design assets iOS, macOS, watchOS, tvOS, Material (components and icons), Fluent
Complementary documentation Unofficial iOS Guidelines, mobile patterns: one, two.
Complementary design assets (for iOS and Sketch) Elements by Sketch, iOS 12 by Great Simple, iOS 11 by Design+Code
웹은 훨씬 더 다양한 환경입니다. 원스톱은 없지만, 저는 몇 가지 링크를 수집하기 위해 최선을 다했습니다.
실례지만, 몇몇이 좀 낡았다면, 그 안에 여전히 가치가 있습니다.
  • UI & Visual Design Pattern Library, from Proximity School of Design. “new ideas to try […] that live on independently of design trends.”
  • UI Patterns, created by Anders Toxboe. “learn to become awesome product designers.”
  • PatternTap, from ZURB. “where designers can learn what works well and why.”
  • Interface Design Guideline Archive, by Luke Wroblewski effective interface design guidelines and principles from various authors.
  • Web Design Practices, by Heidi P. Adkisson. practices commonly-employed on the Web and research on their usability.
  • Which Input When?, by Morgan Carter. “simple rules that can guide which type of input you should use when.”
어느 날 누군가가 잘못된 디자인 결정 때문에 하와이에서 수백만 명의 사람들을 공포에 떨게 했습니다. 우리는 결코 이 교훈을 잊어서는 안 된다. 사용성은 중요하고, 그것은 우리의 책임입니다. 만약 여러분이 그것에 관심이 있다면, 여러분은 환경을 이해하고 그것을 존중할 필요가 있습니다. 그러니, 지침을 읽고 따르세요. 그게 제가 바라는 전부입니다. 그리고 좀 더 자세히 알아보려면 잠시 시간을 내어 플랫폼 앱에 대해 알아보고 Instagram에서 모든 시간을 보내십시오.
우리가 만드는 것은 우리가 누구인지 증명합니다. 사람들은 보살핌을 감지하고 부주의함을 감지할 수 있습니다. 이것은 서로를 존중하는 것과 관련이 있고 부주의는 개인적으로 불쾌합니다.— Jonathan Ive
오늘은 여기까지입니다. 저는 오랫동안 이 글을 쓰려고 했습니다. 나쁜 디자인을 보는 것이 고통스럽기 때문입니다. 시간을 내주셔서 감사합니다. 스냅과 제안의 고마움을 표합니다.
이 글에서는 Flaticon의 FreepikGregor Cresnar의 아이콘과 Facebook의 device mockups을 사용합니다.

이 글은 번역 글입니다. 원본 링크입니다.
https://blog.prototypr.io/ui-guidelines-and-why-you-should-care-62d4d0da1595


https://www.facebook.com/groups/224179755005643/

안녕하세요! Early adopter입니다.
페이스북 [DTF] 디자인 번역 공장 - Design Translation Factory 그룹도 많이 가입해주시길 바랍니다.
"보버"에서 "디자인 번역 공장" 연재를 저와 함께 해주실 분을 찾습니다. 하단 "리뷰" 또는 "페이스북"으로 편하게 메시지 주세요!
PS. 제가 사용하는 블로그 "보버"에 "함께 쓰는 블로그"라는 기능이 요번에 추가됐네요 ㅋ (미디엄에 퍼블리케이션 같은 기능..)
하단 링크 글을 보시면 "디자인 번역 공장"에 어떻게 함께 연재할 수 있는지 자세히 설명되어있습니다. 또는 쉽게 FB 메시지 주세요!
https://bit.ly/2L6WsZp