모바일 UX/UI 디자인에서 해야 할 것과 하지 말아야 할 것

 

모바일 UX/UI 디자인의 활용 방법

사용자 중심 디자인 우선 순위 지정

사용자를 이해하는 것이 중요합니다. 사용자 조사를 실시하고 다양한 사용자 그룹을 대표할 수 있는 페르소나를 생성하세요. 예를 들어, 에어비앤비는 사용자 페르소나를 광범위하게 활용하여 다양한 여행자 선호도에 맞게 플랫폼을 맞춤화합니다. 사용자 행동에 따라 추천, 검색 결과 및 이메일을 개인화합니다.

 

반응형 디자인
다양한 화면 크기에 맞춰 매끄럽게 조정되는 디자인을 만드세요. Instagram은 다양한 기기에서 일관된 기능을 유지하는 대표적인 예입니다. 심플한 레이아웃과 확장 가능한 인터페이스를 통해 스마트폰과 태블릿에서 쉽게 탐색하고 상호 작용할 수 있습니다.

직관적인 탐색
사용자는 익숙한 탐색 패턴을 기대합니다. Snapchat은 탐색을 위해 스와이프 제스처를 도입하여 사용자가 앱을 직관적으로 이동할 수 있도록 했습니다. 이러한 간소화된 상호 작용은 많은 모바일 앱의 표준이 되었습니다.

일관성
일관성은 사용자의 신뢰와 친숙함을 구축합니다. Google의 머티리얼 디자인이 대표적인 예입니다. 모든 앱에서 일관된 디자인 원칙을 유지하여 Google 에코시스템 내에서 사용하는 앱에 관계없이 사용자에게 통일된 경험을 제공합니다.

 

 

 

로드 시간 최적화
속도가 중요합니다. Pinterest의 모바일 사이트 개편으로 대기 시간이 크게 단축되어 SEO 트래픽이 15% 증가하고 사용자 제작 광고 수익이 44% 증가했습니다.

엄지손가락 친화적인 디자인
엄지손가락 도달 범위를 고려하는 것이 중요합니다. 트위터의 모바일 앱은 전략적으로 메인 내비게이션 바를 한 손으로 쉽게 닿을 수 있는 하단에 배치하여 한 손으로도 사용할 수 있는 사용자 경험을 향상시켰습니다.

명확한 콜투액션(CTA)
Uber의 모바일 앱은 사용자가 차량 서비스를 요청할 수 있도록 명확한 CTA를 제공합니다. 눈에 잘 띄는 '차량 서비스 요청' 버튼과 명확한 표시가 있어 사용자가 쉽게 조치를 취할 수 있어 직관적인 사용자 경험을 제공합니다.

시각적 계층 구조
크기, 색상, 배치를 통해 필수 요소의 우선순위를 정합니다. 나이키 트레이닝 클럽 앱은 대담한 타이포그래피와 대비되는 색상을 사용하여 중요한 기능을 강조함으로써 사용자가 피트니스 루틴을 쉽게 따라갈 수 있도록 안내합니다.

 

 

 

피드백 및 확인
사용자에게 즉각적인 피드백을 제공하는 것은 매우 중요합니다. LinkedIn의 '연결 요청, 전송됨' 알림은 사용자에게 작업이 성공했음을 알려주어 안심하고 명확하게 확인할 수 있도록 합니다.

사용성 테스트 및 반복
지속적으로 테스트하고 개선하세요. Slack은 정기적으로 사용자 피드백을 수집하여 인터페이스를 개선함으로써 사용자 요구에 부합하는 반복적인 개선이 이루어집니다.

도전 과제 탐색
뛰어난 인터페이스를 만들기 위한 여정은 모범 사례를 구현하는 것만큼이나 함정을 피하는 것이 중요합니다. 모바일 환경에는 사용자를 방해하고 흐름을 방해하며 전반적인 모바일 경험을 손상시킬 수 있는 잠재적인 걸림돌로 가득 차 있습니다.

모바일 UI UX 디자인 세계는 끊임없이 진화하고 있으므로 실수에 주의를 기울이지 않으면 사용자 참여를 저해하고 모바일 애플리케이션과 웹사이트의 성공을 저해할 수 있습니다. 데이터와 AI가 주도하는 이 세상에서 디자이너는 이러한 함정을 피하고 보다 원활하고 사용자 친화적인 모바일 디자인 여정을 위한 길을 열 수 있는 선견지명을 갖추어야 합니다.

 

