UIUX 학습일지 4일차 [디자인 컨셉, IA, 카드소팅, UI]

오예, 오예, 오예. 4일차다!!

하루하루를 엄청 알차게 보내는 기분이다. 완전 뿌듯하면서 이제까지 얼마나 시간을 허투로 보냈는가를 느낄 수 있었던...

이제 시간을 효율적으로 활용하는 방법을 터득해서 시간 관리 만렙인으로 거듭나야딍^___^

졸전도 성공적으로 마치고! 학교 수업도 열심히 듣고! UIUX 공부도 알차게 하고! 포트폴리오도 쌓고 이력서&자소서&면접 마스터하고! 원하는 곳에 내가 골라서 들어갈 수 있을 정도로 엄청 엄청 열심히 해야즤!

빠샤!!!!! 할 수 있다!!!

 

 

 

4일차 UXUI 학습일지

1. 과제

 

1-5. 최근 사용한 선물 내역 삭제하기(과제 1-4) 화면에 [선물을 보낸 사람에게 다시 선물하기] 기능을 추가하여 UI 설계하기

1-6. A/B Test ‘조사 계획서’작성: 이전 과제에서 디자인한 ‘다시 선물하기’ UI에 대해서 A/B 테스트를 실시한다고 가정하고, 비교 할 디자인(1페이지)을 1개 추가로 제작하고, 테스트의 목적/가설/변수/조사대상 등의 내용을 포함하는 조사설계서를 작성해봅니다. "

 

1-7. 책 '사용자를 생각하게 하지마'를 읽고 이 같은 안내 내용이 국내 사례에 적용된 사례를 찾아봅니다."

 

2.  과제 (프리스쿨 UI 실습디자인 25종 만들기)

Chapter 3 모듈 완료!! 우히힣

5일차는 쉬고 6일차에 Chapter 4 페이지 완료하기★

UI 실습디자인하면서 어느정도 폰트와 도형들의 사이즈감을 잘 익힐 수 있어 좋다.

예전에 처음 모바일 화면 디자인할 때 제일 작은 걸 한 6~8포인트로 한 적도 있는데 거의 최소가 12포인트군 호호

이렇게 또 알아갑니다!

그리고 실무에는 선 말고 면으로 만드는 것과 간격이나 도형 사이즈를 짝수로 맞춰야 한다는걸 알게 됐당.

✅폰트 : 보통은 제~~~~일 작은 사이즈가 12포인트 정도. 아주 가끔 10도 나오는듯(캡션에)

✅짝수

✅면으로 디자인

 

3.  강의

3-1.  강의 계획

1)UX 이론 / 기초

Chapter 5. 디자인 컨셉과 정보구조

 

3)프리스쿨

 

3-2.  학습 내용 요약 및 느낀 점

▶UX 이론 / 기초

 

Chapter 5. 디자인 컨셉과 정보구조

 

5-1. 디자인 컨셉 Design Concept

✏️디자인 컨셉이란?

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

 

✏️디자인 컨셉을 정할 때 고려해야 할 상황

✅목표 Goal

Ex. 자주 주문하는 메뉴의 식당 중 가장 빨리 배달 가능한 가게 정보를 제공하여

사용자의 탐색시간을 줄이고 의사결정에 도움을 준다.

✅범위 Scope

Ex. 사용자 유입, 가맹점 상태 확인, 가장 주문이 적은 매장 정보 도출 (데이터 도출) + 사용자의 이전 주문 기록 [Back end]

사용자에게 보여지고 있는 UI [Front end]

❓ 데이터의 정확도? 실현 가능한지? 체크하며 범위 설정

✅정황 Context

Ex. 사용자가 앱을 실행켰을 때 우리의 컨셉이 반영된다

✅전략 Key feature

Ex. '지금 가장 빠른 배달'이 가능한 가게를 제공하는 특화된 서비스 제공

 

✏️디자인 컨셉 문서 작성

What? 무엇을 만들 것인가

How? 어떻게 만들 것인가

Why? 왜 만들어야 하는가

정보구조 : 이 서비스를 제공하기 위해는 ~이 필요하다. (필요 데이터 등)

컨셉이 보이는 이미지와 글 : UI 비주얼 등의 느낌, 업데이트라면 기존 UI와 어떻게 어울릴지

