✔ 10가지 필수적인 UI 디자인 팁

안녕하세요, 레오입니다. 운영 중인 UX 스터디에서 멤버 분이 좋은 아티클을 공유해주셔서 내용을 정리해보았습니다. 공유드립니다! https://weeklyuxuichallenge.tistory.com/17 ✅사용자에 대해 이해하세요. - 가장 중요한 것은 사용자에 대해 이해하는 것. - 나이/성별 등 정보를 이해하는 것도 좋지만 '어떤 것을 필요로 하고, 그들이 목표를 달성하는 데 장애물이 되는 것은 무엇인지' 파악하는 것이 더 중요하다. - 단순히 어떤 것을 원하는지 이해하는 데서 그치지 말자. 깊게 파고들어서 깊은 곳의 니즈를 발견해야 한다. - 사용자와 대화하고 데이터를 분석해서 얻은 인사이트는 수많은 의사결정의 근거가 될것이다. ✅ 사용자가 인터페이스를 어떻게 사용할지 정의하세요. - 디자인을 시작하기 전에, 사용자가 어떻게 사용할 지 정의부터 하자. - 모바일에서 사용하는지, pc에서 사용하는지 등에 따라 터치 / 스와이프 / 드래그 / 단축키 입력 / 클릭 등 고려해야 할 인터렉션과 상호작용의 방법이 다르다. - 사용자가 누구인지, 어떻게 인터페이스를 사용하는지에 따라 집중해야 하는 것들 / 구현해야 하는 것들이 달라진다. ✅ Set Expectation 결과를 명확히 에상할 수 있도록 - 수많은 동작에는 예상되는 결과물과 불안이 동시에 존재한다. 따라서 사용자의 행동에 따른 결과물을 명확히 알려주는 것이 정말 중요하다. 1. 디자인을 통한 방법 - delete에는 휴지통을 사용하는 등 자명한 심볼이나 아이콘을 사용하기. - stop에는 빨간색, go에는 초록색을 쓰는 등 의미와 관련 있는 색상을 고르기. - 원하는 작업에 해당하는 버튼 강조 표시하기. 2. 문구를 통한 방법 - 버튼 문구를 명확하게 작성하기. - empty 상태에서 지시하는, 응원하는 문구 사용하기 (ex - 원하는 것을 검색해 보세요) - 경고문구 제공 혹은 되묻기. ✅ 사용자의 실수에 대비하기. - 사용자가 실수한다고 해도, 항상 그 결과를 겪어야 하는 것은 아니다. - human error의 영향을 최소화하기 위해서는 '실수를 방지하거나 / 실수한 뒤에 수정할 방법을 제공하기' 라는 2가지 방법이 있다. - 에러가 발생한 뒤에는 디테일한 에러 메시지로 안내해주는 것이 좋다. 문제 상황을 안내하고 + 고칠 방법을 안내하는 것이 중요하다. ✅ 빠르게 피드백을 제공하자. - 터치 시에 버튼이 반응하거나 / 로딩 시에 애니메이션을 제공하는 등의 방식으로 빠른 피드백을 제공하자. - 팁) 로딩이 5초보다 덜 걸린다면 progress bar 보다 진행사항을 암시하지 않는 애니메이션 등을 사용해 보는 것도 좋다. progress bar는 오히려 오래 걸리는 듯한 느낌을 줄 수 있다. ✅ 요소의 배치, 사이즈를 신중하게. - 버튼의 클릭영역을 충분히 크게 (잘 보이고, 누르기 쉽게) 만들자. 특히 타이포그래피, 메뉴, 링크 목록등에서 주의해야 한다. - 가장 자주 쓰이고 중요한 버튼은 크고 잘 보이게 만들어라. 팁) 검색바와 같은 navigation 요소는 화면 가장자리나 코너에 배치하면 좋다. 팁) 세로가 아닌 가로 스크롤이 포함되어 있다면 사용자가 이 '이상한 인터렉션'을 제대로 이해할 수 있도록 잘 도와줘야 한다. 더 신경써서. ✅ 표준을 무시하지 말자. - 지나치게 창의적인 것은 좋은 생각이 아닐 수 있다. - 표준과 너무 다른 디자인은 사용자가 많이 고민하게끔 만들고, 서비스를 사용하기 어렵게끔 만든다. ✅ 인터페이스를 배우기 쉽게 만들자. - 단순할수록, 배우고 기억하기 쉽다. - 유사한 버튼/정보를 묶는 등의 방식으로 인터페이스를 단순하게 만들면 좋다. 팁) 중요한 정보만 노출하고 더 많은 정보를 보기 위해서 다른 페이지로 유도하는 것도 자주 쓰이는 방법이다. Pro tip) '자세히 보기' 와 같은 문구는 지양하면 좋다. 결과물을 예상할 수 없기 때문이다. 다음에 어떤 결과물이 올지 좀 더 직관적으로 알려주면 좋다. ✅ 의사결정을 쉽게 만드세요. - 디자인을 심플하게 만들어서 의사결정을 쉽게 만들자. (정보의 양, 버튼 등을 최대한 줄이기. ex) 랜딩페이지에 하나의 CTA 버튼만 배치) ✅ 데이터에 귀를 기울이자. - 단순히 예쁜 것이 좋은 것이 아니다. 목표를 달성하기 위해 디자인을 최적화하는 것도 중요하다. - 출시 이후 데이터를 지켜보는 것이 중요하다. 주기적으로 들여다보는 것이 좋고 GA나 Mixpanel이 좋은 분석툴이 될 것이다. - Mixpanel은 event에 강점이 있어 사용자가 사이트에서 한 행동을 기반으로 데이터를 모으지만 GA는 체류시간, 유입경로 등 behavioral 쪽에 강점이 있다.