모바일 UX/UI 디자인에서 피해야 할 것들

사용자에게 압도적인 정보 제공
복잡한 화면은 피하세요. Facebook은 디자인을 간소화하고 핵심 콘텐츠에 우선순위를 두어 모바일 앱을 간소화하여 사용자 참여도와 리텐션을 개선했습니다.

플랫폼 가이드라인 무시
플랫폼별 가이드라인을 무시하면 사용자에게 혼란을 줄 수 있습니다. 앱 'Foursquare'는 처음에 iOS 디자인 원칙을 무시했다는 비판에 직면했고, 그 결과 Apple의 가이드라인에 더 부합하고 사용자 경험을 개선하기 위해 다시 디자인했습니다.

복잡한 양식과 입력
긴 양식은 사용자를 방해합니다. Booking.com은 양식 필드를 줄이고 시각적 진행률 표시기를 도입한 결과, 예약률이 3.5% 증가했습니다.

 

 

 

작거나 혼잡한 터치 타겟
실수로 탭하면 사용자가 불편을 겪습니다. Spotify는 터치 타겟을 더 크게 조정하여 오클릭 가능성을 줄이고 전반적인 사용자 경험을 향상시켰습니다.

방해가 되는 팝업 및 광고
방해가 되는 광고는 사용자 경험을 방해합니다. Forbes는 방해가 되는 광고 경험에 대한 반발에 직면하여 사용자 만족도를 높이기 위해 모바일 사이트의 애드라이트 버전을 도입했습니다.

접근성 무시
접근성이 떨어지면 사용자가 소외됩니다. BBC Sport 모바일 앱의 재설계는 WCAG 지침을 준수하여 접근성을 개선하고 결과적으로 사용자 기반을 넓혔습니다.

멀티미디어 자동 재생
원치 않는 자동 재생은 사용자 경험을 방해합니다. Facebook은 사용자가 동영상 자동 재생 설정을 제어할 수 있도록 모바일 앱을 수정하여 사용자 제어 기능을 강화하고 데이터 소비를 줄였습니다.

불명확한 오류 처리
모호한 오류 메시지는 사용자를 혼란스럽게 합니다. Google의 모바일 로그인 프로세스는 명확한 오류 메시지를 제공하여 사용자에게 문제 해결 방법을 안내함으로써 보다 사용자 친화적인 환경을 제공합니다.

 

 

 

과도한 사용자 권한
과도한 권한 요청은 사용자를 방해합니다. 시간이 지남에 따라 WhatsApp과 같은 앱은 권한 요청을 간소화하여 필요한 경우에만 액세스를 요청하여 사용자 신뢰를 향상시켰습니다.

사용자 테스트 건너뛰기
테스트를 하지 않으면 중요한 문제를 간과하게 됩니다. 에어비앤비는 실제 사용자를 대상으로 지속적으로 앱을 테스트하여 문제점을 파악하고 반복적으로 플랫폼을 개선하고 있습니다.

피드백 무시
디자인에 아무리 애착을 갖고 있다 해도 고정된 틀에 박혀서는 안 됩니다. 디자인은 마지막 순간에 변경하거나 수정할 수 있을 만큼 유연해야 합니다. 사용자가 필요로 하거나 요구하는 사항에 귀를 기울이면 장기적으로 UI UX 디자인 기술을 향상시키는 데 도움이 될 수 있습니다.

막다른 페이지 없음
이 항목은 막다른 페이지에 직면한 후 어떻게 해야 하는지 파악하는 데 도움이 필요한 사용자를 위한 항목입니다. 페이지에 차단 요소가 없는지, 막다른 페이지를 발견했을 때 사용자가 따를 수 있는 충분한 안내가 있는지 확인하세요. 이러한 페이지는 일관성에 영향을 미치고 사용자에게 잘못된 방향으로 유도합니다.

 

사례 연구

에어비앤비
해야할 것 : 디자인 우선 순위 지정

 

에어비앤비의 성공 비결은 사용자 페르소나와 행동에 세심한 주의를 기울인 데 있습니다. 에어비앤비는 다양한 여행자 선호도에 맞춰 플랫폼을 맞춤화함으로써 개인 맞춤형 추천과 검색 결과를 제공합니다. 이러한 사용자 중심 접근 방식은 사용자 참여도와 만족도를 크게 향상시켰습니다.

 

 