다이어그램 : 어떤 컨셉의 디자인을 할거다

컨셉 맵 : 우리가 추구하고자 하는 디자인 컨셉을 기점으로 퍼져나가는 형식 (우리의 컨셉을 중심으로 사고의 저변을 넓히는 것, 우리 서비스에 영향을 끼칠 수 있는 것이 무엇이 있는지, 중요도가 높은 관계를 알아보기 위해 등)

✅형식은 정해져있지 않음

 

✏️디자인 컨셉을 정할 때 생각할 것

서비스가 안정적으로 제공되려면 세 가지 요소 중 단 하나도 등한시되면 안된다.

 

✏️요약

✅컨셉 아이디어

1)컨셉 아이디어

2)키워드

3)핵심 가치

↓

✅발전

1)구체적으로 다듬기

2)기술 검토 (기술적으로 구현 가능한가)

3)비즈니스 검토 (우리에게 궁극적으로 도움이 될까)

↓

✅디자인 컨셉

1)서비스 구조

2)디자인 범위

3)핵심 행동/특징 (UJM or Story mapping)

 

 

5-2. 정보 구조 설계 (Information Architecture)

✏️정보 구조란

애플리케이션 또는 웹사이트에서 제공하는

정보와 기능의 관계와 순서를 정의하는 것이다.

 

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

⭐얼마나 정보를 찾기 쉽게 만드는가

⭐언제든지 업데이트해도 유연하게 수용할 수 있는 구조인가

 

✏️정보 구조의 종류

✅Broad structure (1depth, 2depth, depth가 얕음)를 사용하는 경우

1)사용 의도가 명확한 경우

2)전문가용(B2B)

3)제공하는 정보의 연관성이 낮아 그룹핑하는 게 어색한 경우

4)정보량이 많은 경우

등

 

✅Deep and Narrow structure (2depth 이상, depth가 깊음)를 사용하는 경우

1)공간제약이 있는 모바일에서 주로 사용

2)메뉴간의 연관성이 높은 경우

 

✏️사용자 검증 방법 : Card sorting

✅개방형 카드소팅

 

✅폐쇄형 카드소팅

✴️상위메뉴를 처음부터 제시 → 카드소팅 완료 후 상위메뉴 이름 변경

 

✏️카드소팅의 장점

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

✅사용자 친화적이게 구성할 수 있다.

✅다양한 가능성을 확인할 수 있다.

 

 

 

Chapter 6. 인터랙션 디자인

6-1. 인터페이스 디자인 - UI 컴포넌트와 레이아웃

✏️인터페이스 디자인이란? (User Interface Design = User Interaction Design)

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

 

✏️UI component = GUI를 구성하는 요소

⭐컴퍼넌트의 이름과 사용되는 경우를 알고 있는 게 도움이 됨

 

✏️디자인 시스템 Design system

=디자인 가이드라인 

우리의 회사의 제품을 디자인할 때는 이런 가이드라인을 따라야 한다!

 

✅Google Material Design Guideline

- ios앱 출시시 지정된 가이드라인을 따라야 하는데 그 안내 내용이 적혀 있음 (가능한지 여부를 확인할 수 있음)

- 개발 리소스 포함해서 제공함. 간단한 프로토타입 만들기에 유용

- 상단 내비게이션 리소스 탭에서 소스를 다운받아서 사용할 수 있음

- 경우의 수가 많기 때문에 가이드라인에 다 넣지 못하는 경우가 있음. 우리의 창의력 중요

 

✏️UI 레이아웃

 

 

6-2. 인터페이스 디자인 - 환경과 디자인 시스템

✏️디자인 환경과 디자인 시스템

디자인환경이란 디자인이 반영되는 플랫폼의 특성을 말한다.

여기에는 디자인적 제약(표준)과 기술적 제약이 발생할 수 있으며

지속 가능한 디자인을 위해 반드시 고려되어야 한다.

 

1) 디자인 고려 요소

✅Design System

✅Design Language

✅Design Guideline

(업데이트하거나 기존 플랫폼을 다시 구성할 경우) 원래 디자인 스타일을 잘 따르고 있는가

 

2) 기술적 고려 요소

✅Implementation possibility

✅Maintenance

✅Usability

구현 가능한가?

유지 보수(추후 업데이트)가 가능한가?

 

