UI사용성 평가, 휴리스틱 이론 (전민수) - Sesac

기획자는 주장(가설)에 대한 근거가 있어야 한다.
제이콥 닐슨 휴리스틱 체크리스트는 근거로 활용할 수 있다.
체크리스트는 혼자서 하는 것이 아니라, 여러 명이 체크하면서 각자가 체크한 내용을 공유하는 것이다.
사용자가 불만을 이야기하면, 체크리스트에 바로 매핑할 수 있어야 한다.
기획자는 자신만의 체크리스트를 커스터마이징 해야 한다.
휴리스틱과 함께 인지심리학 법칙을 함께 공부한다.

원칙1. 시스템 상태의 시각화

1. 사용자 실수 인지 유도

사용자가 실수를 했을 때, 실수를 인지하고 사용자에게 실수를 알려야 한다.
( 로그인 정보를 잘못 입력했을때, Caps Lock 등 )

2. 사용자 선택 행위 유도

사용자가 사용할 수 있는 범위를 사용자가 인지할 수 있어야 한다.
( 버튼의 활성화/비활성화 여부 )

3. 애니메이션 알림 효과

사용자 주의를 끌게 하여, 상호작용을 돕는다.
( 모바일의 경우, 터치 기반이기 때문에 마우스 커서가 없다. 그러므로 마우스 애니메이션을 사용할 수 없다. )

4. 브레드 크럼

사용자가 이전 행위로 돌아갈 수 있도록 돕는다. 부가적으로 사용자가 이전 행위의 위치와 현재 위치를 비교할 수 있게 한다.
( 가로 형태의 꺽새로 구성된 가로 줄, 링크가 걸려 있다. 모바일의 경우 화면이 작아서 브레드 크럼을 사용하지 않는다. )

5. 현재 메뉴 위치 상태

사용자가 현재 위치를 이해할 수 있도록 현재 선택 메뉴에 시각적 강조가 나타나는가?
( 색상, 볼드, 대비, 밑줄 )

6. 선택 옵션 시각적 인지

사용자가 선택한 것과 선택하지 않은 것을 비교할 수 있어야 한다.
( 나열된 태그 다중 선택 )

7. 스켈레톤 로딩 UI

데이터가 로드되는 동안 흰색 또는 회색의 뼈대 형태로 먼저 표시한다. 스켈레톤 로딩 UI를 사용함으로써, 사용자는 시스템이 멈췄다는 착각을 하지 않게 하고 사용자 경험을 높여준다.
( 버튼, 입력필드, 체크박스, 토글 등의 개체는 스켈레톤 로딩 UI에 표시하지 않는다. )

8. 호버 효과

마우스를 올리면 Hover 효과가 발생하면서, 사용자가 다음 이벤트를 예측할 수 있게 한다.
( a.썸네일에 마우스를 올리면, 추가정보가 표시된다. 상품명, 가격, 평점 등 / b.사용자의 마우스가 위치한 곳을 알려준다. )

원칙2. 현실 세계와 부합하도록 시스템을 설계한다.

1. 첫인상이 좋다.

현실 세계와 유사한 관습적인 디자인은 좋은 인상을 준다.

2. 친근하다.

아이콘 등 GUI 등이 친근한가? 사용자의 학습 곡선을 낮출 수 있다. 처음 사용하는 사용자도 익숙하게 사용할 수 있게 한다.
( 휴지통 아이콘은 삭제의 의미를 갖고 있다고 인지한다. )

3. 세련되다.

메인 페이지에 최신 UX 디자인 트렌드를 반영. 중요한 콘텐츠를 메인 페이지 상단에 배치해야 한다.
( 세련된 이미지와 그래픽 요소를 활용 )

4. 핵심을 쉽게 말한다.

익숙한 표현. 간결하고 명확한 문장. 쉬운 단어 선택. 직관적인 표현과 안내.

5. 맥락 파악이 쉽다.

