[내일배움캠프 본캠] 5/13 TIL

디자인카타

UXUI 디자인 입문 5주차 5-4~

UXUI 디자인 입문 6주차

 

 

디자인카타

https://ko.designus.design/topic/162

A 선택

84%의 사람이 A 선택

 

왜 해당 UI가 더 좋은지 작성합니다.

· 자동완성기능이 있어도 사용하지 않는데,  키보드 상단에 뜨는 것이 없어 시각적으로 깔끔하다고 대화에 집중하기 좋음

 

나머지 하나의 UI는 왜 별로인지, 왜 선택하지 않았는지 작성합니다.

· 추천 단어가 평소 사용하는 표현과 맞지 않으면 쓸 일 없고 화면만 차지해 불필요함

· 상황과 상대방에 따라 말투(반말. 존댓말 등)가 달라지기 때문에, 칩으로 넘기며 적절한 단어를 고르는 것보다 직접 타이핑하는 편이 더 빠르고 효율적일 것 같음

 

내 의견을 뒷받침 할 수 있는 실 사례가 있는지 찾아봅니다. 도전

질문이 ‘자주 사용하느냐’였기 때문에, 개인적인 사용 경험에 따라 A를 선택함.
댓글에서 타이핑이 느린 어르신이나 몸이 불편한 사용자에게는 유용할 수 있다는 의견을 보고,
만약 서비스가 노인층이나 전 연령을  주대상으로 한다면, 해당 기능을 기본 ON으로 하되 사용자가 OFF할 수 있도록 설정 옵션을 제공하는 것이 좋겠다고 생각함.

 

A: 2 B:2

B> 업무상 빠르게 응답을 주고받아야하는 사용자나 자판에 익숙하지 않은 고령자나 손을 쓰기 어려운 사용자가 간단한 답장을 보내는데에도 도움. 추천이 모호할 수 있기 때문에 사용자 맞춤형 AI추천 상세 문구들이 만들어지면 좋을 듯 하다

 

 

 

UXUI 디자인 입문 5주차 5-4~

UX/UI 심리학 법칙

▷ 심리학 법칙은 사람이 어떻게 행동하고, 왜 그런 행동을 하는지 설명

▷ 법칙의 힘

· 정량적, 정성적 데이터가 없는 초기 제품에 대한 의사결정의 근거가 되어줌

· 명확한 이론적 근거를 바탕으로 주장할 수 있고, 팀원들을 설득할 무기

· 스스로 좋은 디자인을 할 수 있도록 도와주는 체크리스트

· 사용자의 경험을 근원적으로 이해할 수 있도록 도움

제이콥의 법칙

· 사용자는 새로운 제품을 사용할 때 이미 알고 있는 익숙한 방식으로 작동하길 원한다는 법칙 

· 인터페이스를 익히는데 드는 정신적 에너지가 줄어들수록, 사용자가 목표 달성에 투자할 에너지가 늘어남

· 멘탈모델이 큰 영향

▷ 멘탈모델

· 자신이나 타인, 개념, 사물, 현상 등 다양한 대상에 대해 갖고 있는 생각 패턴

ex. 스마트폰 사진확대할 때 보통 두 손가락을 오므렸다 펼치는 동작> 디지털 제품 속 사진에 대한 보편적인 멘탈모델 중 하나

 

피츠의 법칙

· 터치 대상에 도달하는 시간은 대상까지의 거리와 크기와 함수 관계에 있다는 법칙

· 사용자가 인터랙션해야 하는 대상은 거리가 가깝고, 크기가 커야 사용성이 좋음!

▷ 터치 대상의 최소 권장 규격

가이드	규격(단위)
애플의 HIG	44 x 44 (pt)
구글 머티리얼 디자인	48 x 48 (dp)
WCAG 웹 접근성 가이드라인	44 x 44 (px)
닐슨노먼그룹	1 x 1 cm

▷ 스마트폰의 터치 정확성 영역   ▷Thumb zone

 

힉의 법칙

· 의사결정에 걸리는 시간은 선택지의 개수와 복잡성에 비례해 늘어난다는 법칙

· 사용자가 선택해야 하는 선택지가 늘어나면 결정까지 시간이 늘어남

