UXmovement.com 라는 사이트에서 2011년 한 해동안 가장 많이 읽혔던 글 탑 10 을 간략하게 정리해봤습니다.
1.Why Rounded Corners are Easier on the Eyes
– 둥근 모서리가 보기에도 좋고, 각진 모서리보다 내용에 더 집중하게 한다
2.Why Your Form Buttons Should Never Say Submit
– Form의 submit 버튼을 ‘제출’, ‘전송’ 등으로 하지말고, ‘계정 생성’ ‘회원 가입’ 등 유저가 결과를 예상할 수 있는 형태로 제공해라.
3.Why Users Fill Out Forms Faster with Unified Text Fields
들쑥날쑥한 폼보다는 가로 너비가 통일된 폼이 좋다.
4.9 Things Designers Can Learn from Target’s Checkout Form
미국의 소매유통점 Target의 체크아웃 폼으로 부터 배우는 9가지 교훈
1) 체크아웃 폼을 보는 사람이 뭘해야하는지 큼지막한 글씨로 알려주고 있다
2) 전화번호 입력란 : 왜 전화번호를 입력해야하는지 안내해주고 있다. 그리고 정확한 형태로 입력할 수 있도록 명확한 입력 포맷을 제시하고 있다.
3) 사용자가 입력할 때 실시간으로 유효성검사와 사용가능 여부를 알려준다
4) 체크박스는 텍스트 필드나 드롭다운 리스트에 비해 눈에 덜 띄기 때문에 사용자들이 그냥 넘어가기 쉬운데, 폰트를 조절함으로써 체크박스가 무시되지 않도록 함
5) 여러버튼이 함께 있을 때, 원하는 행동을 하게 하는 버튼(예, 회원가입)은 강렬하게 표현하고, 그렇지 않은 버튼(예, 취소)은 흐리게 처리함
6) 빨리 도는 로딩이미지를 사용함으로써 데이터 처리가 빠르게 이뤄지는 것 처럼 느끼게 함
7) 신용카드 아이콘을 종류별로 제공해, 쉽게 사용가능한 신용카드를 파악할 수 있도록 함
8) 할인 등을 위한 프로모션 코드를 입력하는 부분은 폼의 마지막 부분에 배치
9) 주문 요약을 하일라이팅
5.Why ‘Ok’ Buttons in Dialog Boxes Work Best on the Right
일반적으로 사람들은 좌에서 우로 시선을 처리하고, 우측으로 이동 것을 ‘진행된다’고 느끼기 때문에 OK 버튼은 우측에 있는 것이 좋다.
6.Why Users Fill Out Forms Faster with Top Aligned Labels
필드의 레이블은 입력란 상단에 위치하는 것이 좋다.
7.Why Hover Menus Do Users More Harm Than Good
마우스을 올리면 서브메뉴가 나타나는 방식은 비추. 설명은 길지만 간단히 말하자면 사용하기 불편하다. 마우스 오버하면 나타나는 방식 대신 클릭하면 서브메뉴가 나타나도록 하는 것이 좋다.
8.Call to Action Buttons Best Practices Guide
행동을 부르는 버튼 베스트 프랙틱스 가이드
1) 그라데이션을 아래가 어두워지도록 넣고 모서리를 둥글게 할 것
2) 배경과 텍스트이 색상을 강하게 대비되도록 할 것
3) 크게 만들되 너무 크진 않게
4) 긴급상황, 혹은 즉시 라는 뉘앙스의 단어를 사용 (예, Buy Product -> Buy Now)
5) Action word는 약하게 (예, Buy Now -> Try it Now)
6) 2단어인 경우 두 단어 모두 시작 문자를 대문자로, 3단어 이상인 경우에는 첫 단어의 시작 문자만 대문자로
7) 아이콘이나 화살표를 이용
8) 마우스를 올리면 달라지도록 처리
9) 내용 위와 아래에 표시
9.How the ‘Thumbs Up/Like’ Button is Dumbing Users Down
유저 댓글에 ‘추천’ 기능을 넣는 것은 의도하지 않은 행동을 낳을 수 있다. 가장 큰 부작용은 본문의 내용과 관계없이 ‘추천’을 많이 받기 위한 댓글을 쓰는 사람이 많아진다는 점이다. (네이트의 ‘베플이 되면 xx하겠습니다’식의 댓글이 달리는 현상을 떠올리면 될 듯). 또한, 이성보다 감성에 호소하는 댓글이 우세하게 되며, 집단사고를 촉진하고 다양한 개인적 의견은 억제된다.
10.5 Big Usability Mistakes Designers Make on Carousels
Carousel (한국어로 어떻게 표현해야할지 모르겠음..) 사용시 주의사항
1) 유저가 관여하면 오토 슬라이딩을 멈추고, 유저가 컨트롤 할 수 있도록 할 것
2) 열단위로 바꿔서 보여줄 것(예를들어 한 번에 4개씩 보여주는 carousel인 경우 1번째 아이템~4번째 아이템을 보여준 후 2번째 아이템~5번째 아이템을 보여주는 것보다는 5번-8번 아이템을 보여주는 것이 좋다.
3) ‘전체 몇 개중 몇 번째것들을 보고 있다’ 는 사용자가 궁금해하는 사항이 아니다. 사용자는 내가 앞으로 몇개의 열을 볼 수 있는지가 중요하다.
4) 마지막 아이템까지 슬라이딩되면 그 다음에 첫번째 아이템이 나오게 하지 말 것. 마지막까지 봤다는 것을 인지시킬 것.
5) 버튼의 경우 클릭하는 영역이 너무 작지 않게 주의할 것.