brunch

You can make anything
by writing

- C.S.Lewis -

by UX 컨설턴트 전민수 Aug 03. 2016

#01. 사용자 행위를 단축시키는 UX 원칙

모바일 앱 UI/UX 가이드 

안녕하세요. 이비피알유엑스 대표 전민수입니다.  




사용자가 자신이 원하는 과업을 간단하게 마무리할 수 있도록 시스템은 이를 지원해줘야 합니다. UI 모형에서는 이를 단축성이라고 합니다. 


모바일 앱에서 단축성 적용 사례는 다음과 같습니다. 

검색 전 (초성 검색, 포괄적 검색)
검색 후 (최근 검색어, 최근 경로 검색, 연관 검색어) 
컨텍스트 기반 검색 (현재 위치 기반 검색, 내 위치에서 가장 가까운 장소 추천)   
내비게이션 기능 (주요 서비스 모아보기, 자주이용하는 기능, 관련 콘텐츠 바로가기, 태그, 바로가기, 링크, 더보기) 
게시물 주제별 선택
커스터마이징 UI (즐겨찾기 기능,담기 기능)
나의 거래 내역     
SNS 연동 및 공유  


검색 전 


초성 검색 



검색이란 어떤 기억 매체 중에 축적된 정보 중에서 필요한 정보를 찾아내는 것을 말합니다. 검색은 사용자가 찾고자 하는 정보를 쉽게 찾을 수 있도록 도와주는 기능이다. 단축성의 대표 사례입니다.


예를 들면 멜론 검색 창에 ‘현’을 입력하면 검색창 하단 영역에 ‘현’이 들어간 단어가 있는 가수와 곡들을 추천해줘 원하는 곡을 쉽게 찾을 수 있도록 도와줍니다.



포괄적 검색


네이버 모바일 웹에서 검색 시 포괄적 검색어가 제공되어 검색의 편의성을 높이고 있습니다.




검색 후 


최근 검색어   


검색어 제공 시 사용자가 최근에 검색하거나 조회한 검색어를 별도로 모아서 제공되어야 합니다. 사용자가 검색한지 어느정도 시간이 지났을 때 이전에 어떠한 검색을 했는지 알 수 있고, 재검색을 할 수 있어 검색의 편의성을 높일 수 있습니다. 


예를 들면 네이버 모바일 웹에서는 검색한 최근 검색어를 보여줌으로써 검색 이용을 쉽고 편리하게 할 수 있습니다.



최근 경로 검색 


네이버 지도 웹에서는 최근 이용했던 지도 경로를 제공하고 있습니다.




연관 검색어 


검색 결과, 연관 검색어가 제공되어 검색 결과의 폭을 더 좁힐 수 있습니다. 



컨텍스트 기반 검색 


현재 위치 기반 검색 


네이버 지도는 지도 경로 검색 시 ‘내 위치’를 선택하여 경로 검색의 편의를 제공합니다.




내 위치에서 가장 가까운 장소 추천 


스마트폰 특성상 언제, 어디서나, 원하는 정보에 쉽게 접근할 수 있으므로, 스마트폰 특성을 살려 위치기반 콘텐츠 제공이 필요합니다. 영화 관람을 할 때, 평소 이용하던 장소가 아닌 다른 장소에서 영화를 보게 되는 경우가 종종 있습니다. 이때, 현재 위치를 기준으로 가까운 영화관 정보가 필요한데, CGV는 내 위치에서 가장 가까운 극장을 추천해주고 있어 극장 선택을 쉽게 할 수 있습니다.




내비게이션 기능


주요 서비스 모아보기 


사이트 내 전체 서비스를 한 눈에 알아볼 수 있는 모아보기 기능이 제공되어야 합니다. 예를 들면 CGV 앱은 화면 우측에 햄버거 버튼이 제공되고 있고, 버튼 선택 시 CGV에서 제공하는 주요 정보와 나의 영화 거래 내역을 한 번에 접할 수 있습니다. 





자주이용하는 기능 


하나은행은 은행업무에서 가장 많이 쓰는 조회/이체 메뉴를 메인 페이지 중앙에 버튼으로 배치하여 정보 이용의 편의를 높이고 있습니다.



관련 콘텐츠 바로가기 


본문 하단 영역에 관련 콘텐츠로 바로 갈 수 있도록 기능이 제공되어야 합니다. 


 기사 하단 영역에 [이 기사를 본 사람들이 본 뉴스]콘텐츠 목록이 제공되고 있습니다


태그 


본문 태그 선택 시 해당 태그 검색 목록으로 이동하여 좀 더 많은 정보를 접할 수 있습니다. 





바로가기 


바로가기(Shortcut)는 명령어 실행을 위한 특정 기능입니다. 즉, 정보 접근을 위해 여러 번의 클릭이 아닌 한 번에 접근할 수 있는 기능입니다. 예를 들어, 바로가기는 제공되는 콘텐츠 성격에 따라서 상세 페이지가 아닌 목록에서도 쉽게 접근할 수 있어야 합니다.


