[아티클 인사이트] 디테일한 수정만으로 큰 인터페이스 문제를 해결할 수 있다

https://uiverse.io/blog/10-tiny-ui-fixes-that-make-a-big-difference

10 tiny UI fixes that make a big difference

 

---

 

한 줄 요약

인터페이스(UI)의 작고 세심한 디테일이 사용자 경험 측면에서 큰 영향을 미친다.

 

 

 

저자는 왜 이렇게 말했을까 (근거)

1. 버튼은 버튼답게 만들기 (클릭 가능한것처럼 보이게)
2. 복잡하지 않게 여백 활용하기 (복잡한 디자인은 피로 유발)
3. Textfield의 Lable명 명확하게 작성하기
4. 로딩 시 사용자에게 인터랙션 피드백 제공하기 (멈춰있으면 오류로 인식)
5. 원하는 버튼을 명확하게 누를 수 있도록 탭할 대상의 크기 키우기 (최소 44*44 권장)
6. 오류 메시지엔 오류 원인, 다음에 할 일 안내하기 (ex. 오류가 발생했습니다X)
7. 아이콘 일관성 유지하기 (선과 면 아이콘 구분할 것)
8. 비밀번호 입력 시, 비밀번호 표시/숨기기 기능 추가
9. 레이아웃 정렬 잡기
10. 하이어라키(계층 구조) 명확히 하기 (어떤 정보가 중요한지에 따라 강조할 대상은 눈에 띄게하기)

 

 

 

이 방법이 효과있다고 생각하는 이유

UI의 가장 기본기라고 생각한다. 정렬이 맞지 않고, 한 화면에 글과 이미지의 양이 너무 많다면 사용자는 어느 것을 먼저 읽어야할지 감잡히지 않을 것이다.

 

 

 

내가 생각하는 한계

해당 글은 ‘기본’이 되지않았을 때 기본을 다시 보라는 의미로 작성한 것으로 파악된다. 하지만 포트폴리오에서 이 점을 개선했을 때 이것만 가지고 개선이 가능할까? 라는 의문점을 줄 수 있을 것 같다. 이 부분의 경우 실제 실무에서 작은 부분은 개선할 수 있겠지만 실제 문제를 해결할 때 과연 이 작은 디테일만으로 개선할 수 있을지 의문이다!

 

 

 

내 경험과 연결하기

전에 AI 뉴스 요약 서비스를 만들었을 때, 해시태그 위주로 뉴스를 요약해주자! 라는 취지로 메인 홈화면에 중요하다고 생각하는 해시태그를 큼지막하게 만들었다. 뒤에는 primary 컬러를 사용했고 네모 박스 안에 해시태그를 넣었는데, 다른 시선에서는 이 버튼의 위계가 너무 강해서 마치 버튼처럼 보인다고 했다. 위계 설정을 잘못한 사례라고 생각한다. 이처럼 과하게 강조하려다보니 버튼처럼 보이는 상황이 발생한 것 같다.

 

 

 

새롭게 알게된 점

문제를 해결할 때 어떤 문제가 발생했을까 하고 다른 곳에서 문제를 계속 찾으려했다. 하지만 UI의 기본부터 일단 확인해보고 여기서 문제가 없다고 판단됐을 때 그렇다면 어디서? 라는 질문을 던질 수 있을 것 같다. 기본기가 다시한 번 중요하다는 것을 상기시켰다.

 

 

한 문장 인사이트

인터페이스의 작은 디테일에서 문제가 없는지 체크한다면 큰 문제라고 생각했던 것이 생각보다 작은 디테일을 고치는 것만으로도 해결할 수 있다.