모든 사용자를 고려한 문구 작성.
( a.5초 테스트, 5초 동안 특정 화면을 보여주고 가장 기억에 남는 게 무엇인지 확인. 자사 VS 경쟁사 비교 / b.형광펜 테스트 - 이해되는 부분, 이해되지 않는 부분 표)

6. 중요한 말은 쏙쏙 들어온다.

정보디자인은 시각적인 계층 구조인가?

( 헤더 타이틀 > 서브 타이틀 > 본문 타이틀 > 블릿 > 아이콘 > 이미지 > 글 )

7. 상당히 논리적이다.

상식적이고 논리적인 설계 및 개발 절차. 필수적인 접근 방식
( 퍼소나 > 유저 플로우 > 태스크 플로우 > 와이어 플로우 , 퍼소나는 신규 및 대대적인 리뉴얼에서만 필요하다. )

8. 다음에 만날 때 친한 친구를 데리고 온다.

유사한 성격의 정보와 기능을 그룹핑 해 놓는다. 관련 기능을 쉽게 찾을 수 있고 직관적으로 작업을 수행할 수 있다. 밀러의 법

(자주 찾는 메뉴, 메인화면 로그인 부분에 위치한 메뉴)

원칙3. 사용자 제어 및 자유

1. 맞춤형 서비스

필터를 활용한 검색

( 뉴스 검색시, 기간필터 사용 )

2. 탐색 내비게이션

a.카테고리 내비게이션, b.상단메뉴, c.햄버거메뉴, d.검색

3. 라이프 스타일 UI

b.사용자가 원하는 색상, 글꼴, 크기 등을 개인화 한다. c.웹사이트 검색 기능을 강화

4. 의사 결정

사용자에게 의사 결정의 주도권을 준다. 삭제 작업시 팝업을 띄워, 취소할 수 있는 주도권을 준다.

( 팝업창, 모달창 )

5. 시스템 오류 복원

사용자가 작업 중에 실수를 하거나, 시스템이 멈추거나 꺼졌을 때, 사용자는 이전 작업의 위치로 복원이 가능한가?

6. 재확인

중요한 작업을 할 때, 한 번 더 재확인 시킴

7. 취소 > 업로드

특정 작업을 하는데, 시간이 많이 걸리는 경우, 사용자는 언제든지 취소할 수 있어야 한다. 또는 도중에 중단되었을 경우, 중단 시점부터 다시 시작할 수 있어야 한다.

8. 수정/변경 > 입력 행위

자신의 작업을 수정하거나 변경할 수 있어야 한다.

9. 수정/변경 > 전/후 단계

수정 변경 과정에서 바로 이전 단계로 돌아갈 수 있게 한다.

( UNDO 기능 )

원칙4. 일관성과 표준을 준수하다.

1. 내부적 일관성 > 단일 제품군 내

사용자는 제품 내 새로운 기능에 대해서, 공부하지 않아도 작업할 수 있다.
(디자인 시스템 또는 디자인 가이드)

2. 내부적 일관성 > 브랜드 제품군

예를 들어 MS-Office 제품군은 일관된 레이아웃을 유지하고 있다.

3. 외부적 일관성 > 업계 컴포넌트 UI 규칙 일관성

링크의 그래픽 요소. (예, 링크는 파란색 텍스트 와 밑줄을 사용한다.) 벤치마킹을 하는 이유에 해당한다. 벤치마킹은 다음과 같은 3가지 이유로하게 된다. (a.트렌드 관점에서 벤치마킹, b.자사와 경쟁사의 세부적인 기능 관점에서 벤치마킹, c.프토토타입을 만들때, 업계 표준을 UI컴포넌트를 벤치마킹) 여기서는 3번째에 해당한다.

원칙5. 사전방지성

1. 사용자 실수 알림

데이터 유효성 검사. 데이터가 양식에 맞는지. 사용자가 데이터를 입력할 때, 즉시 유효성 검사를 해주고, 즉각적인 피드백이 일어난다. 실시간으로 알려주어야 한다.

2. 이전/이후 행위 일치 여부 안내

