모든 디자이너가 알아야 할 최고의 UI/UX 디자인 팁과 요령 2

 

1. 중요한 정보의 우선순위 정하기

디자인에 손을 대기도 전에 UI 디자인에 포함해야 할 기능이나 요소를 나열하고 사용자에게 얼마나 중요한지 순위를 매겨보세요.
그런 다음 색상, 크기, 위치, 대비를 사용하여 중요한 정보를 효과적으로 강조하고 인터페이스를 직관적으로 안내할 수 있습니다.
흔히 저지르는 실수는 잘못된 요소를 강조하는 것입니다. 

 

예를 들어 메트릭을 표시하는 두 가지 디자인을 생각해 봅시다:

 

 

 

첫 번째 디자인에서는 메트릭의 제목('매출', '수익' 등)이 큰 글꼴로 되어 있어 실제 값에 초점을 빼앗깁니다.
두 번째 디자인에서는 중요한 수치(예: '591')가 더 눈에 잘 띄어 사용자가 원하는 정보를 더 빨리 찾을 수 있습니다.

두 번째 디자인은 제대로 된 디자인입니다. 핵심 값을 눈에 띄게 함으로써 사용자가 원하는 정보를 더 쉽게 찾을 수 있도록 도와줍니다.

 

2. 콘텐츠 노출을 통한 사용자 장벽 감소

새 앱을 스크롤하다가 가장 먼저 보이는 것은 “셰프가 엄선한 100가지 이상의 레시피를 확인하세요”라는 큰 배너입니다. 흥미롭게 들리지만 추가 단계가 필요하기도 합니다. 실제 레시피를 보려면 배너를 탭해야 합니다. 이것이 바로 사용자가 목표를 달성하기 위해 투입해야 하는 인지적, 신체적, 시간적 노력으로 정의되는 상호작용의 원리입니다.

 

 

 

오늘날과 같이 빠르게 변화하는 세상에서 사용자는 즉각적인 가치를 찾고 있습니다. 배너 뒤에 콘텐츠를 숨기면 사용자와 앱이 제공하는 가치 사이에 불필요한 장벽이 생기게 됩니다. 이러한 상호 작용 비용은 사소해 보일 수 있지만, 특히 사용자가 앱을 처음 사용하고 시간과 노력을 투자하는 것에 대해 확신이 없는 경우 큰 비용이 될 수 있습니다.

 

같은 앱을 열었을 때 “쉽게 추천하는 10가지 레시피”의 선별된 목록이 바로 표시된다고 상상해 보세요. 탭할 필요 없이 콘텐츠가 바로 표시됩니다!

 

 

 

이렇게 하면 몇 가지 효과가 있습니다:

1. 빠른 가치
사용자는 앱이 제공하는 가치를 즉시 확인할 수 있으므로 더 많은 참여를 유도할 가능성이 높아집니다.

2. 마찰 감소
사용자가 목표에 도달하기 위해 거쳐야 하는 단계가 적을수록 사용자 경험이 향상됩니다. 즉, 사용자 리텐션이 증가하고 앱 내에서 더 많은 상호 작용이 이루어집니다.

3. 관련성
콘텐츠를 직접 노출하면 가장 관련성이 높거나 인기 있는 항목을 보여줄 수 있으므로 사용자가 관심 있는 항목을 바로 찾을 가능성이 높아집니다.

 

 

3. 입력 유형에 맞는 필드 디자인

UI에서 입력 필드를 디자인할 때 획일적인 접근 방식을 사용하고 싶을 때가 있습니다. 하지만 이러한 방식은 사용자 경험에 해를 끼칩니다. 핵심은 사용자에게 입력하도록 요청하는 정보 유형과 밀접하게 일치하는 필드를 디자인하는 것입니다. 이렇게 하면 상호 작용이 간소화될 뿐만 아니라 불필요한 인지 부하를 제거하여 보다 원활하고 효율적인 사용자 경험을 제공할 수 있습니다. 먼저 인증 코드를 입력하는 두 가지 디자인을 비교해 보겠습니다.

 

 

 

첫 번째 예는 코드 전용으로 확대된 타이포그래피가 있는 4개의 개별적이고 큰 상자를 사용합니다. 반면 두 번째는 표준 텍스트가 포함된 하나의 긴 필드를 사용합니다. 첫 번째 접근 방식의 장점은 분명합니다. 코드의 각 숫자에 명확하게 지정된 공백을 제공함으로써 오류 가능성을 최소화합니다. 이렇게 하면 입력 프로세스가 단순화되어 더 빠르고 실수할 가능성이 줄어듭니다. 또한 확대된 타이포그래피는 숫자를 쉽게 구분할 수 있도록 도와주며, 특히 작은 텍스트 크기로 인해 어려움을 겪는 사용자에게 유용합니다.

 

이제 카드 정보를 입력하는 다른 시나리오를 살펴보겠습니다.

 

 

 

첫 번째 예시에는 CVC, 만료일, 우편번호 등 각 정보에 대해 하나의 긴 필드가 있습니다. 후자의 디자인은 입력되는 데이터의 유형과 양에 따라 필드의 길이가 일치하기 때문에 더 효과적입니다.

CVC는 항상 3자리 또는 4자리 숫자이므로 필드가 짧을수록 더 적절하고 사용자를 효과적으로 안내합니다. 만료일과 우편번호에도 동일한 논리가 적용됩니다. 이러한 간결한 필드는 모호함을 없애고 공간을 효율적으로 사용하며 궁극적으로 보다 간결하고 사용자 친화적인 경험을 제공합니다.

두 예에서 '더 나은' 디자인은 입력 필드의 디자인을 예상 데이터와 일치시킴으로써 사용자의 작업을 더 쉽게 만듭니다. 양식은 단순히 정보를 캡처하는 데 그치지 않고 정확하고 효율적인 정보 입력을 지원하므로 사용자와 디자이너 모두에게 윈윈입니다.

 

 

출처 : 

https://medium.com/@uxpeak.com/top-ui-ux-design-tips-every-designer-needs-to-know-about-part-3-51b839458029