3) 하드웨어 조건 

인풋이 어디에 나올지에 따라 디자인이 달라짐

Responsive design VS Adaptive design은 디자인 초기에 고려

 

 

✏️디자인 시스템이란

디자인 언어를 실제 디자인에 반영하기 위한

표준 가이드라인 또는 라이브러리

 

✅디자인 시스템의 구성

- 디자인 컨셉 Concept과 원칙 Principles

- 색상 Color (컬레 팔레트)

- 아아콘 Icon

- 폰트 Font

- 레이아웃 Layout

- 콤포넌트 Components

 

✴️참고

구글 머터리얼 디자인 Material design

→ 리소스 페이지에서 다운로드

 

 

6-3. 인터페이스 디자인 - 프로세스와 요구사항 정의

✏️인터페이스 디자인 프로세스

1) 목표와 디자인 컨셉

- 목표

- 컨셉

- 스케줄

- 리소스

 

2) 디자인 환경

- 하드웨어 플랫폼 (어떤 기기 종류인지)

- 소프트웨어 플랫폼 (OS, 서비스 플랫폼)

- 디자인 시스템

- 범위 (전체, 전면 개편인지 or 업데이트인지)

 

⭐3) 주요 기능과 IA

- 요구사항 정의

- 기능 정의

- 컨셉 정의

- IA 정의

- 기술적 제한 점검

 

⭐4) UI 흐름과 와이어프레임

- 사용 사례 정의

- UI 흐름

- UI 디자인 (와이어프레임)

 

5) 개발자와 이해관계자의 검토

- 기능이 요구 사항을 충족할 수 있는지 검토

- 모든 UI를 구현할 수 있는지 검토

- 부작용은 없는지 검토

 

6) 디자인 개발

 

 

✏️요구사항 정의 Requirement definition

- 요구사항을 효과적으로 관리 할 수 있는 방법도 있음 → JIRA

- 모두가 원하는 걸 이해하는 방식이 다를 수 있기 때문에 요구사항 정의는 매우 중요하다.

 

✏️우선순위 정의

- 만들 때 난이도, 시장에 내놨을 때의 임팩트를 고려해 우선순위 정하기 (다른 방식으로도 분류 가능)

 

✏️세부 디자인 기획

- 디자인 목표

- 디자인 범위

- 고려사항

- 기능

 

 

6-4. 인터페이스 디자인 - UI 디자인

✏️UI 흐름 정의

와이어 프레임을 만들기 전에 UI플로우를 작성하는 게 좋음→ 그래야 소요 시간과 만들어야 하는 와이어프레임의 양을 알 수 있음

1. UI플로우 순서

UI 플로우 정의 > 범위 외 UI플로우 삭제 > UI 플로우 업데이트 > 리뷰 > UI플로우 리뷰 결과 반영

2. UI 디자인

UI디자인 : 디자인 시스템 사용하기 (google materal 디자인 키트 다운로드) > 키트 편집해서 구성 > 프로토타이핑

 

6-5. 인터페이스 디자인 - UI 평가

✏️UI 리뷰(검증) (사용성 평가)

✅사용성 USABILITY

1) 네비게이션 Navigation : 목표까지 잘 찾아갈 수 있는가

2) 친숙도 Familliarity : UI가 얼마나 사용자들에게 친숙하게 만들어져 있는가 (제이콥의 법칙)

3) 일관성 Consistency : 규칙, 동일한 기능은 동일한 방식으로 제공되어야 한다

4) 에러 예방 Error Prevention : 위험성 있는 요소는 다시 재확인

5) 피드백 Feedback

6) 시각적 명료성 Visual Clarity : 우리의 의도대로사용자에게  정확하게 전달하는가

7) 유연성 Flexibility

8) 효용성 Efficiency : 최종적으로 사용자에게 실질적인 이익을 전달하는가

 

✏️UI 리뷰(검증) (사용성 평가)

✅실시간 오류 확인 피드백

✅한번에 너무 많은 정보 X

✅에러시 명확한 이유 제공

 

✏️예외 케이스 디자인

✅극단적인 케이스의 사용자를 고려Ex. 너무 전문가라던지, 한번도 사용해본 적 없는 초보자 등

✅파일 이름이 너무 길어서 테이블에 다 표시할 수 없을 때의 케이스도 고려