[데이터 드리븐 서비스 기획 21일차]

2.  사용자 인터페이스 디자인 원칙

1) 인간의 인지특성에 근거한 디자인 원칙

4. 어포던스 활용

 

ex)

6. 애니메이션 어포던스 - 인터렉션 범주, 인지를 용이하게 할 수 있으면 애니메이션은 좋은 개념.

fade in, fade out -> 장바구니 넣었을 때의 어포던스로 하면 사용자가 몰라!

 

7. 소극적 어포던스

선택한거 제외하고 나머지는 죽어있는거(완전히 사라지진 않음, 색상 대비 중요)

 

8. 허위 어포던스(False)

버튼이 어려움. 각 컴포넌트간 간격.

사용자의 멘탈 모델과 일치하지 않는 버튼 디자인. 

 

5. 게슈탈트 원리 적용

 

ex)

1. 근접성의 원리 : 서로 가까이 배치된 요소를 떨어져 배치된 요소보다 관련성이 높은 것으로 인식하는 경향

ex) 프로필 디자인

2. 공통 영역의 원리 : 동일한 영역 내에 배치된 요소를 그룹화해 인식하는 경향

ex) 페이스북은 선과 면을 활용해 게시글과 댓글 영역 사이를 구분

3. 유사성의 원리 : 유사한 시각적 특성을 공유하는 요소들을 관련성이 높은 것으로 인식하는 경향

ex) 혼자만 다른 색상으로 표현될 경우 - 무서워서 안누름. 

빨간색으로 해놨을 때 그냥 강조하려고 한건데 사용자는 안누를수도..

4. 폐쇄성의 원리: 기존에 존재하는 요소들을 토대로 완성되지 않은 형태를 하나의 완성된 형태로 인식하는 경향

아이콘이 안에 들어가있음.

5. 대칭성의 원리 : 거리에 관계없이 서로 대칭되어 있는 요소들을 함께 속해있는 것으로 인식하는 경향

6. 연속성의 원리 : 요소들이 방향성을 가지고 연속되어 있을 경우 하나의 연결된 형태로 인식하는 경향

살짝 씹히게 둬야 함. 그래야 스와이프함. 

7. 공동운명의 원리 : 서로 같은 방향으로 이동하는 요소를 다른 방향으로 이동하거나 움직임이 없는 요소보다 관련성이 높은 것으로 인식하는 경향

뭔가 있을 때 그루핑해서 잘 정리해줘야 한다.

 

1) 사용자 인터페이스 설계 지침 유형

1. 가시성의 원칙

progress bar

2. 조작결과 예측의 원칙

3. 일관성의 원칙

장바구니가 오른쪽 위에 있는게 원칙, 햄버거 아이콘이 왼쪽 위

넷플릭스 - 조작해야 하는 버튼 : 빨간색

- 외부일관성 : 사용자가 받아들이는 무언가, 사용자가 장바구니를 오른쪽 위라고 인식하고 있으니까 오른쪽 위에 둔다던가.

4. 단순성의 원칙

핵심적인 요소들만 배치

5. 지식 배분의 원칙

모바일 사용성의 개념을 잘 따라가는 개념

B2B 서비스 기획이면 레퍼런스를 못보고 기획해야될수도

 

6. 조작오류의 원칙

사용자가 오류를 쉽게 발견하고 수정할 수 있도록 디자인

 

7. 제약의 원칙

사용자의 실수를 방지하고 명확한 조작을 할 수 있도록 사용자의 선택지 제한 또는 행동 제약

날짜 선택 : 출발 날짜 선택하고 그 이전 날짜를 선택할 경우 -> 출발 날짜로 자동 재설정

 

8. 표준화의 원칙

일반화된 디자인(EX. 왼쪽 위는 장바구니) 유지하도록

 

9. 행동유도성의 원칙(Visual Affordance)

 

10. 접근성의 원칙

국가, 영어로 되어있는데 한국어로 바꾸시겠어요?

 

 

 

3. 사용자 인터페이스 평가 원칙

📍 휴리스틱

📍  허니콤

1) 휴리스틱에 근거한 사용자 인터페이스 평가 원칙

1. 휴리스틱 평가 이해

1) 정의

합리적인 판단 

 

포트폴리오:

어떤 서비스가 있는데 휴리스틱 기반으로 영화앱(예시) 쫙 평가 -> 평균 내보고 어떤게 부족하고 개선점 내는것

 

엑셀로 점수 매기기

 

2) 허니콤에 근거한 사용자 인터페이스 평가 원칙

1. 허니콤 모델의 이해

1) 정의

- 간단하고 명료한 7가지 단어로 사용자 경험 디자인의 다양한 측면을 정의하고 평가할 수 있는 도구

- 사용자 경험을 의미있고 가치있게 만들기 위한 핵심적인 요소를 다룸.

 

2) 피터모빌의 허니콤 모델

Acessible : 고객에 장애인 없으면 빼도 됨.

 

이거 진행한다하면 시간을 오래 잡아야 함.

1. 설문지 인터뷰지 작성

2. 설문 결과를 분석해야 함.

 

지속적으로 우리가 만든 서비스의 진척도 보고 싶을 때 많이 씀.

 

설정이 되면 기준값처럼 사용해도 됨. 맨 오른쪽 그림이 보고하기에 괜찮음.

 

