brunch

매거진 UX 이야기

라이킷 27 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 피그마스터 Jul 23. 2023

UX 디자이너 필독서-사용자를 생각하게 하지마!(1)

디자인 책 리뷰

UX 디자이너들의 필독서인 스티브 크룩의 "(사용자를) 생각하게 하지마!" 를 읽고, 개인적으로 정리한 내용을 담았습니다. 개인적인 생각과 해석이 덧붙여져 있으니, 정확한 내용은 책에서 확인하세요 :) 원서 제목은 Don't make me think 일 정도로 사용자를 고민하게 하지 말아야 하는 것을 강조하고 있습니다.

사용성 원칙 (1)

사용자를 고민에 빠트리지 마라

사용자들이 새로운 서비스를 처음 접하게 되면

이게 무슨 서비스지?

여기에는 무슨 내용이 담겨 있는 거지?

여기서 무엇을 할 수 있지?

비슷한 다른 서비스가 있음에도 내가 이 사이트를 이용 해야 할 이유가 뭐지?

에 대한 답을 할 수 있어야 한다.

> 사용자가 명확하게 어떤 서비스이고, 어떻게 사용하는지 알아야 합니다. 사이트의 핵심가치를 전달하는 것도 중요!

예시

2가지 앱의 예시를 가져왔습니다. 앞의 보라색 앱을 한눈에 영양제 관련 앱을 알 수 있지만, 뒤의 앱은 어떤 것이 담겨 있는지 예측을 하기 어려웠습니다.

우리 실제 서비스를 사용할 때,

읽지 않고 훑어 본다

최소 조건만 충족되면 만족한다 : 최선의 안을 고르는 사용자는 거의 없고, 합리적이라고 생각되는 첫 번째 안을 선택하는 사용자가 대부분이다.

작동 방식까지 이해하려 하지 않고 적당히 임기응변 한다

> 사용자가 쉽게 알수 있어야 한다는 내용입니다. 우리만의 작동방식을 생각해서 너무 많은 설명을 넣는 거보다 직관적으로 보여주는 것이 필요합니다.

훑어보기 좋은 디자인이란?

관례를 이용 (누구나 아는 에러 표시, 검색 아이콘 등. 명료성이 일관성보다 중요)

시각적 계층구조를 효과적으로 구성 (상하위 구분 / 중요한 부분 눈에 띄게 / 연관요소 묶기)

페이지에 구역을 뚜렷하게 구분

클릭 할 수 있는 요소를 명확히 표시

주위를 흩뜨릴 만한 요소를 없애기 (시각적 잡음 : 시끄러움 무질서 어수선함)

내용을 훑어 보기 좋은 방식으로 구성 (제목 / 단락의 길이 짧게 유지 / 불릿 사용 / 주요 용어 강조)

> 여기는 서비스에 대한 것이지만, 포트폴리오 만들때도 동일해서 엄청 공감이 되네요. 수강생 분들중에 내용을 꽉꽉 넣어서 어디를 봐야할 지 모르는 포폴도 있습니다. UX 디자이너의 포트폴리오라면, 포폴에도 정리가 되어있어야겠지요!

시각적 계층구조의 예시

첫번쨰 앱의 랭킹 부분을 보면 강약 구분이 되어있고, 앞뒤로 충분한 여백이 있어서 훑어보기 쉬웠습니다. 하지만 두번째 월렛앱의 경우는 같은 크기의 요소가 많고 기능이 많이 불분명한 느낌이 들었습니다. 세번째 스타벅스 앱도 배너 부분의 텍스트에 강약이 있으면 더 좋을 것 같다는 생각이 드네요

클릭할 수 있는 부분을 명확히 표시한 예시

첫번째 앱은 sero와 self를 선택하는 화면입니다. 일반적인 선택리스트와는 다른데요, 체크박스를 넣어서 누를 수 있는 것임을 명확히 표시해 주었고, 버튼해도 꺽쇠">"를 넣어서 알려주고 있습니다. 텍스트만으로 이루어진 버튼은 사용자가 잘 모를 수 있습니다. 두번째 화면의 체크표시 라던가, 세번째 화면의 내역, 충전 버튼처럼 라인을 넣어줘서 버튼처럼 보이는 것이 필요합니다.