앱 디자인 시, 확인해야 할 실수 10가지

디비디랩 블로그가 티스토리에서 미디엄(Medium)으로 이사했어요!
디비디랩 미디엄에서 더욱 더 다양한 아티클을 확인하세요.
➡️디비디랩 미디엄 바로가기

---

이 글은 Top 10 Application-Design Mistakes를 기반으로 번역, 각색한 글입니다.

안녕하세요, UX 연구소 디비디랩입니다!

앱 디자인할 때 자주 범하는 실수 열 가지와, 그 실수가 사용자에게 미치는 영향에 대해서 살펴보겠습니다.

 

1. 명확하지 않은 피드백

당신은 한 서비스에서 검색을 하니, 흰 화면이 나왔습니다. 결과 값이 없는 걸까요, 아니면 아직도 로딩 중인 걸까요?앱의 사용성을 향상할 수 있는 가장 기본적인 가이드라인 중 하나는 사용자에게 명확한 피드백을 제공하는 것입니다. 사용자에게 다음과 같은 피드백을 제공해주세요.

 

1. 시스템이 현재 무얼 하고 있는지 그 상태에 대해 보여준다.
2. 사용자가 입력한 정보 혹은 사용자 행동의 결과를 표시한다.
3. 지금 시스템에서 무슨 일이 일어나고 있는지 알려준다.

앱에서 사용자에게 피드백을 주지 않으면, 사용자는 추측을 해야 합니다. 그리고 그 추측은 대부분 틀릴 가능성이 높습니다. 버튼을 누르면 버튼이 눌려졌다는 확실한 인터랙션을 통해, 사용자가 버튼을 잘 눌렸다는 사실을 알 수 있게 해주는 것이 좋습니다.

 

지금 시스템이 무엇을 하고 있는지 알려주자!

 

2. 일관성

Differences are difficult.

정도의 차이가 있지만, 사용자는 서비스 사용 과정에서 항상 학습하고 있습니다. 버튼의 용도, 위치, 용어 등 특별히 하나하나 주석을 달지 않아도, 사용자는 그것이 무엇인지 무의식 중에 기억하게 됩니다. 하지만 사용자가 어떠한 행동을 했을 때, 시스템에서 본인의 기대와 다른 무언가가 나타나면 혼란스러울 수밖에 없습니다. 사용자는 언제나 일관적인 것을 원합니다.

 

아래는 일관성을 어긴 예시입니다.

 

1. 동일한 액션이지만 다른 단어 또는 명령으로 되어있다.
2. 같은 기능이 다른 공간에 배치되어있다.
3. 비슷해 보이는 기능들이 다른 공간에 배치되어있다.
4. 비슷한 플로우지만 굉장히 다른 섹션에서 이루어진다.
5. 사용자의 동일한 명령에 다른 결과가 나온다.
6. 기능이 가능하다가 가끔 이유 없이(안내 없이) 안될 때가 있다.
7. 공간적인 일관성: UI 엘레먼트들 위치가 지속적으로 변한다.

카카오톡 채팅 목록의 "읽음/나가기"

카카오톡 친구 목록의 "숨김/차단"

👍사용자의 동일한 액션(스와이프)이 유사한 기능을 할 수 있도록 배치하였다.

 

 

3. 나쁜 에러 메시지

에러 메시지는 사용자에게 무엇이 잘 못 되었는지 알려주는 형태의 피드백입니다. 에러 메시지 가이드라인은 30년째 연구돼 온 가이드라인이 있지만 많은 앱들이 이를 어기고 있습니다.

흔한 실수로는 에러 메시지에서 그냥 "잘못되었다"라고 말해주는 것입니다.(Oops, something went wrong.) 이러한 에러 메시지를 본 사용자들은 무엇을 해야 해결할 수 있을지 알 수 없습니다.