인스타그램
해야할 것 : 반응형 디자인

Instagram의 모바일 인터페이스는 다양한 기기에서 일관성 있고 기능적으로 유지됩니다. 확장 가능한 요소와 직관적인 탐색 기능으로 원활한 경험을 보장하여 다양한 플랫폼에서 큰 인기를 누리고 있습니다.

 

 

Booking.com
해야할 것 : 복잡한 양식 간소화

 

선도적인 여행 플랫폼인 Booking.com은 모바일 앱의 양식 필드 수를 줄였습니다. 이러한 간소화와 시각적 진행률 표시기를 통해 예약 완료율이 3.5% 증가했으며, 간소화된 양식이 사용자 참여에 미치는 영향을 강조했습니다.

 

 

Spotify
피해야할 것 : 작은 터치 타겟

 

 

Spotify는 터치 타겟을 확대하기 위해 모바일 인터페이스를 조정했습니다. 이러한 디자인 수정으로 실수로 탭하는 경우가 줄어들어 전반적인 사용자 환경과 앱 내 탐색 기능이 개선되었습니다.

 

 

Facebook

피해야할 것 : 방해가 되는 팝업 및 광고

Facebook은 방해가 되는 광고 경험으로 인해 사용자 불만에 직면했습니다. 이를 해결하기 위해 사용자가 동영상 자동 재생 설정을 더 잘 제어할 수 있도록 변경하여 플랫폼을 탐색하는 동안 전반적인 사용자 경험을 개선했습니다.

 

 

BBC 스포츠
피해야할 것 : 접근성 무시

BBC Sport 모바일 앱은 접근성 가이드라인에 맞춰 새롭게 디자인되었습니다. 접근성을 위한 이러한 노력은 사용자 기반을 넓히고 플랫폼의 전반적인 포용성을 개선했습니다.

 

Uber
해야할 것 : 명확한 콜투액션

 

Uber의 모바일 앱은 명확하고 뚜렷한 CTA의 모범을 보여줍니다. 눈에 잘 띄게 배치된 '차량 서비스 요청' 버튼과 명확한 표시기는 사용자 상호작용을 간소화하고 직관적인 경험을 제공합니다.

 

Google
해야할 것: 시각적 계층 구조 및 오류 처리

Google의 모바일 로그인 프로세스는 시각적 계층 구조와 명확한 오류 메시지를 사용합니다. 이러한 디자인 요소는 사용자에게 프로세스를 안내하고 오류 발생 시 명확한 지침을 제공하여 사용자의 이해도를 높이고 불만을 줄여줍니다.

 

 

WhatsApp

 

피해야할 것 : 과도한 사용자 권한

WhatsApp은 시간이 지남에 따라 권한 요청을 개선했습니다. 필요한 경우에만 액세스를 요청하고 불필요한 권한 프롬프트로 사용자에게 부담을 주지 않도록 함으로써 사용자 신뢰를 향상시켰습니다.

 

 

Slack
해야할 것 : 사용성 테스트 및 반복

Slack은 지속적으로 사용자 피드백을 수집하여 인터페이스를 개선합니다. 이러한 반복적인 프로세스를 통해 사용자의 요구와 선호도에 맞춰 지속적으로 개선합니다.

 

 

결론

뛰어난 모바일 UX/UI 디자인 서비스를 만들려면 사용자 요구, 사용성 및 미학에 중점을 둔 세심한 접근 방식이 필요합니다. 디자이너는 이러한 사항을 구현하고 하지 말아야 할 사항을 피함으로써 시각적으로 매력적으로 보이고 원활하고 즐거운 사용자 경험을 제공하는 모바일 인터페이스를 만들 수 있습니다.

핵심은 끊임없이 반복하고, 사용자 피드백을 수집하고, 끊임없이 변화하는 고객의 요구를 충족하도록 디자인을 발전시키는 것임을 기억하세요. 디자이너는 이러한 원칙을 수용함으로써 모바일 애플리케이션과 웹사이트가 사용자의 참여를 효과적으로 유도하고 지속적으로 긍정적인 인상을 남길 수 있습니다.

 

 

출처:

https://medium.com/@pepper_square/mobile-ux-design-dos-donts-b68a4a990d5b