제로베이스

1주_3일차

외외 2024. 4. 4. 23:34

< 퍼소나(persona) >

퍼소나(persona)

우리 제품에 대한 일반적인 혹인 타겟 유저에 대한 정의

대표 사용자의 니즈를 표현한다

 

퍼소나를 사용하는 이유

1. 대표 사용자를 만들어 우리의 사용자가 누구인지 정의 할 수 있다

2. 선택과 집중의 기준이 된다 : 모든 사용자의 모든 니즈를 만족하는 mega service는 없다

3. 디자인 의사결정과 커뮤니케이션에 유용하다 : '왜' 이러한 디자인 결정을 내려야 하는지에 대한 기준이 된다

4. 사용자의 마음, 시선 등 사용자의 관점에서 바라보는 촉매제가 된다

 

퍼소나 제작 방법

 

1. Define a target user type

주요 사용 시나리오 유즈케이스를 커버 할 수 있는 '대표 퍼소나 타입'을 정한다

각 퍼소나 마다의 핵심 니즈를 한 문장으로 작성한다

2. Bio

사용자 조사 결과를 기반으로 퍼소나를 이해할 수 있는 기본 정보를 작성한다

이때 서비스 사용과 관계없는 정보는 생략할 수 있다

3.Needs and frustrations

퍼소나의 주요 행동 패턴과 특성을 이해할 수 있는 '핵심니즈'와 '불편해 하는 것'을 작성한다

4.Repeated or missing fact check

중복되어 작성되어 있거나 사용자의 행동특성 중 누락된 내용이 없는지 확인한다

5.Add personality

개인 선호도, 기술 사용 능력 등 개인의 특성이 표현되는 정보를 추가한다

6.Additional info

사용자 연상에 도움이 되는 예시, 이미지나 우선순위는 낮으나 참고가 될 수 있는 정보 등을 추가한다


< 디자인 컨셉(Design concept) >

디자인 컨셉 

스케치, 이미지 또는 텍스트로 이루어진 핵심 아이디어

 

디자인 컨셉을 하는 이유

  • 스토리를 기반으로 제품의 방향성을 시각화
  • 만들고자 하는 제품의 예상도
  • 이해관계자와 시장의 반응을 미리 확인
  • 만들고자 하는 제품의 예상도
  • 커뮤니케이션을 위한 아이디어의 시각화

디자인 컨셉에서 고려해야 할 점

  • 표준 등에 대한 위반 여지는 없는가
  • 요구사항은 잘 반영될 수 있는가
  • 구현 가능한가
  • 디자인 컨셉에 부합한가
  • 스타일 리뷰

UI디자인 컨셉

  • 목표(Goal)
  • 범위(Scope)
  • 정황(Context) : 어떤 이야기로부터 이런 컨셉이 나왔는지
  • 전략(Key feature)

UI design concept document

  • 무엇을 만드는가
  • 어떻게 만들것인가
  • 왜 만들어야 하는가
  • 정보구조
  • 컨셉디자인

UI design concept map

컨셉을 중심으로 사고를 확장하고 무엇이 중요한지 파악

마인드맵과 유사

 

Concept triangle thinking


< 정보구조설계(Information Architecture Design) >

정보구조설계

애플리케이션 또는 웹사이트에서 제공하는 '정보와 기능'의 관계와 순서를 정의하는 것

 

정보 구조 디자인을 디자인 할 때 생각해야 하는 것

Discoveribility : 얼마나 정보를 찾기 쉽게 구성되어 있는가

Flexibility : 유연성. 언제든지 업데이트 되어도 안에있는 컨텐츠들이 형태를 오래 유지할 수 있는가

 

Broad structure 

  • 사용자의 의도가 명확한 경우
  • 전문가용
  • 제공하는 정보의 연관성이 낮고 정보량이 많은 경우

Narrow structure

  • 강조하고 싶은 메인이 있는 경우
  • 더 단순하게
  • 가볍고 캐쥬얼하게

< 카드 소팅(Card sorting) >

 

개방형 카드소팅

  1. 사용자를 섭외하여 테이블에 미리 준비한 메뉴 카드를 사용자에게 보여준다
  2. 사용자에게 '서로 어울린다고 생각하는 카드끼리 그룹핑 해주세요'라고 요청한다
  3. 그룹핑이 끝나면 사용자와 함께 각 그룹에 해당하는 이름을 정의한다

메뉴카드 준비 > 그룹핑 > 그룹 이름 정하기

 

