🔖 2021년 12월 2주 TOP3

🔖 2021년 12월 2주 TOP3

2021년 사용자 인터페이스 디자인의 트렌드와 유행

UI 디자인 분야의 초보자로서, 저는 동료 디자이너들이 사용하는 용어에 대해 항상 두렵고 혼란스러웠습니다. 여기서 제 동기는 보통 사용되는 몇 가지 용어들을 일반인 말로 설명한 것입니다. 다소 길지만 즐거운 여행이 될 것이므로 안전 벨트를 착용하세요.

플랫 디자인
플랫 디자인과 스큐어모피즘 사이의 전쟁은 2000년대 중반 마이크로소프트가 플랫 디자인 구현으로 메트로(Metro)를 출시하면서 시작되었습니다. 마이크로소프트 디자인 언어(Microsoft Design Language)는 이전에 메트로(Metro)로 알려져 있습니다. 

마이크로소프트와 애플은 그렇게 생각하지 않지만, 어떤 사람들은 플랫 디자인이 지루한 디자인이라고 생각합니다. 그러나 사실은 미니멀리즘 디자인 스타일이 대중적이며, 디자인에서 불필요한 혼란을 없애면 사용성을 향상시킬 수 있습니다.

왜 플랫 디자인인가?
플랫 디자인은 지난 해 디자인계에서 널리 보급되어 온 철학입니다. 미니멀리즘, 단색과 채우기를 수용하고 복잡한 그라디언트, 그림자, 과거와 관련된 모든 디자인 요소를 배제합니다.

플랫 디자인 사용의 장점:
1. 단순성 - 최소한의 미적 외관
2. 그림자와 그라디언트가 없는 디자인 - 렌더링 속도 향상

플랫 디자인의 디자인 실패:
단순함은 때때로 지루할 수 있습니다. 음, 마이크로소프트와 애플은 그렇게 생각하지 않지만, 일부 사람들은 평면 디자인이 지루한 디자인이라고 생각합니다.

스큐어모피즘
간단히 말해서, 스큐어모피즘은 원래 물리적 개체로부터 미학적 디자인 단서를 얻는 개체 또는 디자인입니다. 스큐어모피즘은 원본을 표현하기 위한 모조품입니다.

스큐어모피즘은 물리적 세계에서 디자인의 단서를 차용합니다. 예로 휴대폰의 계산기 또는 사파리 나침판 브라우저 아이콘이 있습니다. 스큐어모피즘 디자인 요소는 종종 기능이 없는 디자인 요소입니다.

사파리 브라우저 아이콘을 자세히 살펴보면 그림자와 그라디언트가 3차원을 제공하는 것을 볼 수 있습니다. 열쇠고리나 방향 지시와 같은 실제 나침반의 요소도 있습니다. 그러나 이러한 디자인 요소는 아이콘의 기능과 관련이 없습니다.

스큐어모피즘의 장점:
1. 스큐어모픽 인터페이스는 즉각적으로 친숙하게 느껴집니다.
2. 세심한 배려를 보여줍니다.
3. 디자이너는 텍스처를 사용하는 어떤 이유도 좋아합니다.

스큐어모피즘의 단점:
1. 스큐어모픽 인터페이스는 때때로 사용성을 방해합니다.
2. 불필요한 이미지와 장식이 있는 디자인은 기본적으로 화면을 낭비하는 디자인으로 공간 활용이 좋지 않을 수 있습니다.
3. 대부분의 디자인은 원본에서 복사되기 때문에 더 빨리 지나가는 경향이 있습니다.
.
.
👇 더 자세한 내용은 아래 원문에서 확인해주세요.

호핀의 프로덕트 디자인을 이끄는 6가지 원칙

복잡한 프로덕트를 디자인하는 것은 쉽지 않습니다.

주니어 디자이너인 저는 큰 그림을 먼저 고려하지 않고 바로 디자인 앱에 뛰어들어 픽셀을 밀어붙이는 실수를 한 적이 한두 번이 아닙니다.

저는 대기업과 스타트업의 연계를 통해 현재 업무에 도움이 되는 6가지 원칙을 발견하여, 보다 폭넓은 호핀 디자인 팀의 활동을 이끌어 가고 있습니다.

이 기사에서는 이러한 프로덕트 디자인 원칙을 설명하고 2021년 초에 완료한 이벤트 설정 대시보드의 리디자인를 통해 특히 호핀에서 수행하는 작업에서 이러한 원칙이 어떻게 나타나는지 설명하겠습니다.

