Human Interface Guidelines (HIG)

편하게 읽고 싶으신 분들은 여기로 오시면 됩니다.

Human Interface Guidelines

오늘날의 디지털 제품과 서비스는 사용자 경험(UX)에 크게 의존하고 있다. 이러한 사용자 경험을 설계할 때, 개발자와 디자이너들에게 필수적인 자원이 바로 'Human Interface Guidelines(HIG)'이다. Apple, Google, Microsoft 등의 대형 기술 회사들은 이러한 가이드라인을 제공하여 사용자 인터페이스(UI) 디자인의 품질을 높이고 있다.

수 많은 항목들 중에서 정말 한번은 읽어봤으면 좋겠다 라는 것들만 정리했습니다.

Platforms -

Designing for iOS

📱 People depend on their iPhone to help them stay connected, play games, view media, 
   accomplsh tasks, and track personal data in any location and while on the go.

iOS 앱이나 게임 디자인에 들어갈 때, iOS 경험을 구분하는 다음과 같은 기본적인 기기의 특성과 패턴을 이해하는 것부터 시작하라. 이런 특징과 패턴을 사용해 디자인을 결정하는 것이 아이폰 사용자가 좋아하는 앱을 제공하는 데 도움이 된다.

Display : 아이폰은 중간 사이즈의 고해상도 디스플레이를 가진다.

Ergonomics : 사람들은 일반적으로 아이폰을 한 손 또는 두손으로 들고, 필요에 따라 가로와 세로 방향을 바꾼다. 사람들이 기기와 상호 작용하는 동안, 그들의 시야거리는 30에서 60cm도 되지 않는 경향이 있다.

Inputs : Multi-Touch gestures, onscreen keyboards, 그리고 voice control를 통해 이동 중에도 작업을 수행하고 의미있는 작업을 완수할 수 있다. 게다가 사람들은 종종 앱이 자신의 개인정보를 사용하고 기기의 자이로스코프, 가속도계에서 입력하기를 원하며, 공간 상호 작용에도 참여하기를 원하기도 한다.

App interactions : 때때로 사람들은 이벤트 확인나 소셜 미디어 업데이트, 데이터 추적 또는 메시지 전송에 1-2분씩 소요한다. 다른 때에는 웹 브라우징, 게임 또는 미디어를 즐기는데 한시간 이상의 시간을 쓰기도 한다. 사람들은 전형적으로 동시에 여러 앱을 열기도 하고, 그 앱들 사이에 자주 전환할 수 있음에 감사함을 느낀다.

System features : iOS는 친밀하고 일관된 방식과 사람들이 시스템과, 앱과 상호작용할 수 있도록 도와주는 여러가지 기능을 제공한다.

Best practices

훌륭한 아이폰 경험은 사람들이 가장 가치있게 여기는 플랫폼과 기기 기능을 통합한다. 디자인이 iOS에서 편안함을 느낄 수 있도록, 다음과 같은 특징과 기능을 통합하는 방법의 우선순위를 정하라.

최소한의 작용으로 보조적인 디테일과 액션을 찾을 수 있게 하면서 화면 컨트롤의 수를 제한하여, 기본적인 작업과 내용에 집중할 수 있도록 지원하기
기기의 orientation(화면 방향), 다크모드, 다이나믹 타입과 같은 모양 변경을 원활하게 적용해, 사용자에게 가장 적합한 구성을 선택하기
용자들이 주로 기기를 잡는 방식을 수용하는 인터랙션을 지원하기
예를 들어, 기기 디스플레이의 중간 또는 아래쪽에 배치되어 있는 컨트롤에 도달하는 것이 더 쉽고 편리한 경향이 있으므로, 목록의 행에서 이전 화면으로 이동하거나 작업을 시작할 수 있도록 하는 것이 특히 중요하다.
사용자의 허가를 받아 플랫폼 기능을 통해 사용가능한 정보를 사용자에게 데이터입력을 요청하지 않고 통합하여 사용자 경험을 향상시키기 예를 들어, 결제를 수락하거나, 생체 인증을 통해 보안을 제공하거나 위치 사용 기능을 제공할 수 있다.

Foundations -

Color

