UI / UX

◎UI/UX

• UI
  : 사람들이 컴퓨터와 상호작용하는 시스템

  ex) 휴대폰 => 숫자버튼, 방향버튼 등 물리적 UI, 화면터치 그래픽 UI

  -GUI( Graphical User Interface, 그래픽사용자 인터페이스)
  : 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업환경

• UX
  : 사용자가 어떤 시스템, 제품, 서비스를 직간접적으로 이용하면서 느끼고 생각하는 총체적 경험

  ex) 휴대폰 => 문제시 수리안되면 사용자 경험 안좋음, 홍보안되면 사용도 잘 안함

• UI와 UX의 관계
  => UX는 UI를 포함한다. UX>UI
  => 나쁜 UI는 나쁜 UX를 유발한다.
  => 둘은 서로 다르지만 뗴려야 뗄수 없는 관계이며, 서로를 보완하는 역할이다.

---

◎UI디자인

• UI디자인패턴 : 프로그래밍 시 자주 반복되어 나타나는 문제점을 해결하고자 , 과거의 다른 사람이 해결한 결과물을 재사용하기 좋은 형태로 만든 패턴
  • 모달
    : 기존에 이용하던 화면위에 오버레이 되는 창
    • 닫기버튼, 혹은 모달 범위 밖을 클릭하면 모달이 닫히는 것이 일반적이다.
    • 모달을 닫기 전에는 기존화면과 상호작용할수 없다.
  • 토글
    : on/off를 설정할 때 사용하는 스위치 버튼
    • 색상, 스위치의 위치, 그림자 들의 시각적 효과를 주어 사용자가 토글의 상태를 직관적으로 알수 있게 만들어야 한다.
  • 탭
    : 콘텐츠를 분리해서 보여주고 싶을 때 사용
    • 가로로 한줄로 배열된 형태가 가장 흔하다.
    • 각 섹션의 이름이 너무 길지 않아야한다.
    • 섹션의 구분이 명확해야 하며, 현재 어떤 섹션을 보고 있는지 표시해야한다.
  • 태그
    : 콘텐츠를 설명하는 키워드를 사용해서 라벨을 붙이는 역할
    • 콘텐츠를 분류할수 있고 관련 콘텐츠를 검색할 수 있다.
  • 자동완성
    : 사용자가 내용을 입력중일때 사용자가 입력하고자 하는 내용과 일치할 가능성이 높은 항목을 보여준다.
    • 너무 많은 항목이 나오지 않도록 개수를 제한하는 것이 좋다.
    • 키보드 방향키나 클릭 등으로 접근하여 사용할 수 있는 것이 좋다.
  • 드롭다운
    : 선택할 수 있는 항목들을 숨겨놓았다가, 펼쳐지면서 선택할 수 있게 해준다.
    • 드롭다운이 펼쳐지는 방식보다 사용자가 자신이 선택한 항목을 정확히 알수 있게 만드는 것이 중요하다.
  • 아코디언 : 접었다 폈다할수잇는 컴포넌트
    • 화면을 깔끔하게 구성하기 위해 사용
    • 트리구조나 메뉴바로 사용할 경우에는 상하관계를 표현하기 위해 사용, 콘텐츠를 담는 용도로 사용할때는 핵심내용을 먼저 전달하려는 목적
  • 캐러셀
    : 컨베이어벨트나 회전목마처럼 빙글빙글 돌아가면서 콘텐츠를 표시해준다.
    • 자동으로 돌아가거나, 사용자가 옆으로 넘기는 둘중에 선택
  • 페이지네이션
    : 번호를 붙여 페이지를 구분해주는 것
  • 무한스크롤
    : 모든콘텐츠를 불러올때까지 무한으로 스크롤을 내릴수 있는 것
  • GNB, LNB
    • GNB: 어느페이지에 들어가든 사용할 수 있는 최상위 메뉴
    • LNB : GNB에 종속되는 서브메뉴 혹은 특정페이지에서만 볼수 있는 메뉴
• UI레이아웃
  • 그리드시스템: 화면을 격자로 나눈 다음 그 격자에 맞춰 콘텐츠를 배치하는 방법
  • 컬럼그리드시스템(Column Grid System)
    : 웹디자인 분야에서는 화면을 세로로 몇개의 영역으로 나눌것인가에 초점을 맞춤
    1. Margin : 화면 양쪽의 여백
    절대단위=> 너비를 px사용해서 고정값 , 상대단위=> vw, %
    2. Column : 콘텐츠가 위치하게 될 세로로 나누어진 영역
    -표준적으로 휴대폰에서 4개, 태블릿에거 8개, PC에서 12개의 컬럼으로 나눔
    -Column은 상대단위를 사용하여 콘텐츠가 창크기에 맞춰서 크기가 변하도록 설정하는 것이 좋다.
    3. Gutter : Column 사이의 공간으로 콘텐츠를 구분하는데 도움
    -간격이 좁을수록 콘텐츠의 연관성이 있어보임
    -Gutter는 컬럼너비보다는 작게 설정

---

◎UX디자인

• 좋은 UX를 만드는 요소

  1. 유용성 (useful): 사용가능한가?
  2. 사용성 (usable): 사용하기 쉬운가?
     => 자주 쓰이는 UI패턴들은 사용자들에게도 친숙할 가능성이 높다.
  3. 매력성 (desirable): 매력적인가?
  4. 신뢰석 (credible) : 신뢰할 수 있는가?
     => 장기적으로는 믿을수있는 브랜드 이미지를 구축하는 것이 좋다.
  5. 접근성 (accessible) : 접근하기 쉬운가?
     => 고연령자를 위한 글자키우기, 시각장애인을 위한 음성안내 기능 등 모두가 비슷한 수준의 정보를 얻을 수 있도록 장비를 구비해 놓는 노력등이 접근성을 높여준다.
  6. 검색 가능성 (findable): 찾기쉬운가?
  7. 가치성 (valuable): 가치를 제공하는가?

• 사용자흐름(UserFlow): 사용자가제품에 진입한 시점을 시작으로 취할 수 있는 모든 행동

  • User Flow 다이어그램 작성법

    1. 직사각형: 사용자가 보게될화면 (ex. 로그인페이지 등 …)
    2. 다이아몬드: 사용자가 취하게 될 행동(ex. 로그인 등…)
    3. 화살표 : 직사각형(화면)과 다디아몬드(행동)을 연결시켜주는 화살표

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

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

---

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

1. 시스템 상태의 가시성
   : 합리적인 시간 애네 적절한 피드백을 통해 사용자에게 진행 상황에 대한 정보를 항상 제공해야한다.

   ex) 첨부를 위한 파일이 업로딩 상황을 표시한다.

2. 시스템과 현실 세계의 일치
   : 내부 전문용어가 아닌 사용자에게 친숙한 단어, 구문 및 개념을 사용한다.

   ex) 연주 애플리케이션의 모습이 실제 악기의 생김새와 유사하다.

3. 사용자 제어 및 자유
   : 실수시 현재 진행중인 작업에서 벗어날수 있는 방법 혹은 취소하는 방법을 명확하게 제공해야한다.

   ex) 삭제 직후에 취소할 수 있는 버튼이 잠시 나타난다.

4. 일관성 및 표준
   -외부일관성: 일관적인 사용자 경험을 제공하기 위해서 플랫폼 및 업계의 관습을 따른다.

   ex) 잘 알려진 UI디자인 패턴을 사용하는 것이 좋다.

   -내부일관성: 사용자가 혼란스럽지 않도록 제품의 인터페이스나 정보 제공에 일관성이 있어야한다.

   ex) 한 제품내에 같은 인터페이스를 유지한다.(버튼 모양, 위치 등)

5. 오류방지
   : 오류가 발생하기 쉬운 상황을 제거하여 사용자의 실수를 방지해야한다.

   ex) 삭제버튼을 눌렀을때, 정말 삭제할것인지 다시 물어본다.

6. 기억보다는 직관
   : 사용자가 기억해야 하는 정보를 줄인다.

   ex) 최근 검색 했던 단어목록을 확인할 수 있다.

7. 사용의 유연성과 효율성
   : 초보자와 전문가 모두에게 개별 맞춤 기능을 제공하도록 한다.

   ex) 프로그램의 단축키를 직접 설정하여 사용할수 있다.

8. 미학적이고 미니멀한 디자인
   : 인터페이스에는 관련이 없거나 불필요한 정보가 포함되지 않도록 한다.

   ex) 사용빈도가 적은 메뉴를 다 보여줄 필요가 없기에 필요할 때만 볼수있게 숨겨놓는게 좋다.

9. 오류의 인식, 진단, 복구를 지원
   : 사용자가 이해할 수 있는 언어를 사용하여 문제가 무엇잉ㄴ지 정확하게 표시하고, 해결방법은 제안한다.

   ex) 영어를 입력해야하는 폼에 영어를 입력해야함을 정확하게 알려준다.

10. 도움말 및 설명 문서
    : 상황에 따라 이해하는데 도움이 되는 문서를 제공해야한다.