[UI&UX]사용자 친화 웹을 만드는 법

📱UI(User Interface)

사람들이 컴퓨터와 상호 작용하는 시스템을 의미한다 

화면상에 떠져 있는 그래픽 요소, 키보드, 마우스 등의 컴퓨터와 상호 작용하기 위한 물리적 요소들을 전부 UI라고 한다.

 

💻GUI(Graphical User Interface)

사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업환경을 의미한다.

우리들이 일반적으로 보는 화면들(운영체제의 화면, 어플의 화면, 브라우저의 화면)등 그래픽으로 이루어져 우리가 볼 수 있는 모든 요소들을 GUI라고 한다.

 

👨‍🦽UX(User Experience)

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

사용자 인터페이스와 별개로 사용자가 직간접적으로 이용하고 느끼면서 내리는 사용자만의 후기를 UX라고 한다 좋은 UI라고 해도 UX는 나쁠 수 있다.

 

📱UX  && 💻UI

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

 

❓How to make good UX?

유저에게 좋은 경험을 안겨 주고 싶다면 어떤 요소가 필요할까요?

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

그래프를 활용하여 UX를 얼마나 고려했는지, 혹은 사용자가 얼마나 좋은 UX를 경험했는지 평가하기 위한 척도로도 할인할 수 있습니다.

 

 

📋User Flow

사용자 흐름(UserFlow)은 사용자가 제품에 진입한 시점을 시작으로 취할 수 있는 모든 행동을 말합니다.

사용자가 제품에 진입한 시점을 시작으로 취할 수 있는 모든 행동을 뜻하며, 보통 아래의 이미지처럼 다이어그램을 그려서 정리.

 

 

❓why we use Flow?

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

 

❓How to draw?

📄element of flow

• 직사각형 : 사용자가 보게 될 화면 ( ex. 회원 가입 페이지, 로그인 페이지 … )
• 다이아몬드 : 사용자가 취하게 될 행동 ( ex. 로그인, 버튼 클릭, 업로드 … )
• 화살표 : 직사각형(화면)과 다이아몬드(행동)를 연결시켜주는 화살표

 

🕵UI/UX 사용성 평가

다음은 제이콥 닐슨의 10가지 사용성 평가 기준이다.

1. 시스템 상태의 시각화
   • 합리적인 시간 애네 적절한 피드백을 통해 사용자에게 진행 상황에 대한 정보를 항상 제공해야 한다.
     • ex) 로딩 중에 버퍼링 띄어주기
2. 시스템과 현실 세계의 일치
   •  내부 전문용어가 아닌 사용자에게 친숙한 단어, 구문 및 개념을 사용한다
     • ex) 시간 관련한 기능은 시계 모양과 비슷하게 제작
3. 사용자 제어 및 자유
   • 실수 시 현재 진행 중인 작업에서 벗어날 수 있는 방법 혹은 취소하는 방법을 명확하게 제공해야 한다.
     • ex) 삭제 직후에 취소할 수 있는 버튼이 잠시 나타난다.
4. 일관성 및 표준
   • 외부 일관성: 일관적인 사용자 경험을 제공하기 위해서 플랫폼 및 업계의 관습을 따른다.
     • ex) 잘 알려진 UI 디자인 패턴을 사용하는 것이 좋다.
   • 내부 일관성: 사용자가 혼란스럽지 않도록 제품의 인터페이스나 정보 제공에 일관성이 있어야 한다.
     • ex) 한 제품 내에 같은 인터페이스를 유지한다.(버튼 모양, 위치 등)
5. 오류 방지
   • 오류가 발생하기 쉬운 상황을 제거하여 사용자의 실수를 방지해야 한다.
     • ex) 계정 탈퇴 시, 정말 탈퇴할 것인지 다시 물어본다.
6. 기억보다는 직관
   • 사용자가 기억해야 하는 정보를 줄인다.
     • ex) 방문 기록으로 어제 보았던 사이트로 다시 들어간다.
7. 사용의 유연성과 효율성
   • 초보자와 전문가 모두에게 개별 맞춤 기능을 제공하도록 한다.
     • ex) 프로그램의 단축키를 직접 설정하여 사용할 수 있다.
8. 미학적이고 미니멀한 디자인
   • 인터페이스에는 관련이 없거나 불필요한 정보가 포함되지 않도록 한다.
     • ex) 홈페이지에 관련 정보들을 숨겨 놓는다.
9. 오류의 인식, 진단, 복구를 지원
   • 사용자가 이해할 수 있는 언어를 사용하여 문제가 무엇이었는지 정확하게 표시하고, 해결방법은 제안한다.
     • ex) 영어를 입력해야 하는 폼에 영어를 입력해야 함을 정확하게 알려준다.
10. 도움말 및 설명 문서
    • 상황에 따라 이해하는데 도움이 되는 문서를 제공해야 한다.
      
      • ex) 사진 아래에 설명하는 글이 있다.