출처
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
UX UI 레벨테스트 정리
유저 경험을 고려한 UI/UX 기준점들을 정리해보자
velog.io
요약
UX/UI 레벨테스트에 직접 참여한 내용을 바탕으로 정리한 아티클이다.
서두 부분에 긴글은 왼쪽 정렬 하는 것이 읽는 사람으로 하여금 편안하게 읽을 수 있도록 한다는 사실을 설명한다. 그 이유는, 우리는 글을 읽을 때 한 글줄을 읽고 자연스럽게 다음 글줄의 시작점을 찾는데, 가운데로 정렬된 글은 글줄의 시작점이 매번 달라져서 피로를 느끼게 한다는 것이다. 그래서 앞으로 블로그는 왼쪽 정렬하여 작성하려 한다.
본 아티클은 유저경험을 어떻게 개선하는 것이 좋은가에 대한 더 좋은 방향을 쉽게 설명해 놓은 글이다. 어느 쪽이 더 읽기 쉬운지, 적절한지를 두가지 선택지를 통해 직관적으로 보여주며, 더 좋은 방향을 근거를 들어 요약, 정리하였다.
그 내용은 아래와 같다.
- 줄간격은 글지크기의 1.5배 이상으로 지정하기 (자간 x 1.5 < 행간)
- 상호작용을 나타내는 색상은 버튼과 링크에만 쓰기
- 옵션이 적으면 라디오 버튼을 사용하기 (드롭다운 메뉴와 라디오버튼을 고려하는 척도는 경우의 수의 개수)
- 레이블은 항상 사용자의 눈에 보이게 만들기 (플레이스 홀더를 레이블 대신 쓰면, 사용자가 내용을 입력할 때 자신이 무엇을 입력하는지 알 수 없고 기억에 의존하게 된다.)
- 가장 자주 선택되는 항목, 사용자에게 가장 도움되는 항목을 기본 옵션으로 지정하기. (예: 결제수단을 선택하는 라디오버튼) : 사용자가 두번 할 일을 한번에 할 수 있게 도와주는 것이 핵심이다.
- '불편하지만 웹으로 보기' 등 사용자에게 불편감을 주는 말은 쓰지 않기. 부담없이 편안한 사이트가 되자. (버튼의 예: A) 닫기 or 회원가입 / B) 혜택 포기하기 or 할인받기)
- 꼭 알아야 하는 정보는 툴팁에 감추지 말기 (예: 비밀번호 설정 시 필수 조건)
- 레이블 텍스트를 작성할 때, 작업 결과 및 행동 등 실제 내용을 나타내는 말을 버튼에 적용하기 (예: '변경사항을 삭제하시겠습니까?' (버튼:) '삭제' '취소')
인사이트
필자는 상호작용을 나타내는 색상은 버튼과 링크에만 써야 한다는 내용이 인상 깊었다. 상호작용이 가능한 요소와 아닌 요소에 색을 구분없이 지정하면 사용자에게 혼란을 준다는 것이 근거이다.
어제 구글블로그를 개설하고 테마 맞춤설정(디자인)을 하였는데 구글블로그는 페이지 텍스트부터 배경,제목,사이드 바 등등 맞춤 설정이 가능해서 아래와 같이 변경했다.
위 내용에 근거하면 상호작용이 가능한, '댓글 쓰기'와 '자세한 내용 보기' 버튼에만 색상을 주어야 한다.
블로그의 날짜는 글을 작성할 때 자동으로 표시되는 기능인데, 이 내용은 읽는 사람에게 상호작용을 주지도, 썩 중요하지도 않은 내용이기 때문에 포인트 색을 빼는 것이 좋겠다는 생각이 들었다.
더 알아가 보고 싶은 점
모바일과 pc화면은 화면의 크기가 달라지기 때문에 반응형 UI를 잘 만드는 것이 중요할 것인데, 반응형 디자인을 위한 가이드가 있을까? 궁금하였다.
모바일 반응형을 잘 디자인 하는 것과 동시에, 읽는 사람이 pc화면에서 모바일로 벗어날 때 해당 플랫폼의 특징과 느낌이 통일되게 전달되어야 하지 않을까?