brunch

매거진 신비한 모바일 인터페이스 사전

라이킷 115 댓글 3

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 플러스엑스 Jan 14. 2019

2원칙. 가볍게 유지하라

author - 우뚝솟은비니 | UX 디자이너

Previous Brunch.

『리치 인터페이스 디자인』이라는 책의 6가지 디자인 원칙과 가이드라인을 바탕으로 최근의 모바일 인터페이스 사례를 살펴보고 있습니다.

1원칙. 다이렉트하게 만들어라

author - 호롤룰루 | UX 디자이너 | Previous Brunch. 『리치 인터페이스 디자인』이라는 책의 6가지 디자인 원칙과 가이드라인을 바탕으로 최근의 모바일 인터페이스 사례을 살펴보고 있습니다. *gif가 다량 포함되어있습니다. PC나 아이폰 브런치 앱에서만 재생이되기 때문에 PC 혹은 아이폰 브런치 앱에 접속해서 읽어주시면 감사하겠습니다:) 제1원칙 다이렉트하게 만들어라 페이지의 전

brunch.co.kr/@plusx/21

*gif가 다량 포함되어있습니다. PC나 아이폰 브런치 앱에서만 재생이 되기 때문에 PC 혹은 아이폰 브런치 앱에 접속해서 읽어주시면 감사하겠습니다:)

제2원칙

가볍게 유지하라

사용자의 액션 유도를 위해 인터렉션 단계를 최대한 간단하고 가볍게 유지하라는 원칙.

상호작용이 가벼울수록 사용자의 액션이 늘어나며, 액션이 늘어날수록 비즈니스가 활성화되는 것은 당연한 이치입니다. 책에서는 인터렉션(상호작용)을 가볍게 만드는 패턴으로 문맥 도구를 제시하고 있습니다.

문맥 도구란?

기능(Tool)과 콘텐츠를 분리하지 않고 콘텐츠 안에서 사용자의 행동에 따라 노출하는 도구.
문맥 도구를 제공하는 방법에는 상시 노출 도구/마우스 오버 노출 도구/토글 노출 도구/다단계 노출 도구/2차 메뉴 등이 있다.

기능을 툴 바 또는 메뉴 같은 영역에 모아 둘 수도 있지만, 이는 사용자가 기능을 이용하는 데 더 많은 노력을 기울여야 하고 시각적인 부담 또한 늘어납니다. 이럴 때 기능을 콘텐츠와 분리하는 대신 콘텐츠 안에서 문맥 도구로 제공하여 인터렉션을 가볍게 유지할 수 있습니다. 5가지의 문맥 도구 중 마우스 오버 도구, 다단계 노출 도구, 2차 메뉴에 대해 알아보겠습니다.

마우스 오버 노출 도구

마우스 오버 노출 도구란, 주요하지 않은 기능일 경우 항상 노출하는 대신 필요할 때만 보이도록 하는 도구입니다. PC버전 사이트를 예로 들면, 지메일에서 메일 리스트 위에 마우스 오버 시 삭제, 보관 처리 같은 부가적인 기능을 노출하는 것을 들 수 있습니다.

gmail PC버전. 마우스 오버 시, 우측에 부가 기능 아이콘을 노출

제스처 노출 도구

모바일에서는 마우스 오버의 형태는 사라졌지만 비슷한 역할을 하는 인터렉션이 있는데요, 바로 제스처를 이용한 인터렉션입니다. 부르기 편하게 '제스처 노출 도구'라고 하겠습니다.

Chrome 모바일 브라우저의 제스처 노출 도구

크롬은 제스처 노출 도구로 새로고침, 새 탭, 탭 닫기 등의 부가 기능을 숨겨두고 있습니다.

북 리뷰를 준비하며 크롬의 제스처 인터렉션을 발견하고는 굉장히 흥미롭다는 생각을 했습니다.

1. 전통적으로 새로고침이 있던 주소창 우측 공간에 새로고침 대신 공유 버튼을 배치하고, 새로고침은 제스처 노출 도구로 숨겨두었습니다. 근래에는 인터넷 환경이 빨라져서 새로고침 할 일이 적기도 하고, 특히 모바일에서는 페이지 새로고침보다는 공유할 일이 많다는 점을 고려해보면 ‘새로고침’과 ‘공유’의 중요도 레벨을 바꾼 것은 적절한 판단이었다고 생각됩니다.

2. 제스처 노출 도구의 문제는 발견 가능성(Discoverability)이 낮다는 것인데, 이를 위해 제스처는 보조 수단으로만 두고 하단 메뉴바에 새로고침, 새창, 창닫기가 가능한 메인 루트를 뚫어놓았습니다.

3. 사실 발견 가능성 문제에 있어서도, 이미 많은 어플에서 '아래로 당겨서 새로고침' 하는 제스처를 사용하고 있고 사용자도 이에 익숙하기 때문에 큰 문제가 되지 않을 것 같습니다.

마우스 오버 노출 도구 가이드라인과 크롬