호핀의 6가지 디자인 원칙
버츄얼, 하이브리드 이벤트의 시장 리더인 호핀은 뛰어난 사용자 경험을 바탕으로 명성을 쌓아왔습니다.

당사의 이벤트 프로덕트에는 이벤트 주최자용과 참석자용 양면이 있습니다.

2019년에 이벤트 플랫폼의 첫 번째 버전을 출시한 이후로 우리는 고객의 소리에 귀를 기울이고 고객의 구체적이고 변화하는 요구 사항을 충족할 수 있도록 프로덕트를 발전시켰습니다.

우리의 성장을 이끄는 원칙은 다음과 같습니다.

1. 실제 문제 파악하기
디지털 프로덕트 디자이너로서 우리 팀의 임무는 디자인을 통해 실제 비즈니스와 사용자 문제를 해결하는 것입니다.

실행
2021년 초에 이벤트 설정 인터페이스를 대대적으로 개편할 생각을 하기 시작했을 때, 어떤 문제를 해결하려고 할 것인지에 대해 전술적으로 파악해야 한다는 것을 알았습니다. 따라서 우리는 사용자가 보고한 주요 문제를 파악하는 것으로 시작했습니다. 대화 상대는 다음과 같습니다.

1. 이벤트 주최자(매일 이벤트를 진행하는 사람과 당사 플랫폼을 처음 접하는 사람 모두 포함)
2. 고객 성공 팀
3. 지원팀

또한 계속해서 발생하는 문제의 종류를 파악하기 위해 채팅 도움말 시스템을 조사했습니다. 우리는 이벤트 프로덕트의 세 가지 주요 문제를 식별하기 위해 피드백을 분류하고 필터링했습니다.

주요 문제
“이벤트를 준비할 때 어디서부터 시작해야 할지 막막합니다.”
"제가 언제 끝났는지 어떻게 알아?"
"제가 필요한 [그 물건]을 찾을 수 없습니다!"

문제를 식별한 후, 우리는 이제 솔루션을 고려하고 개발할 수 있었습니다. 우리는 두 가지 주요 팀으로 나눠서 일했습니다. 우리 팀은 세 번째 문제에 집중했고 "온보딩" 팀은 처음 두 개의 문제에 집중했습니다.

2. 구조 고려하기
디자인이 깊어집니다. 복잡한 문제를 해결할 때 Jessie James Garrett의 사용자 경험 요소는 유용한 시금석입니다. 저는 현재 어느 레벨에서 일하고 있는지, 그리고 이것이 당면한 과제를 해결할 수 있는 적절한 레벨인지 고려합니다.

실행
이벤트 주최자의 말을 듣고 신규 참가자가 이벤트를 준비하는 것을 관찰하면서 근본적인 문제를 해결하기 위해 구조를 깊이 파고들어야 한다는 것이 분명해졌습니다.

사업상의 이유로 빨리 움직여야 했습니다.

제한된 기간을 감안할 때, 전체 이벤트 생성 전략 또는 범위를 재고할 수는 없었지만, 처음부터 끝까지 노력함으로써, 네비게이션 구조(즉, "정보 아키텍처")를 재고할 수 있다고 결정했습니다.

이 보다 심층적 근본적인 수준에서 시작하여, 우리 작업이 더 많은 영향력을 가지고 결과적인 사용자 경험에 더 많은 변화를 가져올 것이라는 보장이 있습니다.

저희가 받은 피드백 중 하나는 현재 메뉴에서 페이지를 찾기 어렵다는 것이었습니다. 메뉴가 여러 섹션으로 나누어져 있는데 평평한 계층 구조처럼 보였습니다.

그래서 우리의 첫 번째 작업은 메뉴 항목을 분류하는 더 나은 방법을 만들고 이를 배치할 수 있는 더 나은 방법을 고려하는 것이었습니다.

우리는 네비게이션을 위한 논리적이고 일관된 구조를 가지고 있는지 확인하기 위해 디자인 팀, 고객 성공팀과 지원팀이 함께 일련의 짧은 세션으로 이 프로세스를 시작했습니다.

추상적인 수준에서 작업하면서 레이아웃 아이디어에 얽매이지 않고 빠르게 반복하고 디자인에서 세부 사항을 구축할 수 있었습니다.

일단 구조가 정해지면, 골격을 검토했습니다. 이 수준에서 어떻게 더 일관되고 명확한 경험을 만들 수 있습니까?

우리 중 소수만이 알고 있는 틈새 프로덕트를 포함하여 경쟁업체와 비교 프로덕트를 살펴보았습니다. 우리는 영감을 얻기 위해 다양한 아이디어가 필요했기 때문에, 광범위한 영향력을 활용함으로써 경쟁 우위를 확보할 수 있었습니다.

마지막으로, 많은 사람들이 인터페이스의 표면 수준인 "디자인"을 들으면 사람들이 어떻게 생각하는지 알아봤습니다.

우리는 타이포그래피와 아이코노그래피에 대한 세부 사항을 다듬고, 모든 것을 시각적으로 다듬고, 구성 요소가 더 넓은 디자인 시스템과 일치하는지 확인하고, 모든 영역에서 색상 접근성을 확인했습니다.
.
.
👇 더 자세한 내용은 아래 원문에서 확인해주세요.

 [UX 사례 연구] 카우리(Cowry) 모바일 앱 리디자인

카우리(Cowry) 소개
카우리(Cowry)는 라고스 주의 BRT(Bus Rapid Transit) 버스용 지불 카드입니다.  라고스 주 정부는 2021년 2월 1일 라고스 메트로폴리탄 지역 교통국(LAMATA, Lagos Metropolitan Area Transport Authority)과 협력하여 재충전 가능한 선불 카드인 라고스 BRT  카우리 카드(Lagos BRT Cowry card)를 도입했습니다.  

이 카드는 통근자들이 라고스 주에서 BRT 버스를 탈 때마다 버스 요금을 지불하기 위해 사용할 것입니다. 이 새로운 재충전 가능한 선불 카드 시스템은 장기 현금 시스템을 대체하기 위한 것입니다.

왜 카우리(Cowry) 일까요?
카우리 모바일 앱은 사용자들이 겪는 UX 문제로 인해 좋지 않은 리뷰가 많습니다.  결제 실패, 막다른 길(dead ends), 앱 네비게이션 문제 등으로 인한 사용자 불만이 많습니다.

사용자의 요구를 충족시키고 신뢰를 구축하기 위해서는 앱이 목적에 부합하도록 앱을 리디자인해야 합니다.  사용자의 고충을 해결하기 위한 적절한 조사를 수행하기 위해 더 많은 사용자의 불만을 수집하려고 Google 플레이 스토어를 방문했습니다.

문제 설명
대부분의 통근자들이 카우리(Cowry) 모바일 앱을 사용할 때 직면하는 문제를 해결하고 싶습니다.  통근자들이 쉽게 결제할 수 있도록 하고, 사용량도 크게 늘리고자 합니다.

목표
1. 사용성을 개선하고 앱을 더욱 사용자 친화적으로 만듭니다.
2.  디자인 솔루션을 만들고 검증합니다.
3.  디자인과 사용자 경험 개선합니다.
4.  접근성 향상시킵니다.
5.  목표를 달성하는 더 쉬운 방법을 찾아봅니다.
6.  카우리(Cowry)에 대한 사용자의 신뢰를 향상시킵니다.
7.  일반적으로 교통수단에 대해 자세히 알아봅니다.
8.  내 디자인 프로세스를 전달합니다.

학습
프로세스 효율성 향상과 사용자 불만에 대한 솔루션 제공을 핵심 목표로 카우리(Cowry) 모바일 앱을 리디자인합니다.  결제 단계를 단순화하여 사용자가 카드에서 모바일로 현금을 교환할 수 있는 옵션을 제공합니다.

제가 첫 번째로 취했던 조치는 사용자의 불만을 수집하기 위해 Google 플레이 스토어에서 앱 섹션을 방문하는 것이었습니다.  그런 다음 수집된 정보를 분류하고 문제점을 식별했습니다.  사용자가 정확히 원하는 것이 무엇인지에 대한 사용자 관점을 이해하는 데 도움이 되었습니다.

나의 디자인 과정
저에게 사용자 경험 디자인은 문제 해결에 관한 것이므로 항상 사용자의 관점에서 요구 사항, 동기와 문제점을 알기를 원합니다.  그런 다음 문제를 해결하고 식별된 요구 사항을 충족하는 솔루션을 만듭니다.
.
.
👇 더 자세한 내용은 아래 원문에서 확인해주세요.

🎄from.designer 

🗓️ 행사 일정 & UXUI 자료 

디자이너 공유, UXUI 스터디 참관, UX 발표자료 공유등 다양한 정보를 노션에서 확인하세요.

💭 단톡방 가입문의  (2,070명)

🎥 유튜브 UXUI 자료 영상  

🔖 이메일 

📍 SNS   @from.designer 페이스북 , 인스타그램