사용자가 이전 행위와 다음 행위에 불일치가 일어났을 때, 사용자에게 다른 행위를 인지 시켜주고 있는가? ( 파일 첨부를 했다가 다시 지운 경우, 메일 발송 버튼을 누르면 다시 확인하도록 한다. )

3. 재확인 > 중요 데이터 입력

사용자의 중요한 데이터 입력을 재확인 하게 하는가? (회원가입시 비밀번호의 경우, 2번 입력하게 함)

4. 재확인 > 복구가 불가능한 경우

복구가 불가능한 삭제의 경우, 정말 삭제하시겠습니까? 질문함.

5. 시스템 진행 상태 > 단계별

사용자가 은행에서 대출을 한다고 가정할 때, 복잡한 프로세스가 존재한다. 복잡한 입력 프로세스를 설계할 때는 시작 중간 끝이 명확해야 한다.

6. 제약 > 비활성화

사용자가 입력하지 않아도 되는 버튼은 비활성화로 제공되어 혼동하지 않도록 한다.

7. 제약 > 필수, 선택 여부 안내

회원가입시, 필수 입력사항에 표시
( *표 또는 빨간색으로 표시 )

원칙6. 회상보다 인식

1. 최소한의 인지적 노력 > 빠른 검색

사용자가 사이트를 이용할 때, 정보를 쉽게 검색할 수 있어야 한다. 사용자가 검색하면, 정확한 콘텐츠가 조회되어야 하고, 관련성이 높은 것 부터 나열되어야 한다. 나열된 정보를 사용자가 빠르게 인식할 수 있어야 한다. 또한 검색창의 위치가 사용자의 편의를 고려하여 설계되어야 한다.

2. 최소한의 인지적 노력 > 카테고리

정보는 체계적으로 분류되어야 한다.

3. 최소한의 인지적 노력 > 추천/인기/연관 정보

사용자가 관심 있어할 만한 정보를 제공하면, 접근 편의성을 높일 수 있다. a.사용자 추천 정보 제공, b.인기아이템 또는 신상품, c.카테고리 내 인기 정보, d.자주찾는메뉴 즐겨찾기 제공

4. 최소한의 인지적 노력 > 맥락 데이터 불러오기

사용자가 필요할 때 언제든지 맥락 데이터(이전 작업 데이터)를 찾을 수 있는가? (ex: 채팅창 대화 내용)

5. 최소한의 인지적 노력 > 이전 데이터 불러오기

사용자의 최근 행위, 사용자가 저장하지 않아도 자동적으로 시스템에 기록되어야 한다. ( ex: 네이버 지도에서 이전에 검색했던 내용을 불러올 수 있음 )

6. 최소한의 인지적 노력 > 선택/입력 유도

사용자가 입력할 수 있는 것들이 명확하게 시각적으로 표현하고 있는가? a.색상/크기/유형 등을 명확하게 표현하고 있는가? b.스타일은 일관성을 가지고 있는가? c.명확한 라벨

7. 최소한의 인지적 노력 > 정보 간결성

b.요약 정보 제공, c.목록/번호/블릿 활용, d.굵은글씨체,강조표시,색상 등으로 표현

8. 최소한의 인지적 노력 > 비교테이블

비교 테이블을 통해, 사용자는 각 정보의 장단점을 빠르게 비교하여 선택할 수 있어야 한다. (가격비교 테이블 등)

9. 인식 가능한 시각적 언어 > 컴포넌트의 시각적 의미 전달

a. 강조색 사용, b. 크기 차별화, c. 상태 표시

10. 인식 가능한 시각적 언어 > 직관적인 워딩

레이블(Label)은 직관적이어야 한다. 이중적이면 안된다. 예를 들어, 상품 구매의 버튼은 '구매'라고 적혀있다. '확인/완료' 보다는 좀 더 구체적이고 명확한 단어로 바꾼다.

11. 인식 가능한 시각적 언어 > 시각적 가이드

사용자가 기능을 조작하고자 할 때, 적절한 가이드를 제공한다. (마우스 오버 툴 팀을 제공한다, 파일업로드 툴 팁을 제공한다.)

원칙7. 사용의 유연성과 효율성

1. 낯선 환경에 친숙해지기

온보딩을 활용해서 사용자가 빠르게 서비스에 적응할 수 있는가? 또는 순차적으로 안내하는 단계별 가이드를 제공할 수 있다. a.첫 방문자에게 환영메시지와 투어, b.자주 방문한 사람에게 단계별 가이드

2. 기능/메뉴 설정하기

b.사용자가 서비스를 개인화하여 메뉴를 자신에게 맞게 수정. c.알림 설정

3. 즐겨찾기

사용자가 관심있는 정보에 빠르게 접근할 수 있도록, 즐겨찾기/구독 기능을 제공. 즐겨찾기 목록을 관리할 수 있게 한다.

4. 최근 작업한 행위에 빠르게 접근할 수 있도록 도와주기

"최근 작업 목록 제공" (Figma의 Recent)

5. 반복적 입력 행위 최소화하기

a. 이전 입력 내용 표시. (ex. 채팅창에 자주 입력했던 내용)

원칙8. 심미적이고 간결한 디자인

1. 심미성

메인 컬러 및 브랜드 컬러를 적극적으로 사용. 컬러의 a.유용성, b.사용성, c.감성 중 감성에 해당함. ( 넷플릭스의 경우 블랙앤화이트를 기반으로 포인트 컬러인 레드를 사용한다. )

2. 간결한 디자인

정보 제공 목적에 맞게, 화면 요소는 간결하게 구성되어 있는가? 한 화면에 텍스트나 도형을 과도하게 배치하지 않는다. a. 화면 영역에서 불필요한 요소 제거, b. 개체들의 크기를 조절한다, c. 컬러팔레트를 효율적으로 사용하여, 사용자의 시각적 집중을 유도한다.

원칙9. 오류 발생 시 사용자가 문제를 파악하고 해결한다.

1. 오류 인지 > 실시간 알림

오류가 발생했을 때, 실시간으로 알림을 주는가? 사용자가 즉시 조치를 취할 수 있도록 돕는다. 시스템으로 하여금 실시간 모니터링 한다.

2. 오류 인지 > 적시성

오류가 발생한 위치를 명확하게 알려준다. (회원가입시 입력 누락한 곳을 표시해 준다.)

3. 오류 인지 > 간결성

오류가 발생했을 때, 텍스트 형태의 문구가 간결한가? 일관된 형식인가? (오류관련 모달창 텍스트 내용은 간결한가?)

4. 오류 인지 > 정확한 설명

사용자에게 오류에 대한 명확한 이유와 설명을 하고 있는가? 비슷한 실수를 피하게 한다.

5. 오류 인지 > 시각적 경고

시각적 기호, 아이콘, 테두리 처리, 색상 처리 등을 제공하고 있는가? 일관된 형식인가?

6. 오류 인지 > 시각적 단서

a. 색맹 사용자 배려, b. 시각적 다양성 제공

7. 오류 회복

a.사용자 경험 향상, b.신속한 대응, c.사용자 도움 제공

원칙10. 충분한 도움말을 제공한다.

1. 온보딩

사용자에게 이 서비스의 유용성을 설명한다. 사용자 오류를 방지한다.

2. 실시간 고객 상담

a.즉각적인 지원 제공, b.맞춤형 지원 제공, d.고객만족도향상

3. FAQ

주제별 분류가 명확한가?
a.빠른 문제 해결, b.검색 시간 절약, c.사용자 경험 향상, d.고객만족도향상

4. 간결하고 핵심 안내 문구

a.긴 내용을 읽는 대신, 빠르게 내용을 파악할 수 있다, b.직관적인 이해, c.집중력유지

5. 보조적 디자인 수단 활용

a.이미지나 일러스트를 통해 내용 전달, b.직관적 내용 전달, c.시각적 매력