내 화면이 벽에 붙는 자리
크리틱, 목요일, 30분
디자이너 첫 장에 목표 적어 왔습니다. 설정에 들어가지 않고 저장해 둔 필터까지 가게 하는 것. 안이 둘입니다.
다른 디자이너 그 전에요. 왼쪽 안은 전부 무게가 같아서, 눈이 왼쪽 꼭대기에서 시작했다가 그냥 포기합니다.
디자이너 행이 끝에서 끝까지 눌립니다. 그게 핵심이에요.
다른 디자이너 눌리는 건 맞는데 그렇게 말해 주는 게 하나도 없어요. 화살표를 붙이든 그림자를 깔든요. 지금은 그린 사람만 압니다.
개발자 오른쪽 안은 한 화면에 새 개념이 셋입니다. 처음 들어온 사람한테는 많습니다.
디자이너 그럼 고급은 뒤로 접고 첫 화면엔 두 가지만 둡시다.
UX 라이터 기본 버튼에 '저장하고 계속'이라고 적혀 있는데 화면은 저장만 합니다. 누가 버그로 올릴 거예요.
다른 디자이너 그리고 이건 왜 창이죠. 거르던 목록을 덮어 버리니까, 뭘 거르는지 보려고 닫고, 쓰던 걸 날립니다.
디자이너 그럼 아래에서 올라오게 하죠. 목록은 뒤에 남고요.
개발자 지우기 아이콘 말인데요, 손가락 닿는 데가 24포인트입니다. 그림은 그대로 두고 눌리는 데만 넓히죠.
UX 라이터 그리고 아무것도 없을 때 화면엔 지금 '항목 없음' 한 줄입니다. 새 계정이 제일 먼저 보는 화면인데요.
다른 디자이너 마지막이요. 이름을 붙이겠습니다. 맨 밑에 미리 체크된 상자, 다크 패턴이에요. 풀든지 빼든지 하죠.
디자이너 풉니다. 시트로 바꾸고, 화살표 붙이고, 빈 화면은 두 줄로. 목요일에 다시 가져올게요.
30분, 네 사람, 화면 하나. 방에서 나오는 문장마다 이름이 붙은 무언가를 가리킵니다. 그 이름이 있으면 피드백이 되고, 없으면 취향이 됩니다.
크리틱은 눈이 하는 일에서 사람에게 시키는 일로 갑니다
보는 것으로 시작합니다. 무게와 크기, 그리고 애초에 무엇이 조작할 것으로 보이는지. 그다음은 부담입니다. 한 번에 얼마나 쥐고 있어야 하는지, 무엇을 미뤄도 되는지. 그리고 인터페이스가 어색한 단계를 지나 부당해지는 곳에서 끝납니다.
디자인 크리틱Design critique
개인 취향이 아니라 정해진 목표를 기준으로 디자이너들이 피드백을 주는 자리다.
목요일 크리틱에 가져오시고, 첫 장에 문제 정의를 넣어 주세요.
취향 대결이 아니라 일의 한 종류인 까닭이 여기 붙어 있습니다. 첫 장에 목표가 빠지면 그 자리를 취향이 채웁니다.
시각적 위계Visual hierarchy
크기, 굵기, 여백을 배치해 무엇부터 읽을지 눈에 알려 주는 것이다.
시각적 위계가 평평해서 전부 같은 목소리로 외치고 있다.
누구나 가장 먼저 반응하지만 이름은 잘 부르지 않습니다. '복잡하다', '정신없다'는 대개 이 말 대신 나온 말입니다.
어포던스Affordance
어떤 행동을 가능하게 만드는 대상의 성질로, 인터페이스에서는 그 요소로 무엇을 할 수 있는지를 말한다.
탭 어포던스는 끝의 화살표가 아니라 행 전체에 있다.
그 물건이 실제로 무엇을 하게 해 주느냐 — 알아보든 못 알아보든. 방에서 벌어지는 다툼의 절반은 이걸 그 단서와 섞어서 생깁니다.
시그니파이어Signifier
그림자, 화살표, 라벨처럼 어디서 어떻게 행동할 수 있는지 알려 주는 눈에 보이는 단서다.
여기엔 시그니파이어가 필요해요. 화살표든 그림자든, 움직인다는 신호요.
그 다툼의 나머지 절반이고, 디자이너가 그리기를 잊는 쪽입니다. 완벽하게 눌리면서 완벽하게 눈에 띄지 않는 컨트롤이 그래서 나옵니다.
인지 부하Cognitive load
한 번에 생각해야 하는 양으로, 인터페이스는 이것을 늘리거나 대신 떠안는다.
한 화면에 새 용어가 셋이면 인지 부하가 너무 크다.
기술적으로 다 끝난 화면이 되돌아오는 까닭입니다. 방에서 아무도 재지 않고, 다들 느낍니다.
점진적 공개Progressive disclosure
지금 필요한 것만 보여 주고, 고급 옵션은 사용자가 찾을 때 꺼내 주는 방식이다.
고급 설정은 긴 폼 하나 대신 점진적 공개로 숨깁시다.
화면은 맞는데 한꺼번에 너무 많을 때 나오는 대답입니다. 감추기와 헷갈리는데, 하나는 물어보기를 기다리고 하나는 못 찾기를 바랍니다.
모달Modal
처리하기 전까지 나머지 인터페이스를 막아 두는 창이다.
첫 실행에 모달이 셋 연달아 뜬다. 사람들이 나가는 게 당연하다.
변호받는 횟수보다 골라지는 횟수가 훨씬 많습니다. 사람이 들고 온 맥락을 빼앗기 때문에, 자꾸 다른 것으로 갈립니다.
바텀 시트Bottom sheet
모바일 화면 아래에서 올라와, 콘텐츠를 대체하지 않고 그 위에 얹히는 패널이다.
필터는 바텀 시트에 넣어서 목록이 계속 보이게 합시다.
휴대폰에서 그 다른 것이 바로 이쪽이고, 그래서 결정이라기보다 습관에 가깝습니다.
엠티 스테이트Empty state
아직 데이터가 없을 때 화면이 보여 주는 것으로, 사용자에게는 첫인상이 되는 경우가 많다.
엠티 스테이트에 「항목 없음」만 있으니 첫 화면을 그냥 버린 셈이다.
사람들이 가장 먼저 만나고 팀이 가장 늦게 쓰는 화면입니다. 새 계정과 나누는 대화 한 편인데, 보통 한 마디로 끝납니다.
마이크로카피Microcopy
버튼 라벨, 힌트, 오류 메시지처럼 행동을 이끄는 인터페이스의 짧은 문구들이다.
그 버튼의 마이크로카피는 화면이 하지 않는 걸 약속하고 있다.
제품에서 가장 작은 글자이면서 가장 크게 약속하는 글자입니다. 말과 화면이 어긋나면 팀보다 고객센터가 먼저 압니다.
터치 영역Touch target
컨트롤에서 손가락이 닿는 범위로, 확실히 누를 수 있을 만큼 넓어야 한다.
터치 영역이 24포인트다. 아이콘은 그대로 두고 누르는 범위만 키우자.
디자인 말싸움이 치수로 바뀌는 지점입니다. 그림에 손대지 않고도 끝납니다.
다크 패턴Dark pattern
숨긴 비용이나 깊이 묻어 둔 취소처럼, 원하지 않은 선택으로 사람을 몰아가는 인터페이스다.
구독 해지를 회색으로 작게 두는 건 다크 패턴이고, 법무도 같은 말을 할 것이다.
방이 조용해질 때 다들 찾고 있던 선입니다. 작정하고 그리는 일은 드물고, 대개 지표 하나를 너무 세게 요구한 결과입니다.
다음 목요일에 같은 화면이 돌아옵니다
화살표가 붙고, 창 대신 시트가 되고, 한 줄이던 자리가 두 줄이 됩니다. 말은 그대로일 겁니다. 들고 서는 사람은 이번엔 나입니다.
자주 묻는 질문
프로덕트 쪽 나머지 말은요?
주제 페이지에 150개 모두 있습니다. 여기 열두 개는 크리틱 한 번에 나온 것들입니다.
왜 영어가 옆에 있나요?
인터페이스를 부르는 말은 영어로 들어와서 한국어로 다퉈집니다. 그러다 엉뚱한 데로 가지 않도록 두 형태가 나란히 있습니다.
설명은 어디서 가져왔나요?
'프로덕트와 UX' 주제에서. 앱에 있는 것과 같은 카드입니다.
다음 크리틱에는 다른 열두 개가 나옵니다.
'프로덕트와 UX' 주제에 150개가 있습니다. 앱에서는 하루에 몇 장씩 나옵니다.
