*사경기: 사용자 경험 기록.
공부를 위해 프로덕트를 사용하면서 느꼈던 점들을 개인적으로 기록하는데, 그중 8월에 작성했던 글들을 모아서 정리했다.
목차
🖼 iOS 사진, 행동, 8월 4일
📸 iOS 사진, 편집, 8월 4일
💸 토스, 계좌이체, 8월 16일
🎫 카카오페이지, 소장권 한 번에 충전하기, 8월 22일
🎁 카카오톡, 이모티콘 선물하기, 8월 27일
🖼 iOS 사진, 상황에 맞는 메뉴, 8월 4일
레이블은 언제 달아야 할까? 글을 쓸 때 아이콘과 레이블을 함께 사용하는 사례를 여러가지 찾아봤다. 그때 본 것 중 기억에 남은 사례였는데, 레이블이 왼쪽에 아이콘이 오른쪽에 있다. 같은 iOS에서 사용하는 다른 프로덕트들은 아이콘이 먼저 있는 경우가 대부분인데, (아랍권은 반대 방향) 위의 사례는 반대였다.
이 컴포넌트는 Context menus(상황에 맞는 메뉴)다. 이 때 사용되는 아이콘들은 크기가 작고 복잡한 행동들을 기호화했기 때문에 기하학적 아이콘으로 표현하기 힘들다. 그래서 레이블이 먼저 와서, 의미의 혼동을 줄 수 있는 '이름 변경'이나 '마크업'같은 아이콘 대신 레이블이 먼저 온 게 아닌가 싶다.
📸 iOS 사진, 편집, 8월 4일
위와 마찬가지로 아이콘 아티클 작성할 때 눈여겨본 사례다.
1. 아이콘과 레이블이 차지하는 영역이 작다.
사진 어플은 카테고리 특성상 사진이 "어떻게 보여질지"가 가장 중요하기 때문이다.
2. 스와이프로 버튼을 이동할 때마다 레이블이 잠시 나타났다가 사라진다.
어떤 행동을 할지 선택할 때만 구별이 가능하면 되기 때문인듯하다.
보정 액션에서 사용해야 하는 아이콘은 아이콘만 단독으로 사용하면 뭐가 색조인지 명도인지 구분하기 힘들다. 하지만 레이블을 보면서 버튼의 역할을 구분한 뒤 선택하고 나면 이 버튼이 색조인지 이미 알고 있으니까 더 이상 표시할 필요가 없다.
💸 토스, 계좌이체, 8월 16일
계좌이체 시 계좌번호를 입력하면 어떤 은행인지 버튼으로 선택지를 제시해준다.
처음 입력하는 계좌에 계좌이체를 할 때는 은행의 선택지가 너무 많아서 은행을 찾기가 가끔 힘들다. 그런데 토스에서는 계좌번호를 입력하면 바로 그 번호를 이용해 선택지를 줄여준다. 어떻게 보면 사소할 수 있는 영역의 사용자의 수고까지도 고려하는 모습이 인상 깊었다.
🎫 카카오페이지, 소장권 한 번에 충전하기, 8월 22일
카카오페이지에서 소장권 여러 개를 한 번에 충전하려고 하면 볼 수 있는 화면이다.
20개/50개/100개 단위의 구분을 쉽게 조절할 수 있도록 '+1', '+10', '+100' 버튼이 있다.
하지만 키보드와 합쳐져 있어서 버튼인지 인지하기 쉽지 않다.
또 20/50/100개의 구분은 프로덕트 중심적이다. 사용자 입장에서는 (특히나 이렇게 여러 편을 구매할 때는) '몇 개 단위'로 충전을 하는지는 의미가 없다. 중요한 것은 보너스 이용권과 최종 금액이다. 이 점을 알고 있는지, 최근의 업데이트에서는 이 UI가 개선되었다.
🎁 카카오톡, 이모티콘 선물하기, 8월 27일
예전에는 개별 카카오톡 이모티콘 채널의 메시지로 이동해야 했던 것으로 기억한다. A에게 선물을 받으면 [A와의 대화 메시지에서 확인] → [카카오톡 이모티콘 채널 대화로 이동] → [다운로드] → (기존 대화로 돌아가서)[사용] 해야 했다. 이제 A와의 대화에서 '선물하기'버튼을 누르면 바로 하단에 뜨고, 바로 다운로드할 수 있다. 이동경로가 눈에 띄게 줄었다. 선물 받는 경험이 덜 번거롭고 쉬워져서 사용자의 피로도를 낮추었을 것 같다. A에게 이모티콘 선물을 받으면, 바로 받아서 A한테 보여주게 된다. 당연히 고마우니까! 그 점도 고려한 게 아닌가 싶다.
사실 오늘은 최근 읽은 책을 바탕으로 글을 쓰려고 했다. 근데 생각보다 너무 내용이 방대하고 내가 모르는 내용들도 많아서, 가볍게 다루면 안 되는 주제를 뭣도 모르는 상태로 써버릴까 봐 가볍게 다룰 수 있는 사경기로 주제를 전환했다. 어쩌다 보니 사경기를 월간 연재 느낌으로 쓰고 있는데 평소에.. 좀 더 꼼꼼하게 기록을 해둬야겠다 😅