🎨 Judicious use of color can enhance communication, evoke your brand, provide visual continuity, 
  communicate status and feedback, and help people understand information.
  현명한 색상 사용은 의사소통을 향상시키고, 브랜드를 환기시키며, 시각적 연속성을 제공하고, 
  상태와 피드백을 전달하고, 사람들이 정보를 이해하는 데 도움을 줄 수 있다.

이 시스템은 다양한 배경과 외관 모드(dark, light mode)에 어울리는 색상을 정의하고, 생동감 효과와 접근성 설정에 자동으로 적응할 수 있다. 사람들은 시스템 컬러에 익숙하며, 그것들을 사용하는 것은 기기에서 편안한 경험을 할 수 있는 편리한 방법이다.

또한 커스텀 컬러를 사용해 본인 앱의 시각적 경험을 향상시키고 유니크한 개성을 표현할 수도 있다. 다음 지침은 시스템 정의 색상을 사용하든 커스텀 색상을 사용하든 상관없이, 사용자가 원하는 방식으로 색상을 지정하는 데 도움이 된다.

1. Use color sparingly in nongame apps. 비게임 앱에서는 색상을 적게 사용하라.

게임이 아닌 앱에서 색상의 과도한 사용은 의사소통을 덜 명확하게 만들고 주의를 산만하게 한다. 중요한 정보에 집중시키거나 인터페이스의 부분 간의 관계를 표시하기 위해 색상을 사용하는 것을 선호한다.

2. Avoid using the same color to mean different things. 같은 색을 다른 의미로 사용하는 것을 피하라.

인터페이스 전체에서 색상을 일관되게 사용하는 것은, 특히 상태나 상호 작용과 같은 정보를 전달하는 데에 도움이 된다. 예를 들어, 앱은 텍스트를 눌러 그 내용을 더 볼 수 있음을 나타낼 때 파란색을 사용한다. 앱이 색상에 의존하지 않는 시각적 표시기(visual indicator; 화살표←→ 또는 쉐브론〈〉 아이콘)를 사용해 대화형 텍스트에 파란색이 아닌 다른 색상을 사용해 대화형 텍스트를 전달하는 경우에도 혼란이 발생한다.

3. Make sure your app’s colors work well in both light and dark appearance modes. 앱이 밝은 모드 / 어두운 모드에서 모두 색상이 잘 보이는지 확인해라.

항상 순수한 검은 색 배경을 사용하는 watchOS를 제외하고, 플랫폼은 기본 light appearance에 대한 dark alternative를 제공한다. 다크 모드는 모든 화면, 뷰, 메뉴 및 컨트롤에 더 어두운 색상 팔레트를 사용하며, (foreground와 background 색상을 동적으로 혼합하는 미묘한 효과인) 진동을 증가시켜 어두운 background에서 foreground의 콘텐츠를 돋보이게 할 수 있다. 시스템 컬러는 두 가지 appearnce를 모두 자동으로 지원합니다; 커스텀 컬러를 사용하고 싶다면, 밝은 색상과 어두운 색상을 모두 제공해야 한다.

4. Test your app’s color scheme under a variety of lighting conditions. 다양한 조명 조건에서 앱의 색 구성을 테스트해라.

햇빛이 좋은 날이나 어두운 조명에서 앱을 실행할 때 색상이 다르게 보일 수 있다. 대부분의 유스케이스에서 최적의 viewing 경험을 제공하도록 색상을 조정해야 한다.

5. Avoid using colors that make it hard to perceive content in your app. 앱에서 컨텐츠를 인식하기 어렵게 만드는 색을 사용하지 마라.

대비가 부족하면 아이콘과 텍스트를 배경과 혼합되어 내용을 읽기 어렵게 하고, 색맹인 사람들은 일부 색 조합을 구별하지 못할 수 있다.

6. Consider how the colors you use might be perceived in other countries and cultures. 내가 사용하는 색이 다른 나라와 문화에서 어떻게 인식되는지 생각해라.

빨간색은 어떤 문화권에서는 위험을 알리지만, 다른 문화권에서는 긍정적인 의미를 가진다. 앱의 색상이 의도한 메시지를 보내는지 확인해라.

App icons

🪁 A unique, memorable icon communicates the purpose and personality of your experience and
can help people recognize your app or game at a glance in the App Store and on their devices.   
앱 아이콘은 독특하고 기억에 남는 아이콘은 사용자 경험의 목적과 성격을 전달하며,
앱 스토어 및 디바이스에서 사용자의 앱을 한눈에 인식하도록 도와준다.