▷ 인지 부하

· 정보를 학습하거나 문제를 해결하는 과정에서 필요한 인지적 요구량

· 인지 부하의 한계점을 넘어가는 순간 사용자 이탈

·  너무 추상적으로 단순화X , 정보의 양이 지나치게 적을 때에도 인지 부하 생김

단계적으로 노출

 

밀러의 법칙

· 보통 사람은 작업 기억에 7(+-2)개 정도의 항목밖에 저장하지 못한다는 법칙

▷ 개수가 아니라 정보 덩어리!

· '덩어리'는 한 그룹으로 묶여서 기억에 저장되는 기본 단위

· 쉽게 이해하고 기억할 수 있도록 정보를 구조화, 그룹화

· 메뉴나 항목을 무조건 7개로 제한하라는 뜻X

 

 

기업의 디자인 원칙

▷ 기업의 철학을 담고, 심미성과 사용성이 높은 제품을 만들 수 있도록 제시하는 가이드

· 기업과 제품의 비전 공유

· 공통된 느낌을 주는 일관된 원칙 제시

· 심미적인 UI와 인터렉션을 구현하는 동시에 사용성을 지키는 방법 안내

· 의사결정 기준이 되고 시간 절약

Spotify

▷ 연관성

· 개인화를 통해 사용자 개인을 위해 만들어진 것이라는 느낌

· 이를 위해 정보를 적시에 제공

· 무엇을, 누구에게, 어떤 맥락을 제시해야 하는지 고려

ex) 재생 목록의 커버 이미지를 보여줄 때 문화권에 맞춘 정보 제공

▷ 인간

· 기술에 뿌리를 두고 있지만, 모든 것은 사람을 위한 것

· 인간의 논리로 생각하고 감정 나눔

· 지나치게 영리하거나 기술적, 기능적인 것은 인간처럼 보이지 않음

ex) 프로필 사진을 설정할 때 본인의 프로필 사진을 넣을 수 있도록 함, 키즈 프로필에 재밌는 캐릭터를 사용하는 방법 활용

▷ 통일성

· 디자인하는 모든 것이 스포티파이처럼 보이게

· 제품 안에서의 일관된 경험을 통해 친숙함과 신뢰 구축

· 디자인 시스템을 사용하는 이유

· 새로 발명하기보다는 재사용하는 방법 추천

· 경험을 재사용하고, 일관성 유지

ex) 마케팅할 때 오프라인 경험과 스포티파이의 앱 경험이 이어지도록

 

UXUI 디자인 입문 6주차

레퍼런스 분석

▷ 여러 가지 사례를 상세하게 분류해 생각해 보고 도움이 될 만한 부분을 찾아보는 과정

▷ 스스로 생각하는 힘을 기를 수 있음

· 디자인에 대한 영감을 얻고 좋은 디자인을 구분하는 지식을 쌓을 수 있음

화면 구조 분석

▷ 파운데이션(색상, 폰트 등)> 엘리먼트(버튼, 뱃지 등)> 모듈(리스트, 캐러셀 등)> 페이지 (홈, 마이페이지 등)

 

디자인 원칙 기반 분석

▷ UI요소들을 디자인 원칙들을 기준으로 분석 단계

· 디자인 원칙을 대입해 보면서 사용성이 높은지, 심미적으로 아름다운지 등 디자인 평가

· 주장과 그에 알맞은 논리적인 근거를 찾는 것

 

인사이트 정리

▷ 분석한 내용들로 얻은 인사이트를 정리해 내 것으로 만드는 단계

· 참고하거나 적용하면 좋을 만한 것들을 그룹화 정리

· 아쉬운 점이나 나쁜 사례를 어떻게 더 나아지게 할 수 있을지 개선점까지 생각하면 도움

 

UX/UI 디자인 패턴

▷ 디지털 제품, 주로 앱이나 웹에서 자주 사용되는 디자인 요소

· 다수의 제품에서 공통으로 볼 수 있는 패턴은 보편적인 범위 내에서 디자인하고 동작하는 것이 좋음

온보딩

▷ 서비스를 처음 만나는 사용자가 기능을 잘 이해하고 가치를 느낄 수 있도록 돕는 과정

