brunch

매거진 UX 디자인의 모든 것

라이킷 39 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX 컨설턴트 전민수 Apr 13. 2019

모바일에 최적화된 키패드 제공 UX 디자인 가이드 원칙

UX 디자인 가이드 원칙 배우기

UX 컨설턴트 전민수입니다.

지난 5년간 브런치에서 아티클 작성한 것을 토대로, 여러분께 UX 아티클의 내용을 더 쉽게 전달 시키는 목적으로 별도 강의 촬영하게 되었습니다. 그간 UX 강의 촬영했던 영상을 편집해서 UX 라이브클래스 패키지 사이트에 오픈하게 되었습니다.

UX 라이브클래스 패키지를 통해 전체 178여개 UX 강좌를 하나의 패키지 형태(총 121시간 이상) 대 공개합니다. 특히, 브런치 구독자에 한해 2023년 3월 한정 이벤트 판매로 할인율 98%(정가 5,340,000원 > 할인가 99,000원, 평생 소장) 제공하고 있으니 여러분의 많은 관심 부탁드립니다.

https://ebprux.liveklass.com/packages/137053

(3월 한정 이벤트) UX 라이브클래스 패키지(총 121시간): 178개 UX 강의묶음, 할인율 98%, 할인가 99,000

매일 !!!! UX 방법론 A-Z, UX 리서치 A-Z 등 강의 진행합니다.

ebprux.liveklass.com

앞으로도 국내 환경에 맞는 UX 방법론을 더 연구하고, 브런치에 최대한 많이 공유하겠습니다.

감사합니다.

모바일에 최적화된 친화적 키패드 제공

모바일은 브라우저 화면이 작아 PC 버전처럼 글쓰기 기능을 다 나열할 수 없습니다. 사용자가 키보드로 입력하거나 선택하는데 불편함이 없어야 하기에, 모바일 앱을 위한 키보드는 모바일 입력 상황에 맞게 친화적 옵션의 키패드가 제공되어야 합니다. 사용자가 모바일 키보드 키패드에서 손을 떼지 않고도 매끄럽게 다음 행위나 필드로 넘어갈 수 있도록 만들어 줘야 입력하거나 선택하는 행위가 최소화되기 때문입니다.

미디엄에서 글 작성 사례를 살펴보겠습니다.

미디엄은 키패드에서 글자 크기를 한 번에 바꿀 수 있어 글 입력하는 과정이 편리합니다.

Step1. '안녕하세요' 입력하였습니다.

Step2. '안녕하세요' 글자 크기를 키우기 위해 키패드에 왼쪽 상단에 있는 'Tt' 선택하였더니 't' 색상의 변화가 생기면서 이전보다 글자가 조금 커졌습니다.

Step3. '안녕하세요' 글자 크기를 더 키우기 위해 키패드에 왼쪽 상단에 있는 'Tt' 선택하였더니 'T' 색상의 변화가 생기면서 이전보다 글자가 조금 커졌습니다.

다음의 사례는 브런치입니다.

Step 1. 카카오 브런치 앱에서 글쓰기 버튼을 선택하면 아래에서 위로 키패드가 자동으로 열립니다. 키패드에서 '안녕하세요' 이라는 글자를 입력하고 나서, 글자 크기를 바꾸기 위해 키패드에 있는 'A' 선택하였습니다.

Step 2. 키패드에 펼쳐진 옵션 중 '제목 1, 제목2, 제목3, 본문'을 한 번에 선택할 수 있어 글자 입력하는 과정이 편합니다.

위의 예를 들어 설명했지만, 미디움과 카카오 브런치는 글자를 입력할 때마다 키패드의 화면이 바뀌지 않습니다. 즉, 글자 입력은 한 화면의 키패드에서 다 입력할 수 있습니다. 이와 같은 직관적인 키패드 화면의 UI로 구성으로 인해 사용자는 글자를 입력할 때마다, 키패드의 어떤 옵션을 선택할 것인지 고민할 필요가 없습니다.

반면, 개편전 네이버 블로그에서 글 작성 시 미디움과 카카오 브런치보다 키패드에서 글자 선택하는 과정이 불편합니다. 단어를 입력할 때 마다 키패드 화면이 자주 바뀌고, 일부 옵션은 숨겨져 있고, 글자 변경을 위해 옵션을 찾아야 합니다. 그래서 여기저기 다 눌러봐야 해서 처음 글을 작성하는 사람 처지에서 보면 조금 혼란스럽습니다.

왜 그런지 하나하나 살펴보도록 하겠습니다.

Step 1. 네이버 블로그에서 글쓰기 버튼 선택 시 카카오 브런치처럼 키패드가 아래에서 위로 올려옵니다. '안녕하세요'라고 타이핑하겠습니다.

Step2. '안녕하세요' 글자를 '제목' 타입으로 변경하기 위해 키패드에 있는 'T'를 선택하였습니다. 'T'를 선택하니 키패드 상단에 '나눔고딕, 본문, 정렬, 볼드 등' 옵션이 보여집니다. '안녕하세요'를 제목으로 변경하고 싶었으나, 어디를 눌러야 제목으로 변경할 수 있는지 시각적 단서가 없어 당황스럽습니다. 현재 보여주는 옵션에서 제목 변경과 가장 연관성이 있는 것은 '본문'이어서 '본문'을 선택했습니다.

Step 3. '본문' 옵션을 선택했더니 '<, 제목 1, 제목 2, 본문' 옵션이 나와 '제목'을 선택하였습니다.

Step4. '제목1'을 선택하였더니 방금 전 키패드에 있었던 '<, 제목 1, 제목 2, 본문' 사라지고 'T' 만 보여집니다. '제목1'이 아닌 '제목2'로 변경하고자 하는 경우 다시 'T' 선택해야 하는 번거로움이 발생합니다.

Step5. '제목1'을 '제목2'로 변경하기 위해 'T' 선택하였으나, 보여지는 옵션은 '제목1'만 보여집니다.

Step6.'제목1'을 선택하고 나서야 '제목1, 제목2, 본문' 옵션이 보여져 '제목2'를 선택하고자 합니다.

이처럼 네이버 블로그는 '본문' > '제목1' > '제목2' 등 글자 크기를 변경하기 위해서 키패드에 있는 버튼을 여기 저기 눌러야 해서 번거로움이 있습니다. 물론, 입력하다 보면 익숙해져 불편함이 작어지겠지만, 처음 하는 사용자 입장에서 보면 키패드 화면이 자꾸 바뀌게 되면 어렵다고 느끼게 될 것 입니다.

반면, 개편된 네이버 블로그는 글자 입력하는 과정이 개편전보다 더 편해졌습니다.

Step1. '안녕하세요' 입력 후 글자를 '소제목'으로 변경하고자 하여 키패드에 있는 '본문' 셀레트 메뉴를 선택했습니다.

Step2. 옵션 창에서 '본문'을 '소제목'으로 변경했습니다.

Step3. '안녕하세요' 글자는 '본문'타입에서 '소제목' 타입으로 변경되었습니다. 동일한 작업을 수행했음에도 불구하고, 개편전은 6단계를 거쳤지만, 개편 후에는 3단계만 거쳐도 됩니다. 훨씬 더 입력 절차가 개편전보다 간단해지고 편의성이 높아졌다는 것을 알 수 있습니다.