아름다운 앱 아이콘은 모든 애플 플랫폼에서사용자 경험의 중요한 부분이며, 모든 앱과 게임에는 반드시 아이콘이 있어야 한다. 각 플랫폼은 앱 아이콘에 대해 조금씩 다른 스타일을 정의하므로, 강한 시각적 일관성과 메시징을 유지하면서 다양한 모양과 디테일 레벨별로 잘 적응하는 디자인을 만들어야 한다.

1. Embrace simplicity. 단순함을 수용하라.

단순한 아이콘은 사람들이 이해하고 인식하기 더 쉬운 경향이 있다. 앱의 본질을 한눈에 알아보기 쉬운 컨셉이나 요소를 찾아, 아이콘의 포커스 포인트로 만들어, 단순하고 유니크한 방식으로 표현한다. 너무 많은 디테일을 담지 않도록 한다. 세부 정보는 식별하기 어렵고 아이콘이 특히 작은 크기일 때 지저분해 보일 수 있다. 아이콘 전체를 콘텐츠로 채울 필요 없이 primary 이미지를 중점에 두는 간단한 배경을 선호한다.

2. Create a design that works well on multiple platforms so that it feels at home on each. 각각의 플랫폼에서도 편안하게 느끼도록 여러 플랫폼에서 잘 먹히는 디자인을 만들어 만들어라.

앱이 둘 이상의 플랫폼에서 실행되는 경우, 모든 아이콘에 대해 유사한 이미지 및 색상 팔레트를 사용하고 각 플랫폼에 적합한 스타일로 렌더링해야 한다. 예를 들어, iOS나 watchOS에서는 ‘메일’ 앱의 아이콘은 파란 배경에 흰색 봉투로 묘사하기 위해 유선형의 그래픽 스타일을 사용한다. macOS는 비슷한 파란 배경에 깊이와 디테일을 더한 봉투를 더해 실제적인 무게와 질감을 준다.

3. Prefer including text only when it’s an essential part of your experience or brand. 경험이나 브랜드에서 필수적일 때만 텍스트를 포함하라.

아이콘 내의 텍스트는 너무 작아서 읽기 어렵고, 아이콘이 어수선하게 보일 수 있으며 접근성이나 현지화를 지원하지 않는다. 일부 상황에서는 앱 이름이 아이콘 근처에 표시되기 때문에 해당 이름을 표시하는 것이 중복된다. 앱 이름의 첫 글자와 같은 니모닉을 사용하면 사람들이 앱이나 게임을 인식하는 데 도움이 될 수 있지만, watch와 play와 같은 필수적이지 않은 단어나 New 또는 For iOS와 같은 상황적 용어를 포함하지 않아야 한다.

4. Prefer graphical images to photos and avoid replicating UI components in your icon. 사진보다 그래픽 이미지를 선호하고 아이콘에서 UI 구성 요소를 복제하지 마라.

사진은 작은 크기로 보면 잘 작동하지 않는 디테일로 가득 차 있다. 사진을 사용하는 대신, 사람들이 주목하기는 원하는 기능을 강조하는 내용의 그래픽 이미지를 만들어라. 마찬가지로 앱에 사람들이 인식하는 인터페이스가 있더라도 표준 UI 컴포넌트만 복제하거나 아이콘에 앱 스크린 샷을 사용하지 마라.

5. Don’t use replicas of Apple hardware products. Apple 하드웨어 제품의 복제본을 사용하지 마라.

Apple products are copyrighted and can’t be reproduced in your app icons. Apple 제품은 저작권이 있으며 앱 아이콘에서 복제할 수 없다.

6. Avoid using black for your icon’s background. 아이콘 배경에 검은색을 사용하지 마라.

아이콘이 디스플레이 배경에 섞이지 않도록 검은색 배경을 밝게 하거나 테두리를 추가한다.

Patterns -

Managing accounts

When it doesn’t create an unnecessary barrier to your experience, 
an account can be a convenient way for people to access their content and track personal details.
경험에 불필요한 장애물을 만들지 않을 때,
계정은 사람들이 그들의 콘텐츠에 접근하고 개인정보를 추적하는 편리한 방법이 될 수 있다.

