UI란 사람들이 컴퓨터와 상호 작용하는 시스템
화면상의 그래픽UI(GUI)이외에도 키보드,마우스,스마트폰 버튼 등 물리적 UI도 존재함
프론트엔드 개발자로서의 UI는 GUI를 의미하는 경우가 많다.
위 패턴 외에도 다른 다양한 패턴들이 있음.
추천사이트 - https://ui-patterns.com/patterns
Margin
화면 양쪽의 여백
Column
콘텐츠가 위치하게 될 , 세로로 나누어진 영역
(표준적으로는 휴대폰에서 4개, 태블릿에서 8개, PC에서는 12개)
Gutter
Column 사이의 공간, 콘텐츠를 구분하는데 도움
(Gutter는 아무리 넓어도 컬럼 너비보다는 작게 설정 하는게 좋다.)
추천사이트 - https://m2.material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-margins
UX란 사용자가 어떤 시스템, 제품, 서비스를 직•간접적으로 이용하면서 느끼고 생각하는 총체적 경험
어려운말이지만, 아무리 보기가 좋아도 , 직접적인 성능이 안좋으면 사용자 경험은 낮을수있고,반대로 아무리 좋은 성능이여도 쓰기어려우면 사용자 경험이 좋다고 할 수 없다.
UX는 UI를 포함한다.
하지만, 좋은 UX가 좋은 UI를 의미하거나, 좋은 UI가 항상 좋은 UX를 보장하지는 않는다.
(상관관계에는 있을 수 있으나 , 인과관계에는 연결되지 않는다.)
UI는 물리적 / 그래픽적 버튼일 뿐이지만 , UX는 UI를 사용자가 사용함으로써 생겨나는 경험이다.
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/