폐쇄형 카드소팅

  1. 사용자를 섭외하여 테이블에 미리 준비한 메뉴카드와 그룹이름을 사용자에게 보여준다
  2. 사용자에게 '각 카드를 정해진 그룹에 따라 분류해주세요'라고 요청한다
  3. 그룹핑이 끝나면 사용자에게 이렇게 분류한 이유와 그룹 이름울 변경할 수 있다면 어떻게 변경하고 싶은지 물어본다

메뉴카드 및 그룹 준비 > 그룹에 따라 메뉴카드 분류하기 > 그룹 이름 정하기

 

카드소팅의 장점

 

1.사용자의 멘탈모델을 엿볼 수 있다

카드 소팅은 사용자가 각 정보를 어떤 속성으로 이해하고 있는지 확인할 수 있는 강력한 도구이다

동시에 메뉴 이름(label)이 이해하기 쉽게 정의되어 있는지도 확인할 수 있다

 

2.정보구조를 User friendly하게 개선할 수 있다

해당 정보를 바라보는 사용자의 언어를 파악할 수 있다

메뉴명 뿐만 아니라 메뉴간의 계층관계(어떤 메뉴가 어떤 메뉴를 포함해야 하는지)에 대한 정보를 파악 가능하다

 

3.다양한 가능성 확인 

테스트를 5번 하면 5개의 다른 형태의 정보를 얻을 수 있다

이를 바탕으로 다양한 가능성 속에서 가장 일반적이고 이해가 쉬운 형태를 찾아갈 수 있다

 


< 인터페이스 디자인(User Interface Design) >

사용자가 시스템을 통해 과업을 달성하기 위해 '조작하는 영역'을 디자인 하는 것

 

디자인 환경

디자인이 반영되는 플랫폼의 경우 '디자인적 제약', '기술적 제약'이 발생할 수 있으며 '지속 가능한 디자인'을 위해 반드시 고려되어야 한다

 

1. 디자인 고려요소

  • Design system
  • Design language
  • Design Guideline

2. 기술적 고려요소

  • 구현 가능성(Implementation Possibility)
  • 유지 가능성(Maintenance)
  • 사용성(Usability)

3. 하드웨어 조건

 

반응형 디자인

1. Responsive Design : 기기의 화면 사이즈에 따라 UI 구조가 자동으로 변환

2. Adaptive Design : 기기의 화면 사이즈(웹, 모바일 등) 마다 별개로 디자인 함

 

기업에서 Adaptive Design을 많이 사용하는 이유

환경에 따라 알맞고 최적화된 화면을 만들 수 있기 때문이다

 

디자인 시스템

디자인 언어를 실제 디자인에 반영하기 위한 '표준 가이드라인' 또는 '라이브러리'이다

 

디자인 시스템의 구성

  • 디자인 컨셉(Concept)과 원칙(Principles)
  • 색상(Color)
  • 아이콘(Icon)
  • 폰트(Font)
  • 레이아웃(Layout)
  • 콤포넌트(Component)

인터페이스 디자인을 시작하기 위해 필요한 것

  • 요구사항 정의(Requirement definition)
  • 요구사항 정의서
  • JIRA(소프트웨어) 사용

1.우선순위 정의

아이디어 도출하기 '어떻게 사용자를 만족시킬까'

> '어떤 아이디어가 좋은 아이디어일까'를 생각하며 아이디어 평가하기

> 개발 우선순위 정하기 '어떤 기능부터 가장 빨리 사용자에게 제공 해야 할 까'

2.세부 디자인 기획

  • 디자인 목표(Design Goal)
  • 디자인 범위(Scope)
  • 고려사항(Consideration)
  • 기능(Features)

UI의 흐름

기획에 따른 UI플로우 작성 > 리뷰 > 리뷰결과를 반영하여 디자인


UI 기초 실습!

 

이번 수업을 들으면서 느낀점은

강의에서는 분명 다른 내용들을 설명하고 있지만 비슷한 내용을 반복하는 느낌이었다

디자인 기획의 목표와 범위를 명확하게 정해야하고 무조건 사용자의 니즈를 고려하여 생각하기 그리고 팀원들의 리뷰를 통해 만족스러운 UI프레임을 만들고 디자인 해야한다는 것이다

이 과정을 나도 잘 할 수 있었으면 좋겠다! 그러기 위해선 많이 생각하고 많이 해 봐야겠지

앞으로 남은 영상들도 열심히 보고 공부해야겠다