🚩 오늘 달성한 목표
- 디자인 카타
- 피그마 강의 수강 (5-6 ~ 5-10)
- 5주차 숙제 제출
- 컴포넌트 추가 실습 (진행중)
- 피그마 강의 챕터 3, 4 복습
- UI/UX 관련 아티클 읽기
🚩 나만의 언어로 정리하기
✨ 디자인 카타
-
✍🏻 작성자: 이유지
-
✅선택: A (CTA 버튼)
-
💬 A에 대한 생각:
주민등록번호와 같은 정보는 정확히 작성해야하기 때문에 제출 전 한 번 더 확인해볼 수 있어야 함.
B 보다 직관적으로 다음 액션을 예상 가능.
다음 내용이 있을 경우 B보다 더 많은 동작이 요구됨.
여러 내용를 한 번에 작성하고 제출하는 방식으로 이용해야 함. -
💬 B에 대한 생각:
정보를 제출함에 있어 사용자의 동작을 덜 수 있고 신속하게 사용 가능.
내용을 잘못 적었거나 확인이 필요한 경우, 뒤로가기를 눌러 다시 확인해야 함.
→ 사용자에게 불필요한 경험이 될 수 있음.
다음으로 작성해야하는 내용이 있다면 아예 다음 섹션으로 이동하기 보다 입력란이 채워진 후, 바로 밑에 새로운 입력란이 생기는 형식이 좋다고 생각함.
✨ 아티클 1 (게임 속 팝업 버튼)
- 고정관념에 사로잡히지 않기.
예) '예' 버튼이 있다면 '아니오' 버튼도 존재 X
- 서비스 제공자 입장에서 사용자가 취하길 원하는 선택지를 강조하기
예) '취소', 'X'와 같은 이탈 버튼을 아예 없애기
- 사용자가 주의깊게 봐야 하는 내용임을 표현하기
예) '!' 아이콘을 사용
(판타지 배경 게임이어서 새로운 퀘스트 표시인 '!'를 사용한 것이라는 생각도 듦)
- 애매모호한 표현 사용하지 않기
예) '확인' 버튼 (X): 해당 버튼이 어떤 액션을 취하는지 사용자가 예상할 수 없음.
대안) '이동' 버튼 (O): 사용자가 다음 액션을 직관적으로 예상할 수 있음.
✨ 아티클 2 (UX UI 레벨테스트 정리)
https://velog.io/@wns450/UX-UI-%EB%A0%88%EB%B2%A8%ED%85%8C%EC%8A%A4%ED%8A%B8-%EC%A0%95%EB%A6%AC
🧩 UI를 만들기 전, UX를 고려해볼 요소
-
더 오래 읽기 위한 글: 왼쪽 정렬
-
더 읽기 쉬운 행간
개인 생각)
A는 행간이 너무 가까워 눈에 안들어옴,
B는 행간이 너무 넓어 띄엄띄엄 읽게 되는 느낌.
적당한 행간을 찾는 법을 연습해야 할 듯.
-
상호작용이 가능한 부분에 대비감
: 메인과 다른 색상 부여 -
선택지가 적을 때(or 공간이 작을 때): 라디오 버튼
선택지가 많을 때(3개 이상?): 드롭다운 -
입력 필드에 있는 플레이스 홀더를 레이블로 사용 X
-
선택지(라디오버튼) 화면에서 기본적으로 첫번째 선택지를 체크
단, 사용자가 가장 많이 이용하는 항목이 체크되어 있어야 하고, 선택지 중 가장 위에 있어야 함. -
선택지 내용은 자극적인 것 < 부담없는 것
: 서비스 제공자가 어떤 결과를 원하는가?
: 예전에 봤던 버튼이 떠올랐다.
( 좀 더 생각해볼게요 / 회원가입 )
-
꼭 알아야 하는 정보를 툴팁에 감추지 않기
: 툴팁은 공간이 제한적인 상황에만 쓰는 것을 권장. -
작업 결과, 행동 등에 적용되는 말을 버튼에 적용
