O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

라이트브레인 UX/UI Trend 2022

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Próximos SlideShares
Ux 트렌드, beyond 2012
Ux 트렌드, beyond 2012
Carregando em…3
×

Confira estes a seguir

1 de 51 Anúncio

라이트브레인 UX/UI Trend 2022

라이트브레인 CX컨설팅그룹 조성봉 이사의 최신 UX/UI 트렌드 발표 자료를 공개해 드립니다.
소개해드릴 2022년 최신 UX/UI 트렌드는 다음과 같습니다.

1. 친근하지만감칠맛나는워딩
2. 더정교해진 Forgiving Input
3. Scrollytelling
4. Parallax Scrolling
5. Split Screen Design
6. 큐레이션태그
7. Contextual Search
8. Advanced Personalisation
9. Deep Customizing
10. Inclusivity
11. Meta IA
12. Ethical design
13. 3D 요소활용
14. Y2K
15. Abstract art
16. 다소어려운트리거를동원한Micro Interaction
17. Air Gesture Control
18. Wait-worthy loading screens

라이트브레인 CX컨설팅그룹 조성봉 이사의 최신 UX/UI 트렌드 발표 자료를 공개해 드립니다.
소개해드릴 2022년 최신 UX/UI 트렌드는 다음과 같습니다.

1. 친근하지만감칠맛나는워딩
2. 더정교해진 Forgiving Input
3. Scrollytelling
4. Parallax Scrolling
5. Split Screen Design
6. 큐레이션태그
7. Contextual Search
8. Advanced Personalisation
9. Deep Customizing
10. Inclusivity
11. Meta IA
12. Ethical design
13. 3D 요소활용
14. Y2K
15. Abstract art
16. 다소어려운트리거를동원한Micro Interaction
17. Air Gesture Control
18. Wait-worthy loading screens

Anúncio
Anúncio

Mais Conteúdo rRelacionado

Semelhante a 라이트브레인 UX/UI Trend 2022 (20)

Mais de RightBrain inc. (20)

Anúncio

Mais recentes (20)

