4/13 - UI/UX

이준민·2023년 4월 13일
0

UI(User Interface)

UI란 사람들이 컴퓨터와 상호 작용하는 시스템
화면상의 그래픽UI(GUI)이외에도 키보드,마우스,스마트폰 버튼 등 물리적 UI도 존재함
프론트엔드 개발자로서의 UI는 GUI를 의미하는 경우가 많다.

UI 디자인 패턴

  • 모달(Modal)
  • 토글(Toggle)
  • 탭(Tab)
  • 태그(Tag)
  • 드롭다운(Dropdown)
  • 아코디언(Accordion)
  • 캐러셀(Carousel)
  • 페이지네이션(Pagination)
  • 무한 스크롤(Infinite Scroll, Continuous Scroll)
  • 네비게이션바(GNB (Global Navigation Bar), LNB (Local Navigation Bar))

위 패턴 외에도 다른 다양한 패턴들이 있음.
추천사이트 - https://ui-patterns.com/patterns

UI 레이아웃

그리드 시스템(Grid System)

  1. Margin
    화면 양쪽의 여백

  2. Column
    콘텐츠가 위치하게 될 , 세로로 나누어진 영역
    (표준적으로는 휴대폰에서 4개, 태블릿에서 8개, PC에서는 12개)

  3. Gutter
    Column 사이의 공간, 콘텐츠를 구분하는데 도움
    (Gutter는 아무리 넓어도 컬럼 너비보다는 작게 설정 하는게 좋다.)

추천사이트 - https://m2.material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-margins

UX(User Experience)

UX란 사용자가 어떤 시스템, 제품, 서비스를 직•간접적으로 이용하면서 느끼고 생각하는 총체적 경험
어려운말이지만, 아무리 보기가 좋아도 , 직접적인 성능이 안좋으면 사용자 경험은 낮을수있고,반대로 아무리 좋은 성능이여도 쓰기어려우면 사용자 경험이 좋다고 할 수 없다.

좋은 UX를 만드는 요소

  1. 유용성(Useful)
    => 제품이나 서비스가 목적에 맞는 , 사용 가능한 기능을 제공 하는지?
  2. 사용성(Usable)
    => 훌륭한 기능을 사용하기 쉬운지?
  3. 매력성(Desirable)
    => 디자인 or 브랜드 , 이미지 등 사용자에게 긍정적인 요소를 바탕으로 매력을 일으킬수 있는지?
  4. 신뢰성(Credible)
    => 사용자가 제품이나 서비스를 믿고 사용할 수 있는지?
  5. 접근성(Accessible)
    => 나이 , 성별 , 장애 등을 떠나 누구든지 접근할 수 있는지?
  6. 검색 가능성(Findable)
    => 사용자가 원하는 기능이나 정보를 쉽게 찾을 수 있는지?
  7. 가치성(Valuable)
    => 위에서 언급된 모든 요소들을 총합하여 고객에게 가치를 제공하고 있는지?

피터 모빌의 벌집 모형

UX/UI

UX는 UI를 포함한다.

하지만, 좋은 UX가 좋은 UI를 의미하거나, 좋은 UI가 항상 좋은 UX를 보장하지는 않는다.
(상관관계에는 있을 수 있으나 , 인과관계에는 연결되지 않는다.)

UX와 UI의 차이점

UI는 물리적 / 그래픽적 버튼일 뿐이지만 , UX는 UI를 사용자가 사용함으로써 생겨나는 경험이다.

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

1.시스템 상태의 가시성 (Visibility of system status)
ex)파일이 첨부를 위한 파일이 업로딩 상황을 표시합니다.(%)

2.시스템과 현실 세계의 일치 (Match between system and the real world)
ex)연주 애플리케이션의 모습이 실제 악기의 생김새와 유사합니다.

3.사용자 제어 및 자유 (User control and freedom)
ex) 삭제 직후에 취소할 수 있는 버튼이 잠시 나타납니다.

4.일관성 및 표준 (Consistency and standards)
4-1.외부 일관성 : 잘 알려진 UI 디자인 패턴을 사용하는 것이 좋음.
4-2.내부 일관성 : 사용자가 혼란스럽지 않도록 제품의 인터페이스나 정보 제공에 일관성이 있어야함
ex)한 제품 내에서 같은 인터페이스를 유지합니다.

5.오류 방지 (Error prevention)
ex)삭제 버튼을 눌렀을 때, 정말로 삭제할 것인지를 이용자의 의사를 확인하기 위해 다시 물어보기

6.기억보다는 직관 (Recognition rather than recall)
ex)최근 검색했던 단어 목록을 확인할 수 있다.

7.사용의 유연성과 효율성 (Flexibility and efficiency of use)
ex)프로그램의 단축키를 직접 설정하여 사용할 수 있습니다.

8.미학적이고 미니멀한 디자인 (Aesthetic and minimalist design)
ex)인터페이스에는 관련이 없거나 불필요한 정보가 포함되지 않도록 합니다.(필요할 때에만 볼 수 있게 숨겨놓는 것도 좋은 방법입니다.)

9.오류의 인식, 진단, 복구를 지원 (Help users recognize, diagnose, and recover from errors)
ex)영문 성(Family Name)을 입력해야 하는 폼에서는 한글이 아닌 영어를 입력해야 함을 정확하게 알려줍니다.

10.도움말 및 설명 문서 (Help and documentation)
ex)간단한 안내를 통해 검색에 도움을 줍니다.***

참고사이트 - https://www.nngroup.com/articles/ten-usability-heuristics/

profile
적응하는 개발자 이준민 입니다.

0개의 댓글