· 첫인상을 긍정적으로 기억하고 계속해서 다시 찾도록 하려면 온보딩을 잘 설계해야함 *DAU: 24시간 동안 앱을 사용하는 순 유저 수

▷ 튜토리얼 (추천X)

· 제품이 매우 복잡하거나 어려운 경우에 조작법이나 설명을 넣는 방식

· 특정 기능을 강조하고  싶을 때도 사용

▷ 가치 보여주기

· 제품을 사용하면서 얻을 수 있는 가치를 몇 개의 화면으로 보여주는 방식

· Skip 기능 제공 / 캐러셀을 이용하여 자동 화면 / 직접 넘기지 않아도 되는 동영상 구성

▷ 개인화 설정하기

· 개인 맞춤 정보를 제공할 수 있도록 몇 개의 카테고리와 선택지를 주고 정보 입력하게 하는 방법

· 개인화가 핵심 기능인 서비스에서 주로 사용되는 유형

 

로딩

▷ 앱이나 웹에서 화면이 그려지는 동안 사용자가 잠깐 기다려야 할 때 보여주는 화면

▷ 스피너 아이콘 혹은 애니메이션 활용

· 데이터를 서버에서 불러오거나, 반대로 데이터를 보낼 때 앱과 사용자와의 상호작용을 도움

· 연속적인 움직임을 통해 시스템이 정보를 처리하고 있음을 알림

· 로딩 지속 시간에 대한 사용자의 인식을 낮춤

▷ 프로그레스 바

· 현재 상황을 시각적을 파악할 수 있는 로딩 바

▷ 스켈레톤

· 불러오는 화면의 빈 버전으로, 화면에서 가장 먼저 노출되어 사용자가 실제 페이지를 예측할 수 있도록 함

· 주객전도의 상황이 생기지 않도록 주의. 가능한 가장 단순한 모습의 회색 박스 사용

 

검색

▷ 사용자가 원하는 정보를 빠르게 찾을 수 있도록 키워드로 정보를 찾는 방법

· 사용자가 원하는 결과를 보여줄 수 없을 때는 다른 행동 유도. 추천 콘텐츠를 보여주거나, 다른 키워드로 검색 유도

· 자동 완성 기능을 사용해 오타를 방지하고 연관된 내용을 함께 찾을 수 있도록 도우기

▷ 기본 검색 화면

· 제품에서 차지하는 검색의 중요도에 따라 검색 기능의 위계가 다름

▷ 연관 상품 추천/ 연관 검색어 노출

· 키워드 검색을 넘어 전반적인 정보의 탐색이 이뤄지는 공간

▷ Empty view: 검색 결과가 없을 때

· 결과를 보여줄 수 없을 때 빈 화면을 어떻게 채울지 고민

· 추천 혹은 베스트 상품으로 이어지는 행동을 유도하는 것도 방법

 

핀테크/ 금융

▷ 국가, 금융 기간의 법과 정책의 영향을 많이 받음

▷ 여러 앱을 동시에 비교해 보는 걸 추천

· 도메인의 특성상 제약 사항이 있는 경우가 많음

· 제한 조건을 각각의 앱에서 어떻게 풀어냈는지 비교

콘텐츠

▷ 콘텐츠의 종류에 따라 영상, 오디오, 텍스트, 웹툰 등 다양하게 나눠지고 각 종류의 특성에 따라 제품의 차이가 큼

▷ 주요 지표는 체류 시간(사용자가 방문해 머무른 시간)

· 마음에 드는 콘텐츠가 많을수록 사용자는 더 오래 머무름

· 콘텐츠를 몰입해서 소비할 때도 오래 머무름

커머스

▷ 전자상거래인 이커머스, 온라인에서 판매 및 거래가 이뤄지는 플랫폼

▷ 상품 탐색 > 구매로 이어지는 사용자 여정에 집중

· 상품을 탐색하고 구매로 이어지는 사용자의 여정 중에 어느 구간에서 가장 많이 구매를 포기하고 나가는지 살펴보기/ 반대로 구매를 결심하게 만드는 요인에 무엇이 있을지 집중