읽을거리) 큰 차이를 만드는 10가지 작은 UI 수정

큰 차이를 만드는 10가지 작은 UI 수정(10 tiny UI fixes that make a BIG difference)

 

원본 링크 : [링크]

10 tiny UI fixes that make a BIG difference

 

 

< 간단 요약 >

작은 수정으로 UX를 개선할 수 있다는 좋은 여러가지 인사이트이다.

 

반응형

 

< 1. 버튼이 클릭이 가능해 보이게/ 예측 가능해 보이게 만들기 >

 

https://miro.medium.com/v2/resize:fit:1100/format:webp/1*IFiTxnFXGm9rnsIz0hGIYw.png

 

 설명이 없어도 버튼처럼 보이도록 작업을 해야한다.

다른 기본 요소와 다르게 구성 (색 대비, 경계, 그림자, 애니메이션, 그라디언트 등) 함으로 상호 가능이 가능한 요소라는것을 예측 가능하게 만들어야 한다,

 

 

< 2. 텝(Tab) 타깃 크기 늘리기 >

 모바일 환경에서는 마우스 처럼 작은 영역이 아니고 충분히 누를 수 있는 영역을 확보해야 한다.

 

반응형

< 3. 로딩 피드백 추가하기 >

 

1초 이상 걸리는 작업이라면 사용자에게 무언가가 진행되고 있다는 것을 명확하게 알려야 한다.

스피너, 스켈레톤 로더, 프로그레스바, 혹은 진행중인 기타 여러가지 상황을 사용자에게 제공해야한다,

그렇지 않으면 유저는 멈추거나 떠나게 된다.

 

< 4. 폼 라벨(Form Labels) 개선하기 >

전문 용어나 애매한 표현을 피하고, 사용자가 이해하기 쉬운 언어로 표현한다.

 

반응형

 

< 5. 정렬(Aliignment) 문제 고치기 >

정렬이 되지 않은 요소들은 시각적으로 신뢰감이 떨어지게 된다.

 

< 6. 키보드 단축키 추가하기 >

반복되는 작업을 하는 고급 사용자(power user)에게 유용한 기능으로, 단축키를 추가하기도 한다.

 

 

< 7. 일관된 아이콘 사용하기 >

https://miro.medium.com/v2/resize:fit:720/format:webp/1*uoeMMIWBPu-5SfYDc7oONA.png

일관된 아이콘을 사용해야 동일한 기능을 다시 학습하지 않아도 된다.

 

< 8. 비밀전호 토글(show password toggle) >

https://miro.medium.com/v2/resize:fit:720/format:webp/1*A7Tc04l4cKnWLnejcrmvmg.png

사용자는 비밀번호를 입력하는 과정에서 잘못된 비밀번호를 알기가 쉽지 않다.

비밀번호 가시성을 전환하는 간단한 눈 아이콘과 기능을 추가하면 유저의 로그인 과정의 히트율이 올라가게 된다.

 

반응형

 

< 9. 에러 메지시를 의미있게 만들기 >

https://miro.medium.com/v2/resize:fit:720/format:webp/1*665D3Eph2DXim2r3f6KqCw.png

 

에러의 메시지가 모호한 표현이면 유저가 해당 상황을 해결하기가 어렵다.

유저가 해당 문제를 직접 해결할 수 있도록 에러의 메시지가 세분화하는게 더욱 좋다.

 

 

< 10. 요소들의 간격 확보하기 (Space things Out) >

 

여백이 너무 없으면 여유가 없고 인지도가 낮아진다.

그룹핑이 가능한 정도 혹은 일정 간격이 있어야 차분하고 가독성이 높아진다.

 

※모든 사진에 대한 저작권은 Ryan Almeida 에 있습니다.