5) 이점

 

6) 허니콤 모델 7가지 평가 요소

1. Useful : 얼마나 유용한가

2. Usable : 얼마나 쓰기 쉬운가

3. Desirable

4. Findable

삼성카드 - 그날 해결해야하는 이슈 해결 못해서 평일에 해결해야되는데 기간이 느려짐.

데스크탑에는 있는데 모바일에는 없는 기능. 

5. Accessible

6. Credible : 버튼 눌렀는데 10초 이상. 어느때는 에러가 뜨고 잘 안됨. 장바구니에 넣고 결제했는데 실패 -> 몇번 겪으면 안쓰고 싶음. 

7. Valuable

 

7) 허니콤 모델 적용 사례

질문지 항목에서 각 항목에 대한 질문을 잘 작성하는게 중요.

 

초등학생 조사할 때

1-2, 3-4, 5-6학년으로 나뉘어야 함. 

 

아이들은 같은 관심사 가지는 사람들과 만나는거 되게 좋아함. 

 

아이는 신뢰 잘함. but 부모님이 신뢰 못함. 

부모님이 신뢰할 수 있는 인식을 개선, 우려하는 상황 방지해주는 방안 제공

 

문항이 문제가 있을 수 있으므로 정성적으로 문항 검토용 인터뷰 -> 설문지로 바꿔서 더 많은 표본에게 설문지만 돌림 -> 정량적 데이터도 얻음.

 

 

[참고] 사용적합성 엔지니어링

의료기기의 안전한 제조를 위해 '사용적합성 엔지니어링 프로세스' 적용하고 있음.

빅데이터와 ai기술 -> 법안

 

 

모바일 앱 UX/UI 기획 및 설계 실습

1. 앱 리서치와 앱 UX/UI 디자인 패턴의 이해

📕 패턴 랭귀지( 크리스토퍼 알렉산더 ): 건축디자이너, 건축의 패턴 발견.

📕 디자인 패턴(Gang of 4, GOF)

(출처. 위키백과 https://ko.wikipedia.org/wiki/%EB%94%94%EC%9E%90%EC%9D%B8_%ED%8C%A8%ED%84%B4)

소프트웨어 개발 방법에서 사용되는 디자인 패턴은 프로그램 개발에서 자주 나타나는 과제를 해결하기 위한 방법 중 하나로, 과거의 소프트웨어 개발 과정에서 발견된 설계의 노하우를 축적하여 이름을 붙여, 이후에 재이용하기 좋은 형태로 특정의 규약을 묶어서 정리한 것이다. 알고리즘과 같이 프로그램 코드로 바로 변환될 수 있는 형태는 아니지만, 특정한 상황에서 구조적인 문제를 해결하는 방식을 설명해 준다.

이 용어를 소프트웨어 개발 영역에서 구체적으로 처음 제시한 곳은 GoF (Gang of Four)라 불리는 네명의 컴퓨터 과학 연구자들이 쓴 서적 '디자인 패턴' (재이용 가능한 객체지향 소프트웨어의 요소 - 디자인 패턴)이다. 

 

2) 디자인 패턴의 이해

UI 디자인 패턴이라고 말하기. 코딩의 디자인 패턴과 충돌할 수 있음.(디자인 패턴이 상위 개념이라)

 

3) 디자인 패턴 분석 사례 1

상품 상세, 상품 상세 전체 이런게 왜 저 모습이어야할까. 

 

화면 분석하면서 문제점 찾고 이를 해결한 사례를 찾아서 해결해야 함. = 디자인 패턴 찾아서 감.

 

이런거 안씀. 

 

경쟁서비스 분석

경쟁서비스 모든 파트 다 비교. 가장 이상적인 케이스 분석하고 작업

 

사람들이 가치 가지는건 3개 페이지(게임플레이, 플레이완료, 로비)

 

앱을 5개 이상 분석하면 (UI) 디자인 패턴 보임

이정도면 베끼는 개념 아님. 걱정ㄴㄴ

 

2. 주요 플로우 설계와 앱 UI 디자인

📍 주요 기능

📍 과업

📍 목표

 

 

GOAL을 달성하기 위해 여러가지 태스크를 수행해야 GOAL 달성

이커머스 기본 디자인 패턴 => CGV 앱 개선

flow, goal, task, sub task 분석

 

화면으로 하는게 아니라 먼저 글로 써야 함.  or 플로우 차트

 

 

[실습] 블랙넛츠 상품결제하는 페이지 까지 가기

 

쿠팡

1. 쿠팡 초기 화면

2. 광고 푸시 알람 끄기

3. 상품 검색

4. 검색 화면

5. 정렬 화면

6. 판매량순 정렬 화면

7. 정렬 화면

8. 쿠팡 랭킹순

9. 상품 상세 화면

10.상품 옵션 선택

11. 상품 결제

 

단계 너무 많은 사람이랑 너무 적은 사람 비교

사람마다 Depth가 다를 수 있음.

 

3) SNS 앱 주요 목표/과업

1) SNS 앱의 특징

3단계로 진행되는데 2단계로 축소할 수 없을까? => 이런게 좋은 아이디어가 될 수 있음.

 

4) 주요 플로우 설계와 앱 UI 디자인

Task 분석

 

과정

goal -> task -> 경쟁 서비스 분석