UI와 UX

binary·2022년 6월 29일
0

UI와 UX

  • UI, User Interface
    • 사용자가 컴퓨터와 상호작용하는 시스템
  • UX,User Interface
    • 사용자가 어떤 시스템, 제품 서비스를 직접적﹒간접적으로 이용하면서 느끼고 생각하는 총체적 경험
    • UX에 가장 많은 영향을 주는 것은 UI 다.

→ UI ⊂ UX

→ UI가 휼륭하다고 해서 UX가 좋다고 할 수 없고, UX가 좋다고 해서 UI가 휼륭하다고 할 수 없다.

→ UX가 좋지 않은 곳을 찾아내어 UI를 개선할 수 있고, UI를 개선하여 UX가 좋아지기도 한다.

⚙️ 컬럼 그리드 시스템(Column Grid System)

  • 화면을 세로로 몇 개의 영역으로 나눌 것인가에 초점
  • 질서있는 구조의 UI를 구성할 수 있게 도와줌
  1. Margin : 화면 양쪽의 여백

  2. Column : 세로로 나누어진 영역

    1. 보통 휴대폰 4개, 태블릿 8개, pc 12개로 나눔
  3. Gutter : Column 사이의 공간

    1. Gutter가 좁을수록 콘텐츠들이 연관성있어보이고, 넓을수록 각 콘텐츠가 독립적인 느김을 준다
    2. Gutter가 아무리 넓어도 Column 너비보다 작게 설정해야 함

🐝 피터모빌의 벌집 모형

  • 좋은 UX를 만들 때 고려해야 할 점
  1. 유용성(Useful)

    1. 서비스가 목적에 맞는, 사용 가능한 기능을 제공하고 있는가
  2. 사용성(Usable)

    1. 제품이 본연의 기능을 제공하는 것을 넘어서 사용하기 쉬운가
  3. 매력성(Desirable)

    1. 디자인이 보기 좋은가
    2. 이미지, 브랜딩 등 여러 요소들이 사용자에게 긍정적인 감정을 불러일으키는가
    3. 사용자들이 해당 제품이나 서비스를 이용하고 싶어 하는가
  4. 신뢰성(Credible)

    1. 사용자가 제품이나 서비스를 믿고 사용할 수 있는가
  5. 접근성(Accessible)

    1. 나이, 성별, 장애 여부 상관없이 누구든지 제품이나 서비스에 접근할 수 있는가
  6. 검색 가능성(Findable)

    1. 사용자가 원하는 기능이나 정보를 쉽게 찾을 수 있는가
  7. 가치성(Valuable)

    1. 위의 요소들을 총합하여 고객에게 가치를 제공하고 있는가

→ 가능한 모든 요소를 고르게 고려하는 것이 좋다.

→ 제품 사용자들이 공통적으로 중요하게 생각하는 요소를 찾아냈다면 그 요소에 집중하는 것도 UX를 효율적으로 개선하는 전략이다.

User Flow

  • 사용자 흐름, User Flow
    • 사용자가 제품에 진입한 시점을 시작으로, 취할 수 있는 모든 행동
    • 보통 다이어그램으로 그려서 정리한다.

🟪 ➡️ 🔶 User Flow 다이어그램 작성법

  1. 직사각형 : 사용자가 보게 될 화면
  2. 다이아몬드 : 사용자가 취하게 될 행동
  3. 화살표 : 화면(직사각형)과 행동(다이아몬드) 를 연결

❤️ User Flow 다이어그램을 그리면 좋은 이유

  • 사용자 흐름 상 어색하거나 매끄럽지 않은 부분을 발견하여 수정할 수 있음
  • 있으면 좋은 기능을 발견하여 추가할 수 있음
  • 없어도 상관없는 기능을 발견하고 삭제할 수 있음

👀 제이콥 닐슨의 10가지 사용성 평가 기준 (Jakob’s Ten Usability Heuristics)

  • UI/UX 사용성 평가 기준 중 하나
  1. 시스템 상태의 가시성 (Visibility of system status)

    1. 합리적인 시간 내에 적절한 피드백을 통해 사용자에게 진행 상황에 대한 정보를 항상 제공
      ex) 파일을 첨부할 때 파일 업로딩 상황 표시
  2. 시스템과 현실 세계의 일치 (Match between system and the real world)

    1. 내부 전문용어가 아닌 사용자에게 친숙한 단어, 구문 및 개념 사용
  3. 사용자 제어 및 자유 (User control and freedom)

    1. 현재 진행중인 작업에서 벗어날 수 있는 방법, 실수로 수행한 작업을 취소할 수 있는 방법, 탈출구를 명확하게 제공
      ex) 어떤 동작 후 취소하기 버튼이 잠시 나타나게 하기
  4. 일관성 및 표준 (Consistency and standards)

    1. 외부 일관성 : 사용자에게 익숙한 UI 제공, 관습적인 디자인 패턴 사용
    2. 내부 일관성 : 제품의 인터페이스(버튼 모양, 위치, 아이콘 크기), 정보 제공 등에 일관성 부여
  5. 오류 방지 (Error prevention)

    1. 오류가 발생하기 쉬운 상황 제거하여 사용자의 실수 방지
      ex) 수행한 동작을 재확인하는 창
  6. 기억보다는 직관 (Recognition rather than recall)

    1. 사용자가 기억해야 하는 정보 줄이기
      ex) 최근 검색어
  7. 사용의 유연성과 효율성 (Flexibility and efficiency of use)

    1. 초보자, 전문가 모두에게 개별 맞춤 기능을 제공
      ex) 단축키 설정
  8. 미학적이고 미니멀한 디자인 (Aesthetic and minimalist design)

    1. 인터페이스에는 관련이 없거나 불필요한 정보가 포함되지 않도록 함
  9. 오류의 인식, 진단, 복구를 지원 (Help users recognize, diagnose, and recover from errors)

    1. 사용자가 이해할 수 있는 언어로 문제가 무엇인지 표시하고 해결 방법 제안
  10. 도움말 및 설명 문서 (Help and documentation)

    1. 추가 설명 없는 게 가장 좋고, 상황에 따라 이해하는데 도움이 되는 문서 제공
      ex)앱 사용 간단 안내

0개의 댓글