리프트(Lyft)의 새 UI에서 배우다
엄지 손가락이 닿기 쉽게
요약
앱에서 가장 많은 인터렉션을 만드는 요소를 손가락이 가장 닿기 쉬운 자리에 위치시켜라. 틀을 깨는 것을 두려워하지 마라. 중요한 것은 얼마나 편하냐이다.
대부분의 앱에서 검색창은 스크린 최상단에 위치한다. 페이스북, 인스타그램, 링크드인, 심지어 스냅챗 같은 소셜 미디어에서 모두 검색창은 대부분 메인 화면의 꼭대기에 있다. 교통 앱에서도 그런 스타일은 매우 흔하다.
왜 그런 것일까? 애플이 검색창은 앱 UI의 최상단에 있어야만 한다고 제시한 적도 없고, HIG(휴먼 인터페이스 가이드라인, 소프트웨어 개발 시 참고해야 할 가이드 문서)가 그래야 한다고 한 적도 없다.
아마 당신이 왜 검색창이 화면의 최상단에 있어야 하는지 구글링 한다면, Quora (지식인 같은 질의응답 사이트)에 똑같은 질문과 그 답이 뜰 것이다. "사용자들은 검색창이(그게 한 개라면) 최상단에 있어야 한다고 훈련받았어요. 그 관습을 깨는 건 리스크가 따릅니다."
리프트(승차 공유 서비스)의 프로덕트 디자이너도 정확히 똑같은 생각을 아주 쿨한 방식으로 했다.
리프트는 검색창에 대해 다른 접근 방식을 취했다. 플로팅 영역을 상단에 올리는 대신에, 그들은 검색창을 화면 중하단 영역에 덮어 씌웠다. 이 간단한 변화가 거의 100%의 사용자들이 검색에 더 접근하기 쉽게 만들었다.
우리가 이 부분에 대해서 깊게 생각하지 않음에도 불구하고 검색창이 화면 상단에 위치한 것은 접근하기 불편하다. 특히 손이 작거나 덜 유연한 경우, 화면의 윗부분이 손가락에서 대체로 멀리 떨어져 있기 때문에 거기까지 손을 뻗는 것이 짜증 날 수밖에 없다.
대부분의 앱을 시각화한다면, 가장 중요한 콘텐츠는 화면의 중간 또는 중간보다 살짝 아래 영역에 위치할 것이다. 네비게이션의 탭 바, 소셜미디어의 포스팅, 메시징 앱의 키보드가 그런 것처럼.
리프트의 검색창은 비현실적으로 높이 위치한 대신 엄지 손가락이 손을 뻗기 쉬운 아래 영역에 있다.
https://medium.com/@Draward/mobile-reachability-rules-of-thumb-ce37dd0cd3ad위의 2015년 조사에 따르면, 거의 절반 정도의 스마트폰 사용자 인터렉션은 한 손으로 일어난다. 바로 그게 사람들이 스마트폰을 사용하는 방식이다. 그래서 리프트는 사람들이 엄지 손가락을 뻗어야 하도록 만들지 않았다. 그 대신 검색 창을 엄지 손가락이 닿기 쉬운 '스윗 스폿'에 두었다.
https://medium.com/@Draward/mobile-reachability-rules-of-thumb-ce37dd0cd3ad동일한 연구에서 발췌한 저 그래프를 보라. 검색창들의 절반은 "닿지 않는" 영역에 있다. 하지만 리프트의 검색창은 저 다이아그램에서 초록색으로 표시된(Good) 엄지의 바로 아래에 위치한다.
리프트 사례로부터 디자이너들이 배울 수 있는 것
앱 UI를 분석하고 사용자 인터뷰를 진행해라. 어떤 요소가 가장 많이 인터렉션을 일으키는지 확인해라. 교통 앱에서는 대체로 검색창일 것이고 소셜 미디어에서는 아마도 사진이나 좋아요 버튼이다. 쇼핑 앱에서는 상품일 것이다.
당신 앱에서 가장 자주 인터렉션을 불러일으키는 요소가 가장 닿기 쉽도록 만들어라.
틀을 깨는 것을 두려워하지 마라. 누군가는 처음으로 해야 한다. 물론 당신은 당신의 앱 UI가 친숙하기를 바랄 것이지만, 그래도 그것이 얼마나 편리할지의 문제를 잊지 말아야 한다.
당신의 인터페이스를 사용하는 각기 다른 크기와 연령의 손, 그리고 당신 고객의 인구통계학적 특성에 대해서 생각해라. 당신 자신에게 물어라. "내 경험이 다른 사용자들에게도 적용 가능할까?"
마지막으로, 어떤 스타일에 너무 애착을 두지 마라. 스타일은 변하고 새로운 디자이너가 당신 회사에 들어올 수도 있다. iOS 6의 3D 스타일을 기억해라. 변화를 반기고 그것을 거부하지 마라.
이 글은 아래 원문의 번역입니다.
저자 : Theo Strauss
번역자 : 곽나래
원문링크 : https://uxdesign.cc/what-every-product-designer-should-take-away-from-lyfts-new-ui-742c9668b067
