brunch

You can make anything
by writing

C.S.Lewis

by 피그마스터 Aug 13. 2023

휴리스틱 평가로 내 ux ui가 좋은지 확인하기

닐슨 노먼 그룹의 10가지 휴리스틱 평가

ui ux 디자인을 평가하는 기준에는 여러가지 있습니다. 내가 스스로 진단할 수 있는 방법인 휴리스틱 평가에 대해 적어보겠습니다. ux 포트폴리오를 만드실 때도 참고하면 좋습니다. 


휴리스틱 평가란?

휴리스틱은 그리스어로 ‘발견하다’라는 의미입니다. 

제품이 사용자의 인지적 오류를 줄여줄 수 있는 방향으로 디자인되었는지, 나아가 유용한 정보를 포함하며 사용자가 제품 이용 과정에서 정서적 만족을 느끼는지를 함께 평가합니다. 

많은 휴리스틱 평가 중 닐슨 노먼 그룹의 10가지 휴리스틱 평가에 대해서 알아보겠습니다




1. Visibility of System Status

시스템 상태를 눈에 보이게 표현하기


적절한 시간 내에 사용자에게 진행중인 정보를 지속적으로 제공해야 합니다. 

os 업데이트 시간을 알려주기, 파일 업로드 중인 것상태 알려주기, 헤이딜러의 거래 진행상황 알려주기 등을 예시로 들 수 있습니다. 




2. Match between System and the Real World

시스템과 현실 세계를 연결하기


대상을 일상에서 사용하는 모습 그대로 사실에 가깝게 표현합니다. 사용자가 이미 가진 멘탈 모델을 그대로 활용할 수 있습니다. 사용자에게 익숙한 것, 관례를 따르는 것은 중요합니다. 

카테고리 이미지를 실사로 넣는 것, 네이버 페이의 카드 ui, 맥의 휴지통 등을 예시로 들 수 있습니다. 


3. User Control and Freedom

시스템 제어와 자유를 느끼게 하기


사용자가 실수를 했다면 바로 원하지 않는 상태에서 벗어날 수 있도록 출구를 만들어야 합니다. 뒤로가기, 실행취소, breadcrumbs등을 통해 한번에 원하는 메뉴로 이동하도록 합니다. 

저도 굉장히 잘 쓰는 예시인데요, 메세지 보내고 바로 취소하기, 앱 다운로드 취소하기 등을 들 수 있습니다.



4. Consistency and Standards

일관성과 표준을 따르기


사용자가 의심하는 일이 없도록 만들어야 합니다. 의문을 갖지 않고 매끄럽게 서비스를 이용하려면 다른 플랫폼에서 이미 학습한 방식을 존중해야합니다. 나만의 서비스의 아이텐티티에 취해, 고객이 학습한 방식을 무시하면 안됩니다. 

좋아요, 즐겨찾기, 장바구니등의 아이콘은 관례를 따르는 것이 좋습니다. 저희가 이렇게 작성하는 글 작성 도구등도 예시로 들 수 있습니다. 지금까지 사용하던 방식을 따르지 않으면, 사용자들은 혼란에 빠지게 됩니다. 



5. Error prevention

에러를 방지하기


문제가 발생하지 않도록 방지하는 세심한 디자인을 제공합니다. 에러가 자주, 오래 발생하는 지점을 찾아내고 이 상황을 제거해야 합니다. 



6. Recognition rather than recall

기억보다 인식


사용자가 기억할 필요없이 만들어야 합니다. 현재의 단계를 바로 알아차릴 수 있게 하면, 기억하지 않고도 바로 사용할 수 있습니다. 

저도 네이버 웹툰을 많이 사용하는데, 지난번에 읽었던 회를 표시해 주어서 회차를 놓치더라도 쉽게 다음화를 읽을 수 있습니다. 



7. Flexibility and efficienty of use

유연성과 효율성


경험이 숙련된 사용자들을 위해, 단축키가 고급 설정 등의 메뉴를 제공합니다. 




8. Aesthetic and minimalististic design

심플하고 아름다운 디자인


관련이 적은 요소나 당장 필요하지 않은 장치는 모두 배제하는 것이 좋습니다. 모든 요소들이 사용자의 주의를 빼앗고 있습니다. 중요하지 않은 요소들이 많으면, 정말 중요하게 생각하는 핵심 과업을 하는데 방해가 되고 직관성을 해치게 됩니다. 




9. Help users with errors

에러 인식하고 빠져나올 수 있도록 돕기


에러는 알아차기 쉬울 수록 좋습니다. 오류가 발생했을 때 가능한 쉽게 보여주고, 문제의 원인을 짚어주는 것이 문제로부터 벗어나는데 더 빠르다고 느낍니다. 

오류가 나면 표시해주는 빨간색의 텍스트, 네모박스, 느낌표 아이콘 등을 예시로 들 수 있습니다. 



좋은 예시와 나쁜 예시입니다. 토스에서 송금 한도가 초과 했을 때, 바로 그 한도 안으로 변경할 수 있는 버튼을 제공합니다. 

나쁜 예시는 왜 오류가 생겼는지 설명해 주고 있지 않습니다. 





10. Help and documentation

도움말과 문서화


소수의 사용자만 도움말을 찾는다고 해도, 그 사람들에게는 도움말이 유일한 위안입니다. 문제가 생겨 도움말을 찾을 때에는 더 빠르게 문제 해결 단서를 찾을 수 있도록 도와줘야 합니다. 







닐슨 그룹에서는 10가지 휴리스틱 평가를 포스터로 제공하고 있습니다. (https://www.nngroup.com/articles/ten-usability-heuristics/) 위 링크에서 자세한 예시들도 볼 수 있습니다. (그런데 너무 예전 예시라 한국에 맞는 것들을 가져왔어요)



해당 내용은 아래 홈페이지에서도 참고하였습니다

https://yozm.wishket.com/magazine/detail/1038/

https://www.emotion.co.kr/magazine/41/

https://uxdesign.cc/user-experience-is-one-of-the-hottest-topics-in-day-today-designers-life-fb314978e1ff

브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari