1 minute read

2022.12.20

💡 User Interface(UI)/User Experience

💡 UI: 사람들이 컴퓨터와 상호작용하는 시스템 (화면상 그래픽, 키보드, 마우스 등) 💡 Ux: 사용자가 어떤 시스템, 제품, 서비스를 직-간접적으로 이용하면서 느끼고 생각하는 총체적 경험

프론트 엔드가 UX에 영향을 가장 미치는 것은 UI ➡️ 광고창, 글시체 그렇다면 항상 좋은 UI가 좋은 UX로 귀결? NO, 화려하지만 복잡해보일 수도 있음. 그러나, 나쁜 UI는 보통 나쁜 UX를 유발

💡 프론트엔드로서 고려할 것들

📌 UI 디자인 패턴

💡 UI 디자인 패턴: 자주 사용되는 UI 컴포넌트

모달, 토글, 태그, 자동완성, 드롭다운 등등 ➡️ 우리가 흔히 보는 UI를 사용하여 친숙하면서 직관적인 사용자 경험 제공. 아래 링크에서 더 많은 것을 탐색하고 사용.

그리드 시스템

웹 디자인 분야에서는 화면을 세로로 몇 개의 영역으로 나눌 것인가에 초점을 맞춘 컬럼 그리드 시스템을 사용하며 Margin,Colmn, Gutter 라는 세가지 요소로 구성된다.

  • Margin : 화면 양쪽의 여백을 의미한다. 너비를 px 같은 절대 단위를 사용해서 고정 값으로 사용해도 되고 vw, % 같은 상대 단위를 사용해 유동성을 주어도 좋다.
  • Column : 콘텐츠가 위치하게 될 세로로 나누어진 영역, 휴대폰 [ 4개 ], 태블릿 [ 8개 ], PC [ 12개 ]의 컬럼으로 나눈다.
  • Gutter : Column 사이의 공간으로, 콘텐츠를 구분하는데 도움을 준다.

스크린샷 2022-12-19 21 44 00

네이버 포털 창을 보고 구분해보자

자세히 알아보기 - 디자인 패턴 모음

📌 UX 평가 모형 (Peter Morvile 벌집 모형)

img

출처: ResearchGate 논문 발췌

7가지 기준으로 UX 평가

  1. 유용성(useful): 사용 가능? ➡️ 본연 목적을 제공하는가??
  2. 사용성(useable): 사용하기 쉬움? ➡️ 직관적인 서비스인가?
  3. 매력성(desirable) 매력적? ➡️ 제품이 매력적인가?
  4. 신뢰성(credible): 신뢰? ➡️ 결함을 속이지 않고 과장이 안 되어 있는 서비스 혹은 제품인가??
  5. 검색 가능성(findable): 찾기 쉬움? ➡️ 원하는 기능이나 정보를 쉽체 찾을 수 있는가?
  6. 접근성(accesible): 접근하기 쉬움? ➡️ 나이 성별 장애 여부를 떠나 누구든지 접근 가능한가?
  7. 가치성(valuable): 가치 제공? ➡️ 위 모든 요소를 총합하여 고객에게 가치를 제공하는가?

📌 UserFlow

💡 UI 디자인 패턴: 사용자가 제품에 진압한 시점에서 취할 수 있는 모든 행동

img

총 3가지로 구성

  • 사각형(display): 사용자가 보게 될 ‘화면’
  • 다이아몬드(decision): 사용자가 취하게 될 ‘행동’
  • 화살표(action): 화면과 행동을 연결

장점

  • 어색하거난 매끄럽지 않은 부분을 발경하여 수정 가능
  • 있으면 좋은 기능을 발견하고 추가하고, 업어도 상관 없는 기능을 발견하고 삭제 ⇒ 이를 통하여 사용자 흐름을 빈틈 없이 다듬어가면 UX개선으로 귀결

Comments