정보성 에러 메시지들은 발생한 문제에 대해 사용자에게 해결할 수 있는 방법을 제시하기도 하며, 기능에 대한 교육으로도 쓰일 수 있습니다. 도움말이나, 튜토리얼을 충분히 읽지 않고 일단 시작하는 사람들에게 에러 메시지는 도움말과 같은 역할을 합니다.(숫자만 입력해주세요, 특수문자는!@#$만 사용 가능합니다.)

사용자가 무엇을 해야 해결할 수 있는지 전혀 알 수 없다.

 

 

4. 기본값의 부재

기본값은 사용자가 무엇을 해야 하는지 자연스럽게 알려줄 수 있는 좋은 방법입니다.

 

1. 사용자가 원하는 값을 빨리 찾을 수 있게 해 준다.
2. 예시를 통해서 어떤 답이 옳은 답인지 미리 보여줄 수 있다.
3. 초보자들에게 기본값을 제공함으로써 기본적인 결과를 보여줄 수 있다.

기본값은 특히 반복되는 행동에 큰 도움을 줍니다. 필드에 들어갈 키들을 자동으로 넣어주는 것은 생산성 향상에 큰 도움이 되죠. 로그 분석 툴을 활용하면, 가장 많이 입력된 값을 파악할 수 있습니다. 기본값으로 설정해 보는 건 어떨까요?

 

생년월일을 입력받는 캘린더의 기본값이 '오늘'로 되어있다(?)

 

5. 라벨링 되지 않은 아이콘

아무런 단어 없이 아이콘 만으로 사용자들이 한 번에 알아볼 수 있는 경우는 상당히 드물고, 일정 기간 교육을 필요로 합니다.(인스타그램은 많은 사용자들이 익숙해진 후 라벨을 없앴습니다.) 햄버거 메뉴처럼 세계적으로 통합적으로 쓰이는 아이콘이더라도 UX 관련 종사자들 만큼 친숙하지는 않습니다. 아이콘들이 특정 앱에서만 쓰일 경우에는 더욱 아이콘 만으로 기능의 예측이 불가능합니다. 제이콥 닐슨의 법칙: "사용자들은 다른 사이트를 더 오래 사용한다."를 잊어선 안됩니다. 대부분의 아이콘들, 심지어 텍스트로 라벨링 되어 있더라도 사용자들이 이해하기 어려워할 수 있습니다.

 

아이콘을 텍스트와 함께 배치하게 되면:

 

1. 대상(Target)의 크기를 늘릴 수 있습니다.(*대상이란 버튼 등 터치 가능한 컴포넌트를 말합니다.) 
2. 사용자가 해당 아이콘이 무엇인지 훨씬 빠르게 인지할 수 있습니다.
3. 사용자가 인터페이스를 더 빠르게 학습할 수 있습니다.
4. 서로 옆에 배치된 명령들을 시각적으로 구분할 수 있습니다.

텍스트 라벨링이 없는 아이콘은 예측이 힘들다.

 

6. 인식하기 어려운 타깃

6-1. 약한 시그니파이어

HCI에서는 클릭이나 터치가 가능한 모든 것들을 대상(Target)이라 부릅니다. 즉 모든 활성 UI 요소들은 대상인 것이죠. 사용자가 그 대상을 알기 위해서는 대상이 정의되어있고, 명확하여야 합니다. 이 부분이 명확하지 않으면 앱 인터페이스에서 문제를 야기하게 됩니다.

 

어포던스(Affordance)는 어떤 물체에 무엇을 할 수 있는가를 말합니다. 예를 들어 체크 박스는 끄고 켜는 것을 할 수 있게 해 주고, 슬라이더는 위로 올라가고 내려갈 수 있게 해 줍니다. 시그니파이어(Signifier)는 실행하기 전 보자마자 무엇을 할 수 있는지 이해하게끔 도와주는 비주얼적 요소들입니다.

위아래로 움직일 수 있는 스크롤(어포던스)과 그 길이(시그니파이어)를 통해 파일 전체의 길이를 예측할 수 있다.

UI 디자인에서는 아무것도 일어나지 않더라도 모든 픽셀이 클릭 가능하기 때문에 시그니파이어가 굉장히 중요합니다. 컴퓨터 스크린에는 굉장히 많은 비주얼적인 요소들이 있고 사용자들은 이것저것 클릭하면서 시간을 낭비하고 싶지 않아 합니다. *예외적으로 어린아이들은 클릭을 통해 이곳저곳 다니는 것을 좋아합니다.

 

시그니파이어가 약할 때 나오는 증상들은 다음과 같습니다.

 

1. 사용자가 "여기서 뭘 해야 하지?"라고 말한다.

2. 사용자가 자신에게 도움될 기능에 접근하지 않는다.

3. 위 두 가지 문제를 해결하기 위해 긴 안내글을 포함한다.

 

6-2. 클릭하기 너무 작은 영역

비슷한 문제로 클릭할 수 있는 타깃이 너무 작아서 사용자가 잘못 클릭하거나 지나쳐버리는 경우가 있습니다. 사용자들이 시그니파이어를 올바르게 인지하더라도, 타겟이 너무 작아서 잘못 클릭한 후 아무런 변화가 없으면 사용자들은 그것이 실행 불가능한 것이라고 믿게 됩니다.

 

7. 모달(Modal)의 남용

많은 애플리케이션에서 모달 창을 통해 데이터와 상호 작용을 시행합니다. 존재하는 아이템을 수정하거나, 새로운 아이템을 추가하거나, 삭제, 혹은 더 알아보기 위해서 모달을 사용합니다. 어둡게 하는 것이 현재에 집중시키고, 집중을 방해하지 않는다는 가설 아래 모달은 현재 페이지 위에 나타나게 되고 백그라운드에 있는 콘텐츠는 보통 어둡게 표현된다. 하지만, 모달은 양식을 작성할 때 참고하고 싶은 정보를 보지 못하게 가려버립니다.

 

모달 팝업은 기존 화면의 정보를 가리게 된다.

 

8. 쓸모없는 정보

데이터베이스에서 자동 부여된 ID 넘버와 같이 긴 문장과 자릿수는 애플리케이션에서 한 아이템을 구별 짓는데 쓰이곤 합니다. 이러한 문자열은 사용자들에게 완전히 쓸모없는 정보이지만, 표에서 첫 번째 열로 두드러지게 보일 때가 있습니다. 백엔드에서 중요한 정보일지라도, 사용자에게 필요 없는 정보라면 과감히 숨겨야 합니다. 특히 정보가 빼곡하게 들어있는 화면이라면, 사람이 읽을 수 있는 정보들을 기준점으로, ID 넘버는 덜 우선시되는 위치에 두는 것이 좋습니다.

 

이런 암호화된 정보는 보통 의료 앱, CRM 시스템, 회계 소프트웨어, 등에서 나타납니다. 이런 앱들에서는 정보를 더 콤팩트 하게 보여주기 위하여 코드를 단축하여 사람에게 의미를 줄 수 있도록 하는 것이 좋습니다. 짧은 코드는 긴 문장에 비해 작은 공간에 걸맞지만 사용자에게 더 큰 인지적 부담(cognitive load)을 줍니다. 아무리 숙련된 전문가라도 모든 코드를 기억하는 것은 힘들 것이며, 다 외우더라도 이를 해석하는데 공을 들이게 됩니다.

 

가장 중요한 첫 열에 가장 쓸모없는 정보가 들어가 있다.

 

9. 잡동사니 수납장

앱에서 수백수천 개의 기능을 제공한다면, 모든 기능들은 어딘가에 배치해야 하며 나아가 우선순위에 맞게 정리하여 사용자들이 쉽게 가장 중요한 것을 찾을 수 있도록 해야 합니다. 이러한 작업의 결과가 오버플로우(예시: … 메뉴 , 더보기) 메뉴입니다. 가장 보편적으로 쓰이는 액션은, 마지막 라벨로 '더 보기', '메뉴'와 같이 표시하는 것입니다. 최악의 디자인은 이에 맞지 않는 기능을 몽땅 넣어두는 것입니다.

 

이런 메뉴 라벨들은 정보 향기(Information Scent)가 낮으며 잡동사니 수납장과 다를 바 없습니다. 버리긴 싫고, 카테고리 할 수 없는 모든 것들을 한 군데 몰아넣어두는 것입니다. 팀에서 여러 가지 기능을 요구하지만 딱히 둘 데는 없거나 오래된 앱들이라면, 오래된 기능들을 삭제 못할 때가 있습니다. 문제는 오버플로우 메뉴가 집에 있는 잡동사니 수납장이랑 똑같다는 것이죠. 아무도 무엇이 있을지 예상할 수 없습니다. 사용자가 이 메뉴에 들어갈 이유가 없기 때문에 발견 가능성과 Findability(검색 가능성)을 상당히 제한하게 됩니다.

 

네이버에서 더보기 메뉴 클릭시 나오는 많고 많은 생소한 기능들(심지어 사전에는 더보기가 또 있다.)

 

10. 서로 근접한 확인과 취소 버튼

저장(Save)과 삭제(Discard) 버튼을 근처에 같이 두는 것은 흔한 디자인이며, 사용자들에게 큰 실수를 하게 만들 수도 있습니다. 저장과 삭제가 해당 파일의 운명을 결정짓는 것과 같이 어떻게 보면 논리적으로 그 둘이 일맥상통한다고 볼 수 있지만 다른 버튼이나 아이콘을 클릭하기 쉽습니다. 특히 사용자가 바쁘거나, 같은 동작을 반복하거나, 운동기능에 장애가 있을 경우 더욱 빈번하게 일어납니다. 이렇게 의도치 않게 다른 버튼을 클릭하는 것을 슬립(slip)이라고 부릅니다.

 

파일의 운명을 결정짓는 버튼의 단축키(S, D) 조차 키보드에서 서로 가까이 위치한다.

 

앱은 그 카테고리에 따라 매우 다르게 바뀌어야 합니다. 어떤 분야에서 쓰기 좋고, 효율적이며, 최적의 앱 디자인이 다른 분야에서는 완전히 잘못된 디자인이 될 수 있습니다. 사용자가 쓰기 좋은 앱을 만들기 위해서는 사용자들의 워크플로우, 그들이 원하는 기능, 심성 모형과 요구 사항에 대한 연구가 선행되어야 합니다.

 

앞서 언급한 10가지 앱 디자인 요소는 흔하게 사용되기에 디자이너 눈에는 이미 익숙하지만 인지하지 못하면 놓치기 쉬운 요소이기도합니다. 이 중에서는 다소 사소해 보이는 요소도 있지만 그 차이가 사용자에게 미치는 영향은 절대 사소하지 않을 것입니다.

 

 

 

---

Diby는 사용자 피드백이 필요한 기획자, 디자이너, 마케터, 리서처를 위한 유저리서치 솔루션입니다.
diby@dbdlab.io