핵심 기능에 계정이 필요한 경우에만 계정을 생성하도록 요청하고, 그렇지 않은 경우에는 계정 없이 앱을 즐길 수 있도록 한다. 계정이 필요한 경우 사용자가 신뢰할 수 있는 일관된 로그인 환경과 여러 계정 및 인증 방법을 기억할 필요가 없는 편리함을 제공하기 위해 Sign in with Apple을 사용해라.

1. Explain the benefits of creating an account and how to sign up. 계정 생성의 이점과 가입 방법을 설명하라.

앱에 계정이 필요한 경우, 요구사항의 이유와 이점에 대한 간략하고 친절한 설명을 작성한다. 로그인 화면에 이 메시지를 표시한다.

2. Delay sign-in for as long as possible. 로그인을 가능한 오래 딜레이해라.

사람들은 유용한 일을 하기 전에 로그인해야 할 때 종종 앱을 포기한다. 이러한 상황을 방지하려면 사람들에게 앱이나 게임에 대해 로그인을 요청하기 전에 앱이 무엇을 하는지 이해할 수 있는 기회를 제공해라. 예를 들어, 쇼핑 앱은 원하는 만큼 검색할 수 있도록 하며, 구매할 준비가 되었을 때만 로그인을 요구한다.

3. Always identify the authentication method you offer. 항상 제공하는 인증 방법을 식별하라.

예를 들어, Face ID로 앱에 로그인하기 위한 버튼을 표시하는 경우, “Sign In”과 같은 일반 문구 대신 “Sign In with Face ID”와 같은 문구를 사용해 이름을 지정한다.

4. In general, avoid offering an app-specific setting for opting in to biometric authentication. 일반적으로 생체 인증을 선택하기 위한 앱별 설정을 제공하지 마라.

사람들은 시스템 수준에서 생체 인증을 설정하기 때문에 앱 내 설정을 제시하는 것은 중복되며 혼란스럽게 할 수 있다.

Deleting accounts

Important
법적 요구사항으로 인해 앱이 계정 또는 디지털 건강 기록 등의 정보를 유지하거나 
특정 계정 삭제 프로세스를 따라야 하는 경우, 
상황을 명확하게 설명하여 사람들이 유지해야 하는 정보 또는 계정과 
따라야 하는 프로세스를 이해할 수 있도록 해야한다.

1. Provide a clear way to initiate account deletion within your app or game. 앱 내에서 계정 삭제를 시작할 수 있는 명확한 방법을 제공하라.

앱 내에서 계정 삭제를 수행할 수 없는 경우 사용자가 수행할 수 있는 웹 페이지에 대한 직접적인 링크를 제공해야 한다. 해당 링크는 쉽게 검색할 수 있도록 한다. 예를 들어, 개인정보 보호 정책 또는 서비스 약관 페이지에 링크를 숨기지 않도록 한다.

2. Provide a consistent account-deletion experience whether people perform it within your app or game or on the website. 사용자가 앱 또는 웹 어디서 수행하든 상관없이 일관된 계정 삭제 환경을 제공하라.

예를 들어, 한 버전의 삭제 흐름이 다른 버전보다 길거나 복잡해지지 않아야 한다.

3. Tell people when account deletion will complete, and notify them when it’s finished. 계정 삭제가 언제 완료되는지 사람들에게 알려주고, 완료되면 알려라.

계정을 완전히 삭제하는 데 시간이 걸릴 수 있기 때문에, 사람들이 무엇을 기대해야 하는지 알 수 있도록 삭제 프로세스의 상태에 대해 계속해서 알려주는 것이 중요하다.

Modality

Modality is a design technique that presents content in a separate, 
focused mode that prevents interaction with the parent view and requires an explicit action to dismiss.
모달리티는 상위 뷰와 상호 작용을 방지하고,
명시적인 작업이 필요한 별도의 집중 모드로 콘텐츠를 표시하는 디자인 기법이다.

콘텐츠를 모달로 표시하는 것은:

사용자가 중요한 정보를 수신하고, 필요한 경우 조치를 취하도록 보장
최근 작업을 확인하거나 수정할 수 있는 옵션 제공
사용자가 이전 컨텍스트를 놓치지 않고 범위가 좁은 개별 작업을 수행할 수 있도록 지원
사용자에게 몰입감 있는 경험을 제공하거나 복잡한 작업에 집중할 수 있도록 지원