네이버 뮤직은 TOP 100 메뉴에 ‘전체 선택’, ‘전체 듣기’ 기능이 있어 곡을 하나하나 선택하지 않아도 한 번에 들을 수 있어 편합니다. 또한, ‘…’을 선택하면 ‘앨범 상세정보, 아티스트 상세정보, 뮤직비디오 등’ 바로가기 기능을 달리 제공해 사용자가 원하는 형태로 노래를 감상할 수 있습니다.



카카오톡은 채팅 메뉴 하단에 플로팅 버튼이 제공되어 ‘오픈 채팅, 비밀 채팅, 일반 채팅’ 에 바로 참여가 가능합니다.



링크 


해당 정보와 관련된 정보로 바로 이동하게 하여 더 많은 정보를 접할 수 있어야 합니다. 예를 들면 네이버 카페> 상단에 있는 게시물 작성자(유니드잡1) 선택 시, 해당 카페에서 작성했던 작성자의 모든 글을 한 번에 조회가 가능합니다.



더보기 


다음 뉴스 기사 하단에 ‘더보기’ 버튼이 제공되고 있는데, 버튼 선택 시 더 많은 관련 뉴스를 접할 수 있어 편합니다.




게시물 주제별 선택


콘텐츠 목록 제공 시 상세 분류가 제공되어 정보를 쉽게 찾을 수 있어야 합니다. 



커스터마이징 UI


즐겨찾기 기능


위키백과에서는 즐겨찾기를 다음과 같이 정의합니다. “즐겨찾기(Favorites, 문화어: 수집통)또는 북마크(Bookmark)는 웹브라우저에서 사용자가 웹사이트의 URL을 등록하는 기능 또는 그렇게 등록한 URL의 목록”이라고. ‘즐겨찾기’는 인터넷 익스플로러에서 쓰이기 시작한 말이고, 구글 크롬, 파이어폭스 등의 웹브라우저는 ‘북마크’라고 합니다.


즐겨찾기를 통해서 주소창에 URL을 매 번 번거롭게 입력하지 않고 바로 해당 링크를 클릭하는 것만으로도 사용자가 원하는 웹사이트에 바로 접속할 수 있습니다. 또 URL이 정확히 기억나지 않더라도 즐겨찾기에 추가해둔 상태라면 쉽게 다시 찾을 수 있다는 장점이 있습니다. 따라서, 사용자가 자주 이용하는 기능들을 모아 즐겨찾기 기능으로 제공하는 것은 서비스 이용의 편의를 높여줍니다.


카카오톡은 즐겨찾기 목록을 상단에 배치해 평소에 많이 대화하는 친구에게 쉽게 대화할 수 있도록 했습니다.


(모바일 웹) 네이버 카페는 전체 카페 목록 중에서 사용자가 자주 방문하는 카페의 게시판을 직접 즐겨찾기 할 수 있도록 제작해 사용자는 자신의 카페 목록에서 쉽게 접근할 수 있습니다.




담기 기능 


사용자가 자주 이용하는 정보에 차후 쉽게 접근할 수 있게 정보를 담을 수 있는 기능이 제공되어야 한다. 예를 들어, 쇼핑몰의 경우 사용자가 관심 상품을 담아 한 번에 결제할 수 있도록 장바구니 기능이 제공되고 있습니다. 네이버 카페는 내 카페 목록 중 즐겨찾기 목록을 우선으로 보여줘 자주 가는 카페 접근이 쉽고 편합니다.  



나의 거래 내역 


사용자의 이전에 거래했던 내역을 조회하게 하여 이전에 구매한 상품을 재 구매 할 수 있게 편의를 제공할 필요가 있습니다. 예를 들어 쿠팡은 마이 쿠팡 메뉴를 제공하여 이전에 주문했던 목록을 쉽게 조회가 가능합니다.




SNS 연동 및 공유 


SNS 연동 


게시물에 참여 글 작성 시 SNS 계정과 연동이 되어 편합니다. 

덧글 작성 시 페이스북 계정과의 연동이 됩니다


SNS 공유 


SNS 공유 버튼 선택 시 URL 복사 기능이 제공되어 편합니다. 




감사합니다. 





추천 UI/UX 교육 안내


[스터디] UX 방법론을 활용한 웹/모바일 기획 스터디  1기 모집

4월1일(수) ~ 4월29일(수) 매주 수, 금 오후 8시-10시



[강좌] UX 디렉터 양성과정 9기 모집 

3월24일(화) ~ 5월21일(목) 매주 화, 목 오후 7시30분 - 10시30분


[인강] 예민한 UX 디자인 모집 

평생 수강 


매거진의 이전글 유저 리서치란 무엇인가?

매거진 선택

키워드 선택 0 / 3 0
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari