UXUI 아티클 스터디 - 내배캠 사전캠프 4주차 월요일

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

휴리스틱평가 : 휴리스틱은 그리스어로 '발견하다'라는 의미다. 사용자 경험 전문가들이 제품의 사용성을 평가하는 데 활용하는 체계적인 방법이다.

사용자가 제품을 사용할 때 느낄 수 있는 어려움이나 불편함을 미리 예측하고 개선하는 데 도움을 주는 방법이다.

제이콥 닐슨의 10가지 휴리스틱 원칙: 명확성, 일관성, 사용자 컨트롤, 실수 방지, 효율성, 유연성, 미적 디자인, 인식 가능한 정보, 사용자의 익숙성, 도움 및 문서 등 10가지 요소로 구성

시스템 상태 가시성: 사용자에게 항상 정보를 제공하는 방법

시스템 상태 가시성은 사용자에게 시스템이 현재 어떤 상태인지 명확하게 보여주는 것을 의미한다. 이는 사용자가 시스템의 작동 방식을 이해하고, 예상치 못한 상황에 대비하며, 필요한 경우 조치를 취할 수 있도록 돕는 데 중요한 역할을 한다.

시스템 상태 가시성을 높이는 방법

• 진행률 표시: 업무 진행 상황을 보여주는 진행률 표시
• 상태 메시지: 현재 시스템 상태를 설명하는 메시지
• 아이콘 및 색상: 시각적 신호를 사용하여 시스템 상태 나타내기
• 사운드: 시스템 상태 변경 사항을 알리는 사운드
• 진동: 휴대폰 등의 경우 진동을 사용하여 시스템 상태 변경 사항 알리기

예시

• 운영 체제 업데이트: 업데이트가 진행 중인 동안 진행률, 남은 시간, 예상 완료 시간 등을 사용자에게 알려주기

• 파일 업로드: 파일 업로드 중인 동안 업로드된 용량, 남은 업로드 시간, 전송 속도 등을 사용자에게 보여주기

• 택배 배송: 택배가 배송 중인 동안 현재 위치, 예상 도착 시간, 배송 상태 등을 사용자에게 알려주기

• 온라인 결제: 결제가 진행 중인 동안 결제 진행 단계, 예상 완료 시간, 결제 정보 등을 사용자에게 보여주기

시스템과 현실 세계의 일치

시스템과 현실 세계를 연결하는 것은 UI 설계의 중요한 원칙이다. 사용자에게 익숙한 것, 규범을 따르는 것은 UX 향상에 매우 중요합니다.

예시

• 카테고리 이미지를 실사로 넣는 것: 온라인 쇼핑몰에서 카테고리를 표현할 때 실제 제품 사진을 사용하면 사용자가 쉽게 원하는 카테고리를 찾을 수 있다.

• 네이버 페이의 카드 UI: 네이버 페이는 실제 신용카드와 비슷한 디자인의 UI를 사용하여 사용자가 익숙하게 결제할 수 있도록 한다.

• 맥의 휴지통: 맥의 휴지통은 실제 휴지통과 비슷한 디자인으로 사용자가 파일을 쉽게 버릴 수 있도록 한다.

사용자 제어 및 자유

사용자 제어 및 자유는 사용자가 시스템을 자율적으로 제어하고 원하는 대로 사용할 수 있도록 하는 것을 의미한다. 사용자에게 실수를 되돌리고 원하지 않는 상태에서 벗어날 수 있는 방법을 제공한다.

사용자에게 제어감과 자유를 느끼게 하는 것은 긍정적인 사용자 경험을 만드는 데 중요한 요소다. 사용자가 시스템을 제어할 수 있다고 느낄 때 더욱 적극적으로 참여하고 만족스러운 경험을 할 수 있다.

사용자 제어 및 자유를 높이는 방법

• 취소 및 되돌리기: 사용자가 실수를 했을 때 쉽게 이전 단계로 돌아갈 수 있도록 취소 및 되돌리기 기능을 제공한다.
• 다른 옵션 제시: 사용자에게 여러 가지 옵션을 제시하여 원하는 대로 선택할 수 있도록 한다.
• 명확한 피드백 제공: 사용자의 행동에 대한 명확한 피드백을 제공하여 시스템이 어떻게 작동하는지 이해할 수 있도록 한다.
• 사용자 설정 제공: 사용자가 개인 취향에 맞게 시스템을 설정할 수 있도록 한다.
• 단축키 및 제스처 지원: 사용자가 시스템을 더 빠르고 효율적으로 사용할 수 있도록 단축키 및 제스처를 지원한다.
• 비상 종료: 사용자가 원하지 않는 상황에 처했을 때 쉽게 벗어날 수 있도록 비상 종료 방법을 제공한다.

예시

• 메세지 전송 취소

• 앱을 다운로드 취소

• 웹 브라우저에서 뒤로가기 및 앞으로가기

일관성과 표준 준수

사용자는 이미 다른 플랫폼이나 서비스에서 익숙해진 방식으로 시스템을 사용하는 것을 선호한다. 따라서 디자인에서 관습과 표준을 따르는 것은 사용자 학습 곡선을 단축하고 사용자 만족도를 높이는 데 도움이 된다.

일관성과 표준 준수하는 방법

• 사용자 학습 곡선 단축: 사용자는 이미 익숙한 방식으로 시스템을 사용할 수 있기 때문에 새로운 기능을 배우는 데 드는 시간과 노력이 줄어든다.
• 사용 편의성 향상: 사용자는 시스템을 직관적으로 사용할 수 있기 때문에 작업 효율성이 높아진다.
• 사용자 만족도 향상: 사용자는 익숙하고 사용하기 쉬운 시스템을 사용하면서 만족도를 높일 수 있다.
• 브랜드 인지도 향상: 일관된 디자인 언어를 사용하면 브랜드 인지도를 높이고 브랜드 이미지를 강화하는 데 도움이 된다.
• 개발 및 유지 보수 비용 절감: 표준화된 디자인 요소를 사용하면 개발 및 유지 보수 작업이 간소화되어 비용을 절감할 수 있다.

예시

• 좋아요, 즐겨찾기, 장바구니와 같은 아이콘은 대부분의 플랫폼에서 동일한 디자인을 사용

• 스마트폰의 백화살표 버튼은 사용자가 이전 화면으로 돌아갈 수 있도록 하는 표준적인 디자인 요소

에러 방지

에러 방지는 UI/UX 디자인에서 사용자가 시스템을 사용하는 동안 문제가 발생하지 않도록 하는 것이 중요한 원칙이다.

에러를 경험하면 시스템 사용을 중단할 가능성이 높아진다. 따라서 에러를 최소화하도록 디자인하는 것은 사용자 만족도를 높이는 데 매우 중요하다.

에러 유형
사용자 실수: 사용자의 실수로 인해 발생하는 에러
시스템 오류: 시스템 자체의 문제로 인해 발생하는 에러

에러 방지 전략

• 명확하고 간결한 디자인: 사용자가 시스템을 쉽게 이해하고 사용할 수 있도록 명확하고 간결한 디자인을 사용
• 입력 오류 방지: 사용자가 입력 오류를 하지 않도록 입력 폼을 신중하게 디자인
• 데이터 유효성 검사: 사용자가 입력한 데이터의 유효성을 검사하여 잘못된 데이터가 입력되지 않도록 한다.
• 피드백 제공: 사용자의 행동에 대한 명확한 피드백을 제공하여 시스템이 어떻게 작동하는지 이해할 수 있도록 한다.
• 도움말 및 문서 제공: 사용자가 시스템을 사용하는 데 도움이 되는 도움말 및 문서를 제공
• 테스트 및 반복: 시스템을 철저히 테스트하고 사용자 피드백을 반영하여 에러를 지속적으로 개선한다.

예시

• 사용자의 주소와 전화번호를 입력하는 폼에서 자동으로 하이픈(-)을 삽입

• 잘못된 형식의 전화번호를 입력하면 알려주는 기능

• 웹 브라우저에서 사용자가 잘못된 URL을 입력하면 오류 메시지를 표시하고 올바른 URL 입력 방법을 알려주는 기능

• 컴퓨터 운영 체제에서 중요한 시스템 파일을 삭제하려고 할 때 사용자에게 확인 메시지를 표시하는 기능

기억보다는 인식

사용자가 시스템을 사용하는 동안 기억할 필요 없이 현재 상황을 바로 인지할 수 있도록 하는 것을 의미한다.

사용자는 많은 정보를 기억해야 하는 것은 부담스럽고, 기억력이 제한적이기 때문에 쉽게 오류를 발생시킬 수 있다.

기억보다 인식시키는 방법

• 사용자 학습 곡선 단축: 사용자가 시스템을 배우는 데 드는 시간과 노력이 줄어든다.
• 사용 편의성 향상: 사용자가 시스템을 직관적으로 사용할 수 있기 때문에 작업 효율성이 높아진다.
• 사용자 만족도 향상: 사용자는 익숙하고 사용하기 쉬운 시스템을 사용하면서 만족도를 높일 수 있다.
• 사용자 오류 감소: 사용자가 기억하지 않고도 현재 상황을 인지할 수 있기 때문에 오류 발생 가능성이 줄어든다.

예시

• 네이버 웹툰에서 지난번에 읽었던 회차를 표시해 주는 기능

• 스마트폰의 현재 위치를 지도에 표시해 주는 기능

• 웹 브라우저에서 현재 열려 있는 탭을 표시해 주는 기능

• 텍스트 편집기에서 현재 커서가 있는 위치를 강조 표시해 주는 기능

유연성과 효율성

UI 디자인에서 유연성과 효율성은 사용자들이 자신의 필요와 선호에 맞게 시스템을 사용할 수 있도록 하는 것을 의미한다.

유연성과 효율성을 주는 방법

1. 사용자 유형 고려

• 초보 사용자: 명확한 안내와 도움을 제공하여 시스템 사용을 쉽게 한다.
• 숙련된 사용자: 단축키, 고급 설정 등을 제공하여 작업 속도를 높일 수 있도록 한다.

2. 다양한 상황 대처

• 다양한 입력 방식 지원: 마우스, 키보드, 터치스크린 등 다양한 입력 방식을 지원한다.
• 개인화 기능 제공: 사용자가 테마, 언어, 설정 등을 개인화할 수 있도록 한다.
• 접근성 고려: 장애를 가진 사용자도 시스템을 쉽게 사용할 수 있도록 한다.

3. 효율적인 작업 지원

• 반복적인 작업 자동화: 자주 사용하는 작업을 자동화하여 사용자의 노력을 줄인다.
• 단축키 제공: 주요 기능에 대한 단축키를 제공하여 작업 속도를 높인다.
• 피드백 제공: 사용자의 행동에 대한 명확한 피드백을 제공하여 시스템 작동 방식을 이해할 수 있도록 한다.

예시

• 메뉴: 초보 사용자: 명확한 카테고리와 아이콘으로 구성된 메뉴 제공

• 숙련된 사용자: 단축키, 고급 설정 메뉴 제공

• 단축키: 자주 사용하는 기능에 대한 단축키 제공

• 개인화: 테마, 언어, 설정 등을 개인화할 수 있는 기능 제공

• 접근성: 화면 읽기 프로그램, 자막 등을 지원

심플하고 아름다운 디자인

관련이 적은 요소나 당장 필요하지 않은 요소들을 모두 배제하고, 사용자의 주의를 핵심 요소에 집중시키는 것을 의미한다.

사용자는 복잡하고 지저분한 디자인을 보면 혼란스러워하고 지루해할 수 있다. 따라서 간결하고 명확한 디자인을 사용하는 것은 사용자 경험 향상에 매우 중요하다.

심플하고 아름다운 디자인은 사용자 집중도 향상, 사용 편의성 향상, 미적 가치 제고, 유지 관리 용이하다.

예시

• 구글 검색: 간결한 검색창과 깨끗한 결과 페이지로 구성된 구글 검색은 사용자가 쉽게 정보를 찾을 수 있도록 디자인되어있다.
• 애플 제품: 애플 제품은 모두 심플하고 아름다운 디자인으로 유명합니다. 아이폰, 아이패드, 맥북 등은 불필요한 요소를 배제하고 사용자에게 집중할 수 있도록 디자인되어있다.
• 스위스 스타일 디자인: 스위스 스타일 디자인은 명확하고 간결한 형태, 균형 잡힌 구성, 깔끔한 색상 사용 등을 특징으로 한다.

심플하고 아름다운 디자인하는 방법

• 공백 활용: 공백을 적절하게 활용하여 디자인에 여유로운 느낌을 준다.
• 색상 사용 제한: 제한된 색상 팔레트를 사용하여 디자인에 일관성을 유지한다
• 타이포그래피: 명확하고 읽기 쉬운 글꼴을 사용한다.
• 일관성: 디자인 요소들의 크기, 색상, 스타일 등을 일관되게 유지한다.
• 음영 효과: 음영 효과를 적절하게 사용하여 디자인에 깊이감을 준다.

사용자를 위한 에러 인식 및 해결 지원

에러는 사용자에게 좌절감을 유발하고 사용 경험을 저하시킬 수 있는 주요 요소다. 따라서 시스템 디자인에서는 에러를 최소화하고 사용자가 쉽게 에러를 인식하고 해결할 수 있도록 지원하는 것이 중요하다.

사용자를 위한 에러 인식 및 해결 지원방법

1. 명확한 에러 메시지 제공

• 에러가 발생했을 때 명확하고 간결한 에러 메시지를 제공하여 사용자가 에러의 원인을 쉽게 이해할 수 있도록 한다.
• 기술적인 용어보다는 일반적인 용어를 사용하고, 가능한 경우 해결 방법을 제시한다.
• 유머나 긍정적인 메시지를 활용하여 사용자의 불편함을 최소화한다.

2. 시각적 표현 활용:

• 에러가 발생했을 때 빨간색 텍스트, 경고 아이콘, 화면 깜박임 등을 사용하여 사용자의 주의를 끌도록 한다.
• 에러 메시지와 함께 관련된 영역을 강조 표시하거나 애니메이션을 사용하여 사용자가 문제의 위치를 쉽게 파악할 수 있도록 한다.

3. 맥락적 정보 제공:

• 에러 메시지와 함께 현재 상황과 관련된 맥락적 정보를 제공하여 사용자가 상황을 이해하고 해결 방안을 모색할 수 있도록 한다.
• 예를 들어, 로그인 오류가 발생했을 때 사용된 아이디와 비밀번호를 다시 확인하도록 안내하는 메시지를 제공할 수 있다.

4. 해결 방법 제시:

• 가능한 경우 에러 메시지와 함께 해결 방법을 제시하거나 사용자를 도움이 되는 문서나 웹사이트로 안내한다.
• 단계별 해결 절차를 제시하거나 스크린샷을 제공하여 사용자가 쉽게 따라할 수 있도록 한다.
• 숙련된 사용자를 위한 고급 해결 방법도 함께 제공할 수 있다.

5. 예방 및 재발 방지:

• 사용자 입력 오류를 방지하기 위해 입력 형식을 제한하거나 입력 오류 검사 기능을 제공한다.
• 시스템 오류를 방지하기 위해 정기적인 테스트와 업데이트를 진행한다.
• 사용자로부터 에러 보고를 수집하고 분석하여 개선점을 도출한다.

좋은 예시

• 토스 앱에서 송금 한도를 초과했을 때
  "송금 한도를 초과했습니다. 현재 한도는 XXXX원입니다."

• 구글 크롬에서 웹사이트에 접근할 수 없을 때
  "이 웹사이트에 접근할 수 없습니다. 네트워크 연결을 확인하거나 나중에 다시 시도하십시오."

나쁜 예시:

• 웹사이트에서 로그인 오류가 발생했을 때
  "로그인에 실패했습니다."

• 컴퓨터 프로그램에서 시스템 오류가 발생했을 때
  "오류가 발생했습니다. 프로그램을 종료하십시오."

도움말 및 문서화

사용자는 문제가 발생했을 때나 새로운 기능을 사용하는 방법을 배우고 싶을 때 도움말을 참조한다.

도움말 및 문서화의 주요 목적

• 사용자 교육: 사용자에게 제품이나 서비스의 기능과 사용 방법에 대한 정보를 제공하여 사용자 학습 곡선을 단축하고 사용 효율성을 높인다.
• 문제 해결 지원: 사용자가 문제를 해결하도록 돕고, 문제 해결 시간을 단축한다.
• 사용자 만족도 향상: 사용자에게 필요한 정보를 제공하여 사용자 만족도를 높인다.
• 고객 지원 비용 절감: 사용자가 스스로 문제를 해결할 수 있도록 도와 고객 지원 비용을 절감한다.

효과적인 도움말 및 문서화를 위한 주요 원칙

• 명확하고 간결한 정보 제공: 사용자가 쉽게 이해할 수 있도록 명확하고 간결한 언어를 사용.
• 정확하고 최신 정보 제공: 정확하고 최신 정보를 제공하여 사용자가 오해를 하지 않도록 함
• 적절한 구조 및 형식 사용: 사용자가 필요한 정보를 쉽게 찾을 수 있도록 적절한 구조와 형식을 사용
• 다양한 정보 제공 방식 활용: 텍스트, 이미지, 동영상 등 다양한 정보 제공 방식을 활용하여 사용자의 이해를 도움
• 검색 기능 제공: 사용자가 필요한 정보를 쉽게 찾을 수 있도록 검색 기능을 제공
• 사용자 피드백 반영: 사용자로부터 피드백을 수집하여 도움말 및 문서화를 지속적으로 개선

실제 예시

• 애플 제품: 애플 제품은 모두 사용자 친화적인 도움말 및 문서화를 제공한다. 사용자는 제품 설명서, 온라인 도움말, 지원 영상 등을 통해 제품 사용 방법에 대한 정보를 쉽게 얻을 수 있다.

• 구글: 구글은 다양한 서비스에 대한 방대한 도움말 및 문서화를 제공한다. 사용자는 구글 검색을 통해 원하는 정보를 쉽게 찾을 수 있다.