플랫폼에 따라 다양한 구성 요소를 사용하여 이러한 유형의 모달 경험을 제공할 수 있다. 예를 들어, 모든 플랫폼은 앱과 관련된 중요한 정보를 전달하는 모달 뷰인 알림을 표시할 수 있다. 또한 각 플랫폼은 activity views, sheets 및 confirmation dialogs 또는 action sheets와 같은 상황별 옵션을 표시하기 위한 다양한 유형의 모달 뷰를 정의할 수 있다. 사람들이 다른 작업을 수행할 수 있도록 돕기 위해 iOS, iPadOS 및 macOS 앱은 sheets 또는 popovers를 사용하는 경향이 있지만, macOS 및 iPadOS 앱도 별도의 창을 사용할 수 있다.

1. Present content modally only when there’s a clear benefit. 명확한 이점이 있을 때만 콘텐츠를 모달로 표시하라.

모달 경험은 사람들을 현재 상황에서 벗어나게 하고 무시할 조치가 필요하므로, 사람들이 집중하거나 콘텐츠나 기기에 영향을 미치는 선택을 하는 데 도움이 될 때만 모달리티를 사용하는 것이 좋다.

2. Aim to keep modal tasks simple, short, and narrowly focused. 모달 작업은 단순하고 짧고 좁게 집중하는 것을 목표로 하라.

모달 태스크가 너무 복잡할 경우, 사람들은 모달 보기에 들어갈 때 일시 중단한 작업에 대한 추적을 잃을 수 있으며, 특히 모달 뷰가 그들의 이전 컨텍스트를 흐리게 할 경우에는 더욱 그러하다.

3. Take care to avoid creating a modal experience that feels like an app within your app. 앱 내에서 앱처럼 느껴지는 모달 경험을 만들지 않도록 주의하라.

특히 모달 작업 내에 뷰 계층을 표시해버리면 사람들이 자신의 단계를 다시 추적하는 방법을 잊을 수 있다. 모달 작업에 하위 보기가 포함되어야 하는 경우, 계층을 통과하는 단일 경로를 제공하고, 사용자가 모달 뷰를 무시하는 버튼으로 착각할 수 있는 버튼을 포함하지 않아야 한다.

4. Consider using a full-screen modal style for immersive content or a complex task. 몰입형 콘텐츠 또는 복잡한 작업에는 full-screen 모달 스타일을 사용해라.

디스플레이나 윈도우를 채우는 모달 체험은 방해를 최소화하므로 비디오, 사진 또는 카메라 뷰를 표시하거나 문서를 마크업하거나 사진 편집 등의 다단계 작업을 지원할 수 있다.

5. Always give people an obvious way to dismiss a modal view. 항상 사람들에게 모달 뷰를 무시할 수 있는 명백한 방법을 제공하라.

일반적으로 사람들이 이미 알고 있는 플랫폼 규약을 따르는 것이 효과적이다. 예를 들어, iOS, iPadOS 및 watch의 경우, 일반적으로 사람들은 네비게이션 바에서 버튼을 찾거나 아래로 스와이프하기를 기대한다. macOS와 tvOS 앱에서 사람들은 메인 콘텐츠 뷰에서 버튼을 찾기를 기대한다.

6. Avoid presenting a modal view on top of another modal view. 다른 모달 뷰 위에 모달 뷰를 표시하지 않도록 한다.

동시에 화면에 나타나는 여러 모달 뷰는 사람들이 이전 컨텍스트를 두 개 이상 기억해야 하기 때문에 혼란스러울 수 있다. 중요한 정보를 전달하기 위해 경고가 다른 모든 콘텐츠 위에 나타날 수 있지만, 동시에 화면에 두 개 이상의 경고가 표시되는 것은 매우 혼란스러운 일이다.

마무리 하며

Human Interface Guidelines는 모든 디지털 제품과 서비스의 사용자 인터페이스 디자인에 있어 필수적인 자원이다. 이 가이드라인들은 직관적이고 접근 가능한 사용자 경험을 제공하는 데 중요한 역할을 한다. 따라서, 개발자와 디자이너는 HIG를 잘 이해하고 적용하여 사용자들에게 더 나은 상호작용과 경험을 제공해야 한다.

4T2F / ThinkBig