01 도구의 중요도가 높지 않다면, 마우스 오버하기 전까지 문맥 도구를 숨겨라. → 공유 버튼을 노출하고 중요도가 비교적 낮은 새로고침, 새 탭, 탭 닫기를 제스처 도구로 숨겨두었습니다.

02 추가 도구를 노출할 때 다른 페이지 요소들은 안정적으로 유지하라. → 하단으로 밀리는 것 외에 다른 페이지 요소들은 안정적으로 유지됩니다.

03 아이콘은 명확하게, 가능하면 아이콘보다는 텍스트를 사용하라. → 아이콘과 텍스트를 둘 다 사용하여 기능에 대한 명확히 인지할 수 있습니다.

다단계 노출 도구

다단계 노출 도구는 사용자의 상호작용에 따라 기능이 점차 나타나게 하는 문맥 도구를 말합니다.

이 패턴은 애버노트에서 찾아볼 수 있습니다.

❶작성된 노트를 열람할 때는 이미지, 음성, 스케치, 파일 등 텍스트 편집 외의 편집 기능들을 아이콘으로 제공합니다.

❷본문을 탭 해서 편집 모드로 전환되면 키패드 상단에 텍스트 편집에 필요한 도구를 노출합니다.

❸텍스트 편집 도구 중에서도 왼쪽에서 두 번째 아이콘을 탭 하면 더욱 세밀하게 텍스트를 편집할 수 있는 기능을 제공합니다.

2차 메뉴

2차 메뉴란, 대체 기능이나 빠른 실행 기능(바로가기)을 제공하기 위한 것으로, PC에서는 마우스 우클릭했을 때 나타나는 메뉴입니다. 하지만 마우스가 없는 모바일 환경에서의 2차 메뉴는 어떨까요?

1. 3D 터치

2차 메뉴의 실행 방식이 모바일로 넘어오면서 길게 탭 하기 혹은 꾹~탭 하는 제스처로 바뀌었다고 생각합니다. 3D 터치는 안드로이드에는 없고 아이폰에만 있는 꾹~눌러서 메뉴를 노출하는 방식입니다.

아이폰의 3D 터치는 웹의 2차 메뉴보다 훨씬 진보된 미리 보기, 바로가기 기능을 제공합니다. 아이폰 유저분들, 혹시 폰에 깔려있는 앱들을 3D 터치로 눌러본 적 있으신가요?

하나씩 누르면서 비교해보세요 생각보다 꿀잼입니다

아이폰 앱들은 3D 터치를 통해 앱에 진입하지 않고도 핵심 기능에 접근할 수 있는 '바로가기'를 제공하고 있습니다. 같은 카테고리의 어플들은 서로 비슷한 바로가기 메뉴를 제공한다는 점도 재미있습니다. 날씨나 멤버십 어플은 위젯 형태로 원하는 콘텐츠(날씨정보, 멤버십 바코드)를 바로 불러와 주고, 커머스는 배송상태를 바로 알려주고 있습니다. 다만, 앱에 따라 정도의 차이는 보이네요. (스타벅스와 G9가 좀 심심해 보이죠?)

앱 내에서 3D 터치를 활용한 대표적인 예는 넷플릭스입니다.

3D 터치로 간단한 미리보기와 몇 가지 바로가기 기능을 제공하고 있습니다.

2. 길게 탭 하기

안드로이드와 ios모두에 해당하는 2차 메뉴의 패턴으로는 길게 탭 해서 메뉴를 노출하는 방식이 있습니다. 이러한 패턴은 아이폰 기본 메모 어플에서 찾아볼 수 있습니다.

❶열람 모드

열람 모드에서 텍스트를 길게 탭 하면 시스템에서 기본으로 제공하는 '복사하기/찾아보기/공유'기능이 2차 메뉴로 노출됩니다.

❷편집 모드

열람 모드에서 텍스트를 탭 하고 편집 모드로 진입한 화면입니다. 여기서 다시 텍스트를 길게 탭 하면 더 다양한 2차 메뉴를 제공합니다.

2차 메뉴 가이드라인과 아이폰 메모

01 2차 메뉴에는 대체 기능이나 빠른 실행 기능을 제공하라. → 키패드 상단에 텍스트 편집 기능을 제공하고 있지만, 2차 메뉴로 한번 더 같은 기능을 제공하고 있습니다.

02 브라우저(시스템)에서 2차 메뉴를 제공하는 전형적인 방법과 구별할 수 있게 만들어라. → 열람 모드에서 제공되는 시스템 2차 메뉴와 편집 모드에서 제공하는 2차 메뉴가 다릅니다.

03 전형적인 웹 페이지의 형태를 띠고 있지 않은 곳에서는 2차 메뉴의 사용을 피하라. → 2차 메뉴의 발견 가능성 때문에 언급된 가이드라인인데, 모바일 사용자들은 텍스트를 복붙 할 때 길게 눌러 메뉴를 띄우는 제스처에 이미 익숙해져 있기 때문에 발견 가능성이 높을 것으로 판단됩니다.

Coming next.

3원칙. 페이지에 머무르게 하라

4원칙. 유인 요소를 제공하라

5원칙. 전환 효과를 사용하라

6원칙. 즉각적으로 반응하라