brunch

매거진 UX 디자인의 모든 것

라이킷 21 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX 컨설턴트 전민수 Jul 29. 2022

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

UX 디자인 가이드 원칙

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

모바일은 브라우저 화면이 작아 PC 버전처럼 글쓰기 기능을 다 나열할 수 없습니다. 사용자가 키보드로 입력하거나 선택하는데 불편함이 없어야 하기에, 모바일에서 키패드는 모바일 입력 상황에 맞게 친화적 옵션의 키패드가 제공되는 것이 중요합니다.

WHY?

사용자가 모바일 키보드 키패드에서 손을 떼지 않고도 매끄럽게 다음 행위나 필드로 넘어갈 수 있도록 만들어 줘야, 사용자가 입력하거나 선택하는 행위가 더 편안해집니다.

미디엄에서 글 작성하면서 거기에 대한 예를 하나씩 들어 보겠습니다.

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

WHY?

Step 1. 제가 키패드에서 '안녕하세요' 입력해 보겠습니다.

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

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

그만큼, 미디엄에서 글자 입력하는 과정이 편해 보입니다.

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

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

Step 2. 'A'를 선택해보니, 키패드에 '제목 1, 제목 2, 제목 3, 본문' 옵션이 한 번에 펼쳐져 글자 입력 및 선택하는 과정이 편합니다.

위의 예를 들어 설명했지만, 미디엄과 카카오 브런치의 공통점은 글자를 입력할 때마다 키패드의 화면이 바뀌지 않는다는 것입니다.

글자 입력할 때마다 한 화면의 키패드에서 다 입력할 수 있습니다.

이처럼 직관적인 키패드로 인해 사용자는 글자를 입력할 때마다, 키패드에서 어떤 옵션을 선택할 것인지 고민할 필요가 없습니다.

이처럼, 프로덕트 디자이너는 사용자가 모바일에서 어떤 행위를 하고자 할 때 고민하지 않도록, 직관적 UI 제공해야 합니다.

그런데 네이버 블로그는.......

지금의 네이버 블로그는 그렇지 않지만, 개편 전 네이버 블로그는 일부 기능에 대해서 유저 친화적이지 않았습니다.

개편 전 네이버 블로그의 경우, 글 작성할 때 미디엄과 카카오 브런치보다 네이버 블로그 키패드에서 글자 선택하고 입력하는 과정이 너무 불편했기 때문입니다.

(개편 전 네이버 블로그에서) 단어를 입력할 때마다 키패드 화면이 자주 바뀌고, 일부 옵션은 숨겨져 있고, 글자 변경을 위해 옵션을 또 찾아야 합니다. 그래서 여기저기 다 눌러봐야 하고... 처음 글을 작성하는 사람 처지에서 보면 매우 혼란스럽습니다.

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

Step 1. (개편 전) 네이버 블로그에서 글쓰기 버튼 선택 시, 카카오 브런치처럼 키패드가 아래에서 위로 올려옵니다.

'안녕하세요'라고 타이핑을 해 보겠습니다.

Step2. 이제 '안녕하세요' 글자를 '제목' 타입으로 변경하고자 합니다.

펼쳐진 키패드에 있는 'T'를 선택해 보겠습니다.

'T'를 선택하니 키패드 상단에 '나눔고딕, 본문, 정렬, 볼드 등' 옵션이 나타납니다.

방금 전 입력했던 '안녕하세요'를 제목으로 변경하고 싶었으나, 어디를 눌러야 제목으로 변경할 수 있는지 시각적 단서가 없어 당황스럽습니다.

그래서 현재 보여주는 옵션에서 제목 변경과 가장 연관성이 있는 것은 '본문'이므로, '본문'을 선택해 보겠습니다.

Step 3. '본문' 옵션을 선택했더니 '<, 제목 1, 제목 2, 본문' 옵션이 펼쳐집니다.

여기서 '제목 1'을 선택해 보겠습니다.

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

Step5. '제목 1'을 '제목 2'로 변경하기 위해 'T' 선택하였으나, 보이는 옵션은 (아까 선택했던) '제목 1'만 보입니다. (저의 기대는 '제목 2' 옵션도 나타나기를 기대했었습니다.)

Step6. 어쩔 수 없이 '제목 1'을 선택하고 나서야 '제목 1, 제목 2, 본문' 옵션이 보여 '제목 2'를 선택하였습니다.

여러분 어떠세요?

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

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

왜? 그런지 하나씩 살펴보겠습니다.

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

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

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