[독후감] '터치를 위한 디자인하기'를 읽고
#조시클라크 #북어파트 #웹액츄얼리 #UI실무서 #UI도서 #모바일
1. 해당 도서는 단순히 '터치 인터페이스'만을 위한 것은 아니었던 것 같다. 본 도서는 루크로블르스키의 ‘모바일 우선주의’의 연장선 격인 책인데, 조금 더 최신 사례를 다루고 있다. 글 중간중간에 해당 인터페이스 구현(코딩)에 대한 부분이 있었다. 개인적으로는 해당 내용은 스킵하면서 읽었다. 해당 도서는 UI 기획에 관심이 있는 학생들이나 신입들에게 강력히 추천한다.
2. 인터페이스의 '물리적 특징' 설명 사례에서 1963년 ‘벨’ 직원들이 푸쉬 버튼을 적용한 전화기 연구에서 보인 다양한 레이아웃이 흥미로웠다. 당시 '벨' 사의 직원들은 새로운 인터페이스를 적용하기 위해 다양한 레이아웃을 테스트하였으며, 오늘날 원형 인터페이스에서도 참고할만한 재미있는 인사이트를 제공하고 있다. 해당 인터페이스에서 어떤 레이아웃이 선택되었는지 비교해 보는 것도 흥미롭다. (하단 이미지 참고)
3. 모바일 화면에서는 (왼손, 오른손잡이와 무관) 주로 엄지손가락으로 터치를 수행하기 때문에(관련해서 조시 클라크의 이 글을 참고) 주요 액션 버튼(네비게이션 버튼)을 하단에 배치해야 한다는 점을 알 수 있었다. 다만 안드로이드 OS는 예외인데, 하단에 안드로이드 OS에서 제공하는 기본 액션 버튼이 있으므로 사용성이 다소 떨어지더라도 액션 버튼(네비게이션 버튼)을 상단에 배치해야 한다고 기술되어있다. 물론 해당 내용들은 IOS가이드라인 및 구글 매터리얼 가이드라인을 보면 파악할 수 있는 내용이다. 그렇지만 최근 구글 매터리얼 가이드라인에서도 예외적으로 Bottom 액션 바를 허용하고 있는 상황이다.
패블릿 화면에서는 (모바일 + 태블릿 중간 형태) 모바일과 같이 주요 액션 버튼을 하단에 배치해야 한다. 그 외에도 '플로팅 액션 버튼' 등의 방식을 고려할 수도 있다. IOS의 경우 Reachablity 기능을 이용하여 (홈 버튼을 두 번 탭 하면 전체 화면이 아래로 이동하여 엄지손가락으로 상단 메뉴를 터치할 수 있다.) 사이즈가 큰 화면에서의 주요 액션 버튼의 접근성을 높이고 있다.
패블릿보다 좀 더 큰 태블릿 화면에서는 상단 코너 영역을 활용하여 액션 버튼을 배치해야 한다. 하단 엣지는 콘텐츠 브라우징으로 활용할 수도 있다.
이 책에서는 터치 영역은 일반적으로 '44픽셀/포인트/DP' 이상을 제공해야 한다는 내용을 강조하고 있다.
점진적인 디바이스 크기의 확장에 따른 엄지손가락 Zone의 크기와 모양4. 그 외에도 간편한 입력 방식을 위한 최적화된 컴포넌트를 활용해야 한다는 이야기가 있었다. ‘모바일 우선주의’, ‘웹 폼 디자인’의 연장선상의 이야기였다. 컴포넌트의 명칭들은 이 글을 참고하면 된다.
입력 필드의 개수는 적을수록 좋다. 멀티 필드는 합치는 것이 좋다.
텍스트 필드를 대체할 수 있는 방식을 고려해야 한다. (최근 입력한 정보 몇 건을 미리 보여주는 방법 등)
Auto fill을 지원하라. (주소, 전화번호, 이메일 등)
최적화된 키보드를 제공하라. (이메일 키보드, URL 키보드, 전화번호 키보드, 숫자 키보드, 시간/날짜 컨트롤로 대체) (의외로 UI규격서에서 키보드 타입을 생략하는 경우가 있는데, 구현되었을 때 최적화된 키보드가 아니어서 당황했던 적이 있다. 기획단에서도 꼼꼼히 챙겨야 할 부분이다.)
드롭다운 메뉴를 활용하되 긴 메뉴는 자동 검색 추천 리스트로 활용하라.
짧은 메뉴는 단일 탭으로 활용하라.
작은 범위의 숫자는 Stepper button을 활용하라.
5. (현재 기술을 활용하여) 사용자가 굳이 입력하지 않고도 입력을 지원하는 방식도 흥미로웠다. 해당 챕터의 핵심은 최소한의 입력으로 최대한의 결과를 도출하기. 어느 정도는 알고 있는 내용이지만, 기획단에서 기술적 한계 및 가능성에 대해서는 깊이 고민해보지는 못했던 것 같다.
카메라를 활용하여 정보 불러오기 (주민등록증을 촬영하여 정보 불러오기, 텍스트 정보 불러오기 등)
마이크를 활용하여 정보 불러오기 (소리를 문자화 : STT)
GPS를 활용한 위치/지역정보 불러오기
지문인식을 활용한 손쉬운 ID 입력
속도계/자이로스코프/나침반/방향감지
빛 감지센서
6. 이 책은 탭을 포함한 다양한 제스처의 적용에 대해서도 비교적 최신 사례를 다루고 있다.(번역서임을 감안하더라도) 이 외에도 평소에 재미있는 제스처를 적재적소에 활용한 사례를 더 찾아보고, 기획에 적용하면 좋을 것 같았다. 물론 이런 제스처들은 사용자가 설령 알아채지 못한다 하더라도 모바일 인터페이스를 사용하는데 무리가 없어야 할 것이다.
적합한 제스처를 활용하라. (탭, 스와이프, 롱 프레스, 롱 프레스+드래그, 핀치인/아웃, 더블 탭 방식에 대한 설명 및 사례를 다룸)
표준 컨트롤러의 대안으로 제스처를 활용하라.
7. 아직 제스처는 표준 방식이 적립되지 않았다. 이에 제스처를 사용자에게 어떻게 학습시킬 수 있을지에 대한 내용도 있었다. 결론적으로는 앱 설치 후에 모든 것들을 가이드하지 말고, 게임 Workthrough와 같이 특정 학습 시기에 직접 해 볼 수 있게 하는 것이 유용하다고 한다. 해당 패턴들은 구글 매터리얼 가이드라인에도 일부 소개되어 있으니 참고 바란다. (Feature discovery)
제스처를 학습할 수 있도록 적시적소에 가이드하라.
튜토리얼로 모든 기능을 한 번에 보여주는 것보다는, 게임 가이드(Walkthrough) 형태로 특정 제스처를 사용할 수 있을 때 직접 체험해보게 하라.
*이 글은 피엑스디 블로그에도 게재되었습니다.
Seungyong, Wi (a.k.a uxdragon)
-
pxd UI lab.
작은 차이로 감동을 줄 수 있는 UX 디자이너를 지향합니다.
작은 동작을 꾸준히 연마해 머지않아 '필살기'를 쓰려고 노력중입니다.
email : sywi@pxd.co.kr
-
Pages
https://brunch.co.kr/@uxdragon
https://www.facebook.com/uxdragon
http://instagram.com/seungyong_wi
https://sites.google.com/site/uxdragonarchive
-
pxd team blog
