[UX/UI] 디자인 노하우

yii·2023년 11월 10일

UX/UI

목록 보기
3/11

어떻게 도출된 기능을 구조화해야 할까

사용자 요구사항 - 사용자가 원하는 것을 디자인에서 어떻게 지원할 것인가?
비즈니스 요구사항- 비즈니스의 목표를 디자인에서 어떻게 지원할 것인가?
기술적 요구사항- 기술적 목표 또는 한계를 디자인에서 어떻게 지원할 것인가?

요구사항 정의서, 기능 정의서 등으로 정리


정보구조(IA, Information Architecture)

  • 제품 내의 정보를 조직화하고 구조화하는 것
  • 주로 사용자들이 그들이 원하는 정보를 효과적으로 찾아내는데 초점을 맞춤

분류와 계층, 내비게이션, 검색, 레이블링

처음에는

  • IA를 바로 만들기 어려움
  • 때문에 먼저 유사 및 경쟁 제품의 IA를 벤치마킹하고
  • 유저 플로우를 만든 뒤 IA를 1차로만들고 다시 이 과정을 반복하는 것이 효율적

유저플로우 <-> 정보구조
(+벤치마킹)

분류와 계층을 만들기 위해 먼저

  • 사이트맵(Sitemap)을 작성
  • 제품의 대표 페이지들을 시각적으로 보여주는 것
  • 이를 통해 전체적으로 구조, 레이블, 네비게이션, 검색이 어떻게 구조를 이루는지 빠르게 파악 가능

사이트맵과 플로우차트의 다른 점

  • 플로우차트는 특정 사용자의 시나리오에 대한 흐름을 보여준다는 점에서 사이트맵과 다름
  • 사이트맵은 구조적인 부분을 보여줌!!


처음 만들 땐 벤치마킹으로
모달은 홈 이전 뜨는 화면
스플래시 - 선호 카테고리 - 알림 온/오프 - 사용법

상단 내비게이션

  • 알람, 검색

하단 내비게이션

  • 홈, 내 활동, 장바구니, 프로필, 도움말

참조 번호와 레이블

  • 사이트맵에선 참조 번호를 적어주는 게 좋음
  • 와이어프레임 및 비주얼 디자인 시 사이트맵의 어떤 부분인지 확인 가능
  • 개발자가 비주얼 디자인을 받았을 때 사이트맵의 어떤 부분인지 확인 가능
  • QC(품질관리) 부서에서 품질 체크가 용이하고 관련 문제를 기입하기 편함 (앱을 써보면서 문제 발생한 부분을 보다 쉽게 확인 가능)
  • 컨텐츠 운영 시 사이트맵의 어떤 부분에 들어가는 컨텐츠인지 확인 가능(파일명 확인, 어떤 컨텐츠가 어디에 사용되는지 확인)

검색엔진최적화(SEO, Search Engine Optimization)고려

  • 검색 엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 나올 수 있도록 하는 작업
  • 사이트맵은 이후 이 SEO를 고려해야함

    사이트맵은 xml로 등록시킴
    검색엔진에서 쉽게 찾을 수 있도록

어떻게 내비게이션을 만들어야 하는가

전체적인 유저플로우를 만들어보기

유저 플로우

  • 사용자가 의도한 목적을 달성하기 위해 거쳐야하는 일련의 단계를 시각화한 것

사용자 목적 (User Goal)

  • 여정 지도를 기반으로 사용자의 제품 사용 목적을 정의

테스크 플로우

  • 사용자가 목적을 달성하기 위해 해야할 것을 스크린 단위로 시각화


와이어 플로우 (Wird Flow)

  • 각 스크린 별로 상세한 레이아웃과 기타 필요한 요소들을 추가
  • 개발 구현을 위해 필요한 내용들을 추가 (에러 발생 상황, 정보 개수 등)

(sketch)
이전은 왼->오
주문하기 아래->위
모달 (첫 화면)
프로토타이핑으로 연결

sketch -> overflow(한계 보완)

https://overflow.io/?gad_source=1&gclid=CjwKCAiA-bmsBhAGEiwAoaQNmsWCOlrfID46OWb5USU_SsMD5ycDt9DVqs0BjsW-AkZngEyB4xvBehoCJvsQAvD_BwE

어떻게 레이블을 만들어야 하는가

카드 소팅 (Card Sorting) - 사용자들이 직접 그룹화

  • 사용자들을 대상으로 카드에 쓰여진 레이블 (Label)을 제시하고 직접 그룹화하게 하는 방법
  • 이를 통해 제품을 사용하는 사용자들의 해당 지식이 어떻게 구조화되어 있는지를 발견 가능
  • 정보 구조를 만들 때, 메뉴의 구조와 메뉴명을 만들 때 활용

  • 자주 사용하는 언어 (속옷/이너웨어)
  • 렌탈에서 차종을 먼저 선택하는지, 다른 옵션을 먼저 선택하는지

오픈(Open) 카드 소팅과 클로즈드 (Closed) 카드 소팅

  • 오픈 카드 소팅은 사용자가 레이블을 그룹화하고 그 그룹에 이름을 붙일 수 있음
  • 클로즈드 카드 소팅은 미리 이름이 정해진 그룹 안에 레이블 카드들을 넣음
  • 때문에 기존 정보구조를 평가할 때 사용하는 것이 좋음

    멘탈 모델
    (Mental Model)
  • 현실 세계에서 뭔가가 어떻게 작동하는지에 대한 사용자의 사고 과정을 설명하는 것
  • 예를 들어, 우리가 영화관에 영화를 보러 갈 때를 생각해 보면?
  • 사용자의 멘탈 모델을 발견해야 그들의 제품 사용 방법을 예측할 수 있음
    영화를 찾고, 예매하고, 예매할 영화 찾아보고, 주차장 찾아보는 등