라이트브레인 UX/UI Trend 2022

  1. 1. Content 1. 친근하지만 감칠맛 나는 워딩 2. 더 정교해진 Forgiving Input 3. Scrollytelling 4. Parallax Scrolling 5. Split Screen Design 6. 큐레이션 태그 7. Contextual Search 8. Advanced Personalisation 9. Deep Customizing 10. Inclusivity 11. Meta IA 12. Ethical design 13. 3D 요소 활용 14. Y2K 15. Abstract art 16. 다소 어려운 트리거를 동원한 Micro Interaction 17. Air Gesture Control 18. Wait-worthy loading screens
  2. 2. 3 UX/UI Design 디지털 서비스에서 말(Wording)이 갖는 중요성이 증대되고 있는 가운데, 최근에는 쉽게 읽히고 친근하게 느껴지는 표현과 더불어 읽었을 때 감질맛 나는 (약간의 익살과 능청스러움이 결합된?) 형태의 워딩이 유행이다 친근하지만 감칠맛 나는 워딩 UX/UI Trend
  3. 3. 4 UX/UI Design Case Study 친근하지만 감칠맛 나는 워딩 UX/UI Trend 시사 상식 정보 제공 “재미있슴” - 캐릭터 이름을 이용한 어미 처리(~슴)나 은유적인 표현(피자스테이션) 사용 NEWNEEK MZ세대가 많이 찾는 트렌디한 쇼핑몰 숫자를 이용한 중의적인 표현 방법으로 신선함과 재미를 선사함 29CM
  4. 4. 5 UX/UI Design Case Study 친근하지만 감칠맛 나는 워딩 UX/UI Trend 여행에 필요한 다양한 서비스를 찾을 수 있음 “나도 기다렸어~” - 대화체의 친근한 말투 마이리얼트립 다양한 사람들이 작성한 글을 읽거나 내가 직접 글을 쓸 수도 있는 공간 “내 서랍엔 무슨 책이 있더라” – 오프라인 단어를 사용하거나 동사를 명사처럼 사용 브런치
  5. 5. 6 UX/UI Design Case Study 친근하지만 감칠맛 나는 워딩 UX/UI Trend 다이어트 앱. 채팅창에서 사용할 수 있는 메뉴명이 친근한 대화체로 되어있음 밸런스프렌즈
  6. 6. 7 UX/UI Design 사용자가 잘못 입력하거나 서비스가 요구하는 규칙을 따르지 않을 때, 서비스가 이를 자동으로 교정해주는 것 더 정교해진 Forgiving Input UX/UI Trend
  7. 7. 8 UX/UI Design 자동 교정 더 정교해진 Forgiving Input UX/UI Trend 구글 검색 오타를 자동으로 인식하여 수정된 단어의 검색 결과를 노출
  8. 8. 9 UX/UI Design 입력시 필요 조건 안내 더 정교해진 Forgiving Input UX/UI Trend 티맵 닉네임 설정 시 입력에 대한 필수 입력 및 최소 글자 수에 계좌 연결 중 동의 항목 미선택시 다음단계로 넘어가기 직전 그 예시 화면을 보여주고 사용자가 원한다고 답한다면 대신 토스
  9. 9. 10 UX/UI Design 고객 행위 최소화 더 정교해진 Forgiving Input UX/UI Trend 틱톡 개인정보 설정에서 이메일 변경 시 주요 도메인 노출 삼성스마트TV
  10. 10. 11 UX/UI Design 사용자가 Scroll을 함에 따라 동적 애니메이션 또는 마이크로 인터렉션이 전개되면서 짧막한 인상, 메시지, 스토리텔링을 전달하는 것 Scrollytelling UX/UI Trend
  11. 11. 12 UX/UI Design 좀 더 구체적인 정보로의 이동 Scrollytelling UX/UI Trend
  12. 12. 13 UX/UI Design 공간적인 체험을 통한 감각적 경험 전달 Scrollytelling UX/UI Trend
  13. 13. 14 UX/UI Design 공간적인 체험과 이야기의 결합 Scrollytelling UX/UI Trend
  14. 14. 15 UX/UI Design 추상화된 시각정보 속에서 제품의 USP, 메시지 전달 Scrollytelling UX/UI Trend
  15. 15. 16 UX/UI Design 모바일 화면 위에서 사용자가 Scroll을 하는 위치에 따라서 화면 내 시각적 요소의 반응이 규칙적으로 변화되는 것 Parallax Scrolling UX/UI Trend
  16. 16. 17 UX/UI Design 스크롤 과정에서의 각 UI 블록 단위로 상태변화(Transition)을 차별화 Parallax Scrolling UX/UI Trend
  17. 17. 18 UX/UI Design 카피 또는 Key Message의 전환 효과 Parallax Scrolling UX/UI Trend
  18. 18. 19 UX/UI Design Scrollytelling과 Parallax Scrolling의 결합 Parallax Scrolling UX/UI Trend
  19. 19. 20 UX/UI Design 화면 위에 레이어를 부여하여 각 레이어의 역할을 명확하게 구분한 다음, 사용자의 조작에 따라서 각 레이어 위 정보들이 UX적으로 조화를 이루는 방식 Split Screen Design UX/UI Trend 제품 이미지 화면 위에 제품 정보 레이어 자라
  20. 20. 21 UX/UI Design 지도 + 위치 또는 길안내 Split Screen Design UX/UI Trend 장소 탐색 시 지도 화면, 상단의 주요 시설(장소), 바텀시트의 장소 정보로 총 3개의 레이어가 함께 정보를 제공함 에어비앤비 숙소 탐색 시 지도 화면, 상단의 숙소 유형 및 편의시설 등 필터, 바텀시트의 숙소 정보로 총 3 개의 레이어가 함께 정보를 제공하며, 사용자의 조작에 따라 지도가 Zoom-in / out 되어 조화 를 이룸 티맵
  21. 21. 22 UX/UI Design 미디어 + 댓글 or 추천 Split Screen Design UX/UI Trend 유튜브 상단에 영상이 재생될 때 하단의 유사 영상 추천 영역이 별도로 움직임. 가로보기 시 영상 옆에 댓글 창이 떠있어서 영상을 보면서 동시에 댓글을 확인 유튜브
  22. 22. 23 UX/UI Design 고객의 의도에 따라서 보여지는 정보가 달라지는 3단 레이어 : 바탕(배경, 개요), 시각 정보 or 내비게이션, 구체적인 정보 Split Screen Design UX/UI Trend
  23. 23. 24 UX/UI Design 맥락에 따라서 레이어들이 교차 Split Screen Design UX/UI Trend 나이키 런 클럽 러닝 프로그램. 내 위치 중심 지도 화면 위에 러닝 가이드 레이어, 러닝 시작 버튼 레이어
  24. 24. 25 UX/UI Design 정보를 탐색해 나가는 과정에서 이전보다 태그의 비중이 높아지고 있는 가운데, 사용자의 탐색 경로에 미리 큐레이션 태그를 배치하여 탐 색 경험을 보다 풍부하게 하는 경향 큐레이션 태그 UX/UI Trend
  25. 25. 26 UX/UI Design Case Study 큐레이션 태그 UX/UI Trend 홈 화면 검색 메뉴 오늘의 집 검색입력 화면 하단 ‘사진 추천 키워 드’ 제공 검색입력 화면 하단 ‘노하우 추천 키 워드’ 제공 홈 화면 검색 메뉴 에이블리 검색입력 화면 하단 ‘추천 검색어’ 제 공 Scroll
  26. 26. 27 UX/UI Design Case Study 큐레이션 태그 UX/UI Trend 홈 화면 하단 키토크 검색 영역 터치 마이버킷리스트 여행자들의 버킷리스트를 수집하 여 AI가 인기 버킷리스트 추천 Scroll시 별도 검색 없이 인기 버 킷리스트별 추천 여행지 제공
  27. 27. 28 UX/UI Design Case Study 큐레이션 태그 UX/UI Trend 홈 화면 상단 검색 영역 터치 에어비앤비 유연한 검색 선택 상단 다양한 테마항목 배치
  28. 28. 29 UX/UI Design 여러 서비스에 걸쳐서 처음 입력한 검색어를 가지고 검색 결과를 찾아다니거나, 중간에 태그/조건을 추가하면서 검색을 이어갈 수 있는 경 향 Contextual Search UX/UI Trend
  29. 29. 30 UX/UI Design 선택한 필터 내에서 Searching Contextual Search UX/UI Trend 메가박스 홈 화면 ‘극장별 예매‘ 선택 원하는 극장 3개 선택 선택한 3개의 극장을 번갈아 탐색하며 하단 원하는 영화 선택
  30. 30. 31 UX/UI Design 마이 필터  개인화로 연계 Contextual Search UX/UI Trend
  31. 31. 32 UX/UI Design 기존 프로파일 기반의 개인화보다 한 발 앞선 형태의 초개인화. 고객 성향, 서비스 활동 이력, 맥락 영향도 등을 파악해서 고도화된 개인화 를 제공한다. 고객 입장에서는 탐색 대신 서비스가 제공하는 콘텐츠가 얼마나 자신의 의도에 부합하는 지가 '좋은 UX'의 척도가 된다 Advanced Personalisation UX/UI Trend
  32. 32. 33 UX/UI Design Cleo : AI 기반의 통합자산관리 핀테크 서비스 Advanced Personalisation UX/UI Trend a.예산관리 b.혹평 피드백 c.소비관리 d.머니 퀴즈
  33. 33. 34 UX/UI Design 디지털 서비스의 전반적인 환경을 사용자 스스로 설정할 수 있도록 자유도를 높이는 흐름. 단순한 배경화면이나 테마, 아이코노그래피 등을 바꾸는 것에서부터 취향 분석을 통해서 서비스를 맞춤화하거나 소유한 가전기기, 서비스, 콘텐츠를 등록한 뒤 그에 기반하여 서비스를 제공 하는 형태도 있다 Deep Customizing UX/UI Trend
  34. 34. 35 UX/UI Design 홈화면이나 내비게이션의 맞춤화 Deep Customizing UX/UI Trend 카카오페이 신한PLAY
  35. 35. 36 UX/UI Design 웹접근성 보다 한 차원 높은 단계의 보편적 디지털 서비스 제공 흐름. 장애 뿐만 아니라 인종, 문화, 종교, 성, 연령 등 거의 모든 이슈에 대 응하여 서비스를 제공한다 Inclusivity UX/UI Trend
  36. 36. 37 UX/UI Design 좀 더 상세한 개인 취향의 설정 Inclusivity UX/UI Trend 개인화된 영양 생활 방식을 위한 영양정보 앱 문화, 종교, 신념 등의 이유로 비건식을 하는 사용자를 위해 비건 옵션 제공 Heali
  37. 37. 38 UX/UI Design 서비스 내의 정보 뿐만 아니라, 서비스 외부 또는 서비스 영역 단위에서의 탐색을 돕는 Meta IA들이 등장하고 있다 Meta IA UX/UI Trend
  38. 38. 39 UX/UI Design Case Study Meta IA UX/UI Trend SSG 닷컴 좌측 상단 버튼을 통해 신세계 계열 브랜드 및 서비스 메뉴로 이동 롯데 ON 좌측 상단 버튼을 통해 롯데 계열 브랜드 및 서 비스 메뉴로 이동 StyleShare 좌측 상단 버튼을 통해 주요 대표 서비 스 메뉴로 이동
  39. 39. 40 UX/UI Design 디지털 상에서 경험은 점점 더 정보 등록과 인증, 데이터 제공, 사회적 소통을 강요하고 있다. Ethical design은 이러한 스트레스들로부터 해 방되어 (예를 들어 등록 없이도, 데이터도 제공하지 않고, 추적당하지 않으면서..) 좀 더 편안한 가운데 사용자경험을 누릴 수 있도록 하는 디자인 경향이다 Ethical design UX/UI Trend
  40. 40. 41 UX/UI Design 데이터를 제공하지 않을 권리 Ethical design UX/UI Trend
  41. 41. 42 UX/UI Design 회원 가입 없이 이용 가능한 서비스 Ethical design UX/UI Trend
  42. 42. 43 UX/UI Design 스크롤 또는 스와이핑시 화면내 3D 요소가 반응하면서 2차원 스크린의 공간적 한계를 극복하려는 경향. 정보의 입체적 다면성, 공간적 특 성, 사용자 조작과의 매칭을 표현한다. 3D 모델 엔진의 발달/대중화와 더불어 갈수록 더 보편화될 것으로 전망된다. 3D 요소 활용 UX/UI Trend
  43. 43. 44 UX/UI Design 3차원 공간 간접 체험 3D 요소 활용 UX/UI Trend 직방의 3D단지투어-매물 실외 직방의 3D단지투어- 매물 실내 직방
  44. 44. 45 UX/UI Design 가상 체험관 3D 요소 활용 UX/UI Trend
  45. 45. 46 UX/UI Design 인터넷 초창기에 선보였던 거친 비주얼, Dot 이미지, 밝고 선명한 색상, 두껍고 볼드한 텍스트 등의 Retro 스타일을 현대적으로 구현하는 경 향. 스트리밍 음악이 대세이지만, 레코드 턴테이블(Vinyl)이 유행하고 있는 현실과 빗댈 수 있다. 단지 복고주의풍이라기 보다는 갈수록 현 실과 디지털의 차이가 불분명해지는 것에 대한 저항, 다양한 감성의 추구라고 볼 수 있다. Y2K UX/UI Trend
  46. 46. 47 UX/UI Design Case Study Y2K UX/UI Trend 웹사이트 어워드인 awwwards의 컨퍼런스 사이트 Lo-fi 이미지들 플러스 : 바디케어 제품 및 디스펜서 판매 브랜드 사이드 강렬한 색체 대비와 볼드한 라인
  47. 47. 48 UX/UI Design 추상적이고 기하학(geometry)적인 그래픽 요소들을 도입하여 특별한 의미 부여보다는 전체적인 조화와 리듬감을 추구하려는 경향 Abstract art UX/UI Trend
  48. 48. 49 UX/UI Design 약간의 집중을 필요로 하는 마이크로 인터랙션을 통해 사용자의 조작 감각을 높임으로써 경험을 훨씬 더 풍부하고 보람차게 만들어 줌 다소 어려운 트리거를 동원한 Micro Interaction UX/UI Trend
  49. 49. 50 UX/UI Design 2020년 이후 Google Pixel 4, iPhone 11 pro 등장에 탑재된 radar/lidar 모션감지 센서를 활용하여 화면을 터치하지 않고도 흔들기(wave), 벌리기(pinch), 스와이프 등의 간단한 동작으로 화면내 기능을 조작하는 것 Air Gesture Control UX/UI Trend
  50. 50. 51 UX/UI Design 기다리는 시간 동안 짧은 애니메이션을 통해서 감성을 전달하는 경향 Wait-worthy loading screens UX/UI Trend

×