brunch

매거진 UX디자인가이드라인

라이킷 13 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX 컨설턴트 전민수 Jun 12. 2024

화면 공간을 최대한 절약합니다

UX 디자인 가이드라인 배우기 #3

화면 공간을 최대한 절약합니다

모바일 환경에서는 화면이 작아 PC 버전처럼 많은 기능을 한눈에 나열하기 어렵습니다. 따라서 사용자가 입력하거나 선택하는 과정에서 불편함을 최소화하기 위해 모바일 키보드는 모바일 입력 상황에 맞춘 친화적인 옵션을 제공해야 합니다. 이렇게 하면 사용자가 키패드에서 손을 떼지 않고도 매끄럽게 다음 행위나 필드로 넘어갈 수 있어, 입력하거나 선택하는 행위가 최소화됩니다. 이는 사용자 경험을 향상시키고, 입력 과정의 효율성을 높여 사용자의 불편을 줄이는 데 중요한 역할을 합니다..

사진: Unsplash의Noorulabdeen Ahmad

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

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

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단계만 거쳐도 됩니다. 훨씬 더 입력 절차가 개편전보다 간단해지고 편의성이 높아졌다는 것을 알 수 있습니다.