어떻게 빠르게 사용성을 평가하고 분석할 수 있는가

평가(Evaluation)과 사용성 테스트(Usability Test)

  • 전문가가 직접 제품의 사용성과 전반적인 UX 품질을 측정하는 것은 평가
  • 전문가가 사용자를 대상으로 제품의 사용성과 전반적인 UX 품질을 측정하는 것은 사용성 테스트
  • 평가가 상대적으로 빠름

휴리스틱 평가(Heuristic Evaluation) - 체험적이고 경험적인

  • 제이콥 닐슨이 제시한 사용서 평가 방법론 중 하나
  • UI 디자인 시 사용성 문제를 조기에 발견해 내기 위한 방법
  • 사용성 전문가가 직접 수행하기 때문에 비용과 시간 측면에서 유리
  • 주로 제이콥 닐슨의 10가지 사용서 평가 기준을 사용
  • 평가 기준이 다양함
  • 익숙해지면 제품을 사용했을 때 어떤 기준에 위배되는지 파악

휴리스틱 평가 시 주의 사항

  • 사용자와 상관없이 진행되기 때문에 사용자 조사 및 사용성 테스트를 대체해서는 안됨
  • 평가자가 제대로 평가 기준을 숙지하지 못하면 잘못된 결과를 초래할 수 있음

적절한 평가자 수

  • 5명 내외가 좋음, 이때 비용 대비 이익률이 좋음
  • 5명의 평가자를 통해 사용성 문제의 약 75%를 파악 가능 (시간과 비용을 고려했을 때)

1) 제품 상태의 가시성

  • 제품은 항상 합리적인 시간 내에 적절한 피드백을 통해 사용자에게 현재 상황에 대해 알려야 한다
    ex 진행 상황, 업로드 상황 (progress bar)

2) 제품과 사용자 현실 세계의 조화

  • 제품은 제품 지향적인 용어보다는 사용자에게 친숙한 단어 및 개념을 사용해야 한다
  • 정보를 자연스럽고 논리적인 순서로 표시하여 현실의 관례를 따르게 만들어야 한다
    ex Add to Cart

3) 사용자에게 자유와 주도권 제공

  • 제품은 사용자가 실수를 해도 언제든지 취소 또는 재실행할 수 있는 방법을 제공해야 한다
    ex 휴지통, 뒤로가기

4) 일관성과 표준성

  • 사용자가 혼란스럽지 않도록 제품이 사용하는 정보 표현 방법, 인터페이스 등이 일관성이 있어야 한다
  • 이를 위해 애플, 구글, 마이크로소프트 등은 디지안 가이드라인을 만들어 이를 따르도록하고 있음
    ex 메뉴바 위치, 제출 버튼 등

but

  • 대부분의 경우 일관성을 유지하는 것이 중요하지만 최근에는 사용자의 맥락이 더 중요
  • 사용자가 스마트폰을 매너 모드로 변경한 상태에서의 모닝콜은 설정했다면? -> 매너모드를 했어도 일어나 벨소리로 울리는 것이 더 중요

5) 오류 방지

  • 사용자가 실수할 수 있는 상황을 제거하여 미연에 사용자 실수를 방지해야 한다

6) 보는 것만으로도 이해할 수 있는 디자인

  • 사용자가 제품을 이용하는데 기억에 의존하지 않도록 직관적으로 디자인되어야 한다
  • 눈에 보이게 바로 사용할 수 있도록, 최근에 본 아이템 등

7) 유연성과 효율성

  • 제품은 초보자나 숙련자 모두 유연하게 사용할 수 있어야 한다
  • 다양한 기능을 쉽게 쓸 수 있도록

8) 심미적이고 단순한 디자인

  • 제품은 불필요한 정보를 배제하여 가능한 단순하고 미학적으로 아름다운 디자인을 제공해야 한다.
  • 사용자가 제품을 사용하는 방법을 one way로 알 수 있도록

9) 사용자가 오류를 인식하고 진단하고 복구할 수 있도록 지원

  • 제품을 사용하는 사용자들이 스스로 상황을 인식하고 대처할 수 있는 방법을 제공해야 한다

10) 도움말과 설명서

  • 제품은 도움말 , 매뉴얼 등을 제공하여 사용자가 쉽게 사용할 수 있도록 해야 한다

어떻게 휴리스틱 평가를 해야할까

ex 저장이 안된다거나, 결제가 눌렸거나

어떻게 경쟁 및 유사 제품을 벤치마킹할 수 있을까

벤치마킹
- 측정의 기준이 되는 대상을 설정하고 그 대상과 비교 분석을 통해 장점을 따라배우는 행위

비즈니스 - 린 캔버스
정보구조 - 사이트맵, 레이블, 내비게이션, 검색
사용성 - 휴리스틱 평가, 태스크 완료 시간 측정, SEQ

휴리스틱 평가를 통한 벤치마킹

  • 동일한 태스크를 진행하면서 발생한 사용성 문제를 비교 분석

태스크 완료 시간 측정을 통한 벤치마킹

  • 동일한 태스크를 완료하는데 걸리는 시간을 측정하여 비교 분석
  • 전문가가 직접 평가하거나 사용자를 모집하여 테스트

SEQ(Single Ease Question)을 통한 벤치마킹

  • 동일한 태스크를 완료한 후 전반적으로 얼마나 어렵거나 쉬웠는지를 비교 분석
profile
프론트엔드 개발자

0개의 댓글