UIUX 디자인 입문 디자인 패턴 6-2

레퍼런스 분석은 화면구조분석부터 시작한다.

여러가지 UI요소로 분해해보는 것.

 

화면구조분석할때 도움되는 디자인 패턴

 

앱이나 웹에서 자주사용되고 반복되어 사용하는 디자인 요소를 말한다.

• 다수의 제품에서 공통으로 볼 수 있는 UX/UI 디자인 패턴은 보편적인 범위 내에서 디자인하고 동작하는 것이 좋습니다.
• 사용자는 기존의 경험과 학습된 내용을 바탕으로 행동하기 때문이죠.

 💡 UX/UI 디자인 패턴을 활용하면 사용자와 디자이너 모두에게 도움이 됩니다.

자주 쓰는 UX/UI 디자인 패턴은 사용자에게 익숙하기 때문에 쓰는 데 어려움이 없어요.

제이콥의 법칙 기억하시나요? (네! 유아이유엑스 심리학법칙중 하나였죠~ 제제제이콥 제품 익숙!)

사용자는 새로운 제품을 사용할 때 자신이 이미 알고 있는 익숙한 방식을 기반으로 사용하죠.
자주 쓰는 UX/UI 디자인 패턴을 사용하고,
비슷하게 동작하도록 만들면 따로 학습할 필요 없이 자연스럽게 이용할 수 있어요(uxui디자인의 가장 큰 장점)

또한, UX/UI 패턴을 디자인 시스템으로 만들어 두면 반복해서 재사용할 수 있으니,
디자이너의 불필요한 에너지를 줄일 수 있다는 장점도 있습니다.

 

 

☑️ 자주 사용되는 UX/UI 디자인 패턴에는 이런 것들이 있어요

 

1. 온보딩
2. 로딩
3. 검색
4. 회원가입
5. 리스트
6. 카드
7. 캐러셀

(5,6,7은 ui패턴)

 

이 중에서 몇 개를 골라 아래에서 자세히 알아보도록 할게요.

 

온보딩은 사용자가 제품을 처음 만나는 과정의 경험이에요.

• 온보딩이라는 단어의 원래 뜻은 ‘조직 내 새로 합류한 사람이 빠르게 조직의 문화를 익히고 적응하도록 돕는 과정’이에요.
• 제품에서 온보딩은 서비스를 처음 만나는 사용자가 기능을 잘 이해하고 가치를 느낄 수 있도록 돕는 과정을 뜻하죠.

💡 온보딩이 중요한 이유?

시장에 나와 있는 앱은 평균적으로 앱 설치 후 3일 이내에 DAU¹의 77%가 이탈한다고 해요.
사용자가 제품을 처음 사용하는 순간에 계속 써야 할 이유를 느끼지 못하면 대부분은 떠난다는 뜻이죠.

사용자가 제품에 대한 첫인상을 긍정적으로 기억하고 계속해서 다시 찾도록 하려면 온보딩을 잘 설계하는 것이 중요합니다.

** ¹DAU: 24시간 동안 앱을 사용하는 순 유저 수*

 

온보딩의 종류

1. 튜토리얼
2. 가치 보여주기
3. 개인화 설정하기

1. 튜토리얼

• 제품이 매우 복잡하거나 어려운 경우에 조작법이나 설명을 넣는 방식이에요.
• 특정 기능을 강조하고 싶을 때도 사용해요.

앱 튜토리얼 어둡게처리하고 가이드보여주게되면 사용자 행동을 제한 하게된다. (쌤왈 사실비추)

그래서 흥미를 떨어뜨린다.

 

💡 사용성 측면에서 튜토리얼이 나오는 온보딩은 추천하지 않아요.

앱을 막 설치하고 사용해 보려는 사용자의 행동을 제한하고, 흥미를 떨어뜨립니다. 가능한 제품을 쉽고 직관적으로 만들어서 튜토리얼이 필요 없도록 설계하는 것이 가장 좋습니다. 그게 어렵다면 꼭 필요한 부분에만 제한적으로 사용하세요.

 

가장좋은건 이런 가이드 필요없을정도로 직관적으로 디자인

 

2. 가치보여주기

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

 

💡 가치를 보여주는 온보딩에 이런 것도 함께 고려하면 좋아요.

온보딩 과정을 보고싶지 않은 사용자는 바로 제품의 홈으로 이동할 수 있도록 skip 기능을 제공하세요.
캐러셀을 이용하여 사용자가 화면을 넘기지 않아도 자동으로 넘어가도록 구성하세요.
사용자가 화면을 직접 넘기지 않아도 되는 동영상으로 구성하는 것도 좋습니다. 

 

3. 개인화 설정하기

• 개인 맞춤 정보를 제공할 수 있도록 몇 개의 카테고리와 선택지를 주고 정보를 입력하게 하는 방법이에요.
• 개인화가 핵심 기능인 서비스에서 주로 사용되는 유형이에요.

스포티파이(개인맞춤음악제공하는서비스)

 

스포티파이

 

듀오링고

듀오링고는 언어나 레벨 관심사 선택하는 온보딩을 구성

 

 

로딩

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

💡 좋은 로딩 화면이란?

가능한 한 빨리 콘텐츠를 표시하세요. (꼭 이렇게 설계를 할수 없을수도있어서)
콘텐츠를 로드 중이고 완료하는 데 시간이 얼마나 걸릴지 명확하게 전달합니다.
로딩 시간이 불가피하게 길어지면 사람들이 기다리는 동안 볼 수 있는 내용을 제공하는 것이 좋습니다. 

 

로딩의 종류

1. 스피너 아이콘 혹은 애니메이션 활용
2. 프로그레스 바
3. 스켈레톤

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

 

• 데이터를 서버에서 불러오거나, 반대로 데이터를 보낼 때 앱과 사용자와의 상호작용을 돕습니다.
• 연속적인 움직임을 통해 시스템이 정보를 처리하고 있음을 사용자에게 알려줍니다.
• 움직이는 모션이나 애니메이션은 로딩 지속 시간에 대한 사용자의 인식을 낮춰 기다리는 시간을 짧게 느끼게 해요.

 

2) 프로그레스 바

 

• 현재 상황을 시각적으로 파악할 수 있는 로딩 바예요.
• 진행 상황을 유저에게 알려 주어야 하는 케이스에서 사용해요.

보통 타이틀 밑에 위치해 현재상황을 유저에게 알려주는것

 

3) 스켈레톤

• 스켈레톤은 불러오는 화면의 빈 버전으로, 화면에서 가장 먼저 노출되어 사용자가 실제 페이지를 예측할 수 있도록 해요.
• 단, 스켈레톤이 실제 화면의 로드를 방해하는 주객전도의 상황이 생기지 않도록 주의하세요. 가능한 가장 단순한 모습의 회색 박스를 사용하여 불러오는 페이지를 예측할 수 있는 형태로 표현하는 것이 좋습니다.

실제 정보는 없지만 정보를 대략적인 뼈대형태로 보여주는것

보여주는 화면의 빈화면

대신 이거를 불러오면서 실제화면을 불러오는 로딩이 느려지면 안됌.  속도문제! 주객이전도되서는 안된다!!!

 

 

검색

 

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

 

• 정보의 양이 많은 서비스라면 검색 기능을 추가해 사용자의 빠른 정보 탐색을 도울 수 있어요.

💡 좋은 검색 화면이란?

키워드에 대해 사용자가 원하는 결과를 보여줄 수 없을 때는 다른 행동을 할 수 있도록 유도해 주세요.
추천 콘텐츠를 보여주거나, 다른 키워드로 검색을 유도할 수 있습니다.
자동 완성 기능을 사용해 오타를 방지하고 연관된 내용을 함께 찾을 수 있도록 도와주세요. 

 

상품을 찾았는데, 추천된 상품이나 키워드로 유도.

자동완성기능

 

검색 화면의 종류

 

1. 기본 검색 화면
2. 연관 상품 추천/ 연관 검색어 노출
3. Empty view: 검색 결과가 없을 때

1) 기본 검색 화면

• 제품에서 차지하는 검색의 중요도에 따라 검색 기능의 위계가 다른 것에 주목해 보세요.
• 돋보기 모양의 아이콘으로만 배치한 제품도 있지만, 화면에서 검색창을 아주 크게 전면에 표시한 제품도 있습니다.

검색아이콘(유투버), 검색바(구글과네이버) 차이점

50:50 70:30 비율로 사용이 되고 있다. 원하는 상품이 뚜렷한 사용자는 - 이마트몰

 

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

오늘의집, 지그재그, 마이리얼트립

• 검색 화면에서는 키워드 검색을 넘어 전반적인 정보의 탐색이 이뤄지는 공간이기도 합니다.
• 탐색을 돕기 위한 요소에는 무엇이 있는지 주목해 보세요.

검색과 탐색이 함께 들어가는 디자인패턴을 봐라

 

3) Empty view: 검색 결과가 없을 때

 

무신사, 배달의민족,지그재그

 

• 사용자에게 결과를 보여줄 수 없을 때 빈 화면을 어떻게 채울지 고민해 보세요.
• 추천 혹은 베스트 상품으로 이어지는 행동을 유도하는 것도 방법이에요.

추천상품 사용내 서비스(베스트상품) 다른행동할수있도록 유도해라!

 

무신사는 다른 상품 추천/품절검색

배민은 그래픽을 두었네 브랜드 아이덴티티를 보여줌 텅!

다른행동을해라라고 텍스트

지그재그는 베스트상품 추천