🔖 UXUI 해외 인기 아티클

🔖 2022년 4월 2주 TOP3

1️⃣ 우리가 매일 직면하는 UX 디자인의 15가지 법칙 (2부)

2️⃣ 스포티파이 아이콘 시스템 업데이트

3️⃣ 10가지 필수 UI(사용자 인터페이스) 디자인 팁

1️⃣ 우리가 매일 직면하는 UX 디자인의 15가지 법칙 (2부)

이 기사의 1부에서 우리는 디자인 프로세스에서 인간 행동의 중요성에 관해 이야기하기 시작했습니다.

수천 명의 독자가 기사가 훌륭하고 유용하다는 긍정적인 의견을 남겼습니다. 그래서 사람들이 일부 사이트를 좋아하고 싫어하는 이유에 관한 설명을 이어가는 2부를 소개하게 되어 기쁩니다. 이미 말했듯이, 이러한 원칙은 사람들을 위해 프로덕트를 생산하는 모든 사람에게 유용할 것입니다. 시작해 봅시다!

#6 — 피크 엔드 법칙

피크 엔드 법칙은 우리의 인상이 어떻게 기억되는지 설명합니다. 그것은 우리가 경험의 전반적인 인상이 아닌 가장 긍정적이거나 부정적인 순간과 마지막 순간만을 기억한다고 말합니다.

사용 방법

1. 리서치 피크 엔드 법칙은 UX 리서치를 설계하는 데 매우 도움이 될 수 있습니다. 제품이 어떤 인상을 주는지 알고 싶다면 간단한 질문을 하세요. 예를 들어, 제품을 사용하면서 가장 어려웠던 점이나 불편한 점을 물어볼 수 있습니다. 답변은 부정적인 피크를 찾은 다음 제거하거나 긍정적인 피크로 바꾸도록 도와줄 것입니다.

2. 더 나은 인상 디자인하기 이것은 긍정적인 피크를 더 많이 만들고 부정적인 피크를 제거하는 것입니다.

여기에서 가장 좋은 예는 학습의 게임화입니다. 우리는 새로운 것을 배우는 것이 매우 스트레스를 줄 수 있다는 것을 알고 있으므로, 그 과정을 게임처럼 느끼게 하는 것이 좋은 해결책입니다. 이것은 좋은 기억을 만듭니다. 예를 들어, 점수와 성취 시스템은 높은 수준의 동기 부여를 유지하는 데 도움이 되는 긍정적인 피크를 만듭니다.

3. 마지막 부분을 집중하기 특히 복잡한 제품의 경우 더욱 그렇습니다.

20단계로 구성된 복잡한 양식이 있다고 가정해 보겠습니다. 사용자가 편안함을 느낄 수 있도록 자동 완성과 자동 수정을 활성화하고, 이러한 단계를 범주로 나누고, 인라인 오류 메시지를 추가하는 등의 작업을 수행할 수 있습니다. 이것이 부정적인 피크를 제거할 방법입니다. 하지만 모든 프로세스를 완료하는 데 많은 시간과 조치가 필요한 경우 목표는 사용자가 해당 프로세스를 잊게 만드는 것입니다. 그리고 여기서 좋은 마지막 부분이 유용할 수 있습니다.

사용자에게 공감과 지원을 제공하세요. 예를 들어, 양식 작성이 간단하지 않았음을 이해한다는 것을 강조할 수 있으며, 작업이 완료되면 사용자 만족도를 공유할 수 있습니다.

주요 내용

..

👇 더 자세한 내용은 아래 원문에서 확인해주세요.

2️⃣ 스포티파이 아이콘 시스템 업데이트

변경 이유와 비하인드 스토리

우리의 현재 아이콘 모음은 2016년 마지막 재설계 이후로 우리와 함께 하고 있습니다. 그리고 그것들이 우리에게 좋은 역할을 했지만 최근에 우리는 시각적 언어의 진화에 맞춰 아이콘을 업데이트할 필요가 있음을 확인했습니다.

문제 구성하기

아이콘을 새로 고치기 위해 디자인 시스템 팀 중 하나인 Encore Foundation은 2016년 재설계에 참여한 숙련된 아이콘 제작자 Rob Bartlett와 협력했습니다. 함께 우리는 그들이 해결해야 할 주요 과제를 식별했습니다.선의 무게와 굵기가 너무 가늘었다.

우리는 다음 몇 가지를 기반으로 아이콘의 무게를 재검토하고 싶었습니다.

병합할 몇 가지 다른 아이콘 세트가 있었습니다. 시간이 지남에 따라 Encore시스템은 다양해졌으며 우리는 모든 것을 수용할 수 있는 새로운 세트를 만들기 시작했습니다.

아이콘을 만들고 관리하는 것이 생각만큼 쉽지 않았습니다. 우리는 일반적으로 팀을 위한 아이콘 시스템을 단순화해야 할 필요성을 보았습니다. 한 가지 주요 측면은 아이콘 & 생성 흐름에 대한 디자인 소스 파일을 완전히 가져와서 최근 Figma로의 전환을 기반으로 구축하는 것입니다. 또 다른 방법은 시스템에 추가되는 모든 단일 아이콘에 대해 만들어야 하는 아이콘 크기의 수를 줄이는 것이었습니다.

모두를 위한 원활한 전환 지원합니다.

우리는 이 업데이트가 최종 사용자를 위한 원활한 전환처럼 느껴지기를 원했습니다. 대다수의 아이콘에 대해 사용자가 길을 찾을 수 있지만 새로워진 아이콘 스타일을 즐길 수 있도록 바로 이러한 이유로 현재의 비유를 그대로 유지했습니다.

그래서 새로운점은?

전반적인 업데이트와 함께 주요 차이점은 기본 선의크기를 변경하여 아이콘의 가중치를 늘리고 있다는 것입니다. 24px 아이콘 크기에서 1px에서 2px로 두께를 늘립니다.

더 굵은 크기: 24 & 16픽셀 아이콘의 선 두께를 늘리고 이제 다음 두 가지 크기의 아이콘만 유지하여 아이콘 시스템을 단순화합니다.

필요한 다른 모든 크기는 이러한 고유한 크기의 크기 조정 버전입니다. 그 결과 더 읽기 쉬운 아이콘과 타이포그래피의 균형 잡힌 세트가 만들어졌습니다.

세트 전체에 걸쳐 새로워진 스타일 더 두꺼운 선으로 새 스타일의 모든 단일 아이콘을 다시 그려 세트를 병합했습니다. 대다수의 아이콘은 이전과 동일한 은유를 유지합니다.

활성 상태의 차이 증가 명확성을 높이기 위해 활성 상태는 더 이상 가중치에 대한 미묘한 변경만 사용하지 않고 대신 아이콘의 일부를 채웁니다.

이것이 우리가 한 방법입니다.

Rob Bartlett와 파트너 관계 Encore Foundation은 Spotify 디자인 언어의 모든 핵심 요소를 담당합니다. 몇 달 동안 Rob Bartlett은 매우 긴밀하고 성공적인 협업을 보장하기 위해 팀에 합류했습니다.

새 아이콘 가중치 식별 이 프로세스의 주요 단계 중 하나는 앞으로 사용할 아이콘 가중치를 정의하는 것이었습니다. 우리는 주로 1px 선 두께를 사용했고 우리는 그것을 늘리고 싶다는 것을 알고 있었습니다. 하지만 얼마나 할까요? 우리는 몇 가지 다른 옵션을 시도했습니다. 우리가 있었던 곳에서 더 대담할수록 더 명확한 개선을 볼 수 있었습니다. 반복 작업 후에 우리는 두 가지 새로운 가중치를 결정했습니다. 이 결정은 두 가지 주요 측면을 기반으로 했습니다.

앞으로 어떤 크기를 사용할까요? 이전 아이콘 세트에는 220개 이상의 아이콘 x 5가지 크기 변형 = 1,100개의 개별 자산이 있었습니다. 업데이트의 목표는 팀이 시스템에 더 빠르고 쉽게 추가할 수 있도록 개별 자산의 수를 최대한 줄이는 것이었습니다.

Encore Web이 24px 아이콘만 사용하도록 성공적으로 전환했다는 사실은 이미 알고 있었지만 전체 시스템의 요구 사항도 고려해야 했습니다. 분석을 사용하여 16픽셀과 24픽셀이 가장 많이 사용되는 아이콘 크기임을 분명히 알 수 있었습니다.

16px 아이콘의 주요 사용 사례는 데스크톱과 같은 앱과 모든 트랙 행의 다운로드 표시기와 같이 아이콘이 더 작아야 하는 경우에 발견되었습니다. 이러한 경우 축소가 제대로 작동하려면 해당 아이콘 공간의 전체 너비와 높이를 사용해야 하는 16픽셀 아이콘이 필요했습니다.

아이콘이 더 큰 크기로 필요한 대부분의 경우 24px 크기를 늘리면 효과가 있다고 판단했습니다.

최종 결과는 5개 대신 2개 크기를 사용하여 시스템의 크기 변형 수를 이전의 40%로 줄였습니다. 개별적으로 그려진 아이콘이 660개로 줄어듭니다. 앞으로 세트를 새로 추가하거나 변경하면 효율성 향상이 큰 영향을 미칠 것입니다.

..

👇 더 자세한 내용은 아래 원문에서 확인해주세요.

3️⃣ 10가지 필수 UI(사용자 인터페이스) 디자인 팁 

웹사이트는 링크로 연결된 페이지 그룹 그 이상입니다. 인터페이스는 서로 다른 사물(이 경우 개인과 회사 또는 개인의 웹 존재)이 만나고, 소통하고, 서로 영향을 미치는 공간입니다. 이러한 상호 작용은 방문자에게 경험을 제공하며 웹 디자이너로서 가능한 한 좋은 경험을 보장하는 것이 당신의 임무입니다.

웹사이트는 링크로 연결된 페이지 그룹 그 이상입니다. 인터페이스는 서로 다른 사물(이 경우 개인과 회사 또는 개인의 웹 존재)이 만나고, 소통하고, 서로 영향을 미치는 공간입니다. 이러한 상호 작용은 방문자에게 경험을 제공하며 웹 디자이너로서 가능한 한 좋은 경험을 보장하는 것이 당신의 임무입니다.

그리고 그 핵심은 사용자를 최우선으로, 그리고 항상 생각하는 것입니다.

고맙게도 웹 디자인은 비교적 새로운 분야이지만 HCI(인간-컴퓨터 상호 작용)에 대한 과학적 연구 덕분입니다. 그리고 HCI 연구에서 나온 이 9가지 편리한 지침은 디자인 프로세스를 진행할 때 사용자에게 집중하는 데 도움이 될 것입니다.

인터페이스의 기능 레이아웃에 중점을 둔 인터페이스 디자인은 사용자 경험 디자인의 하위 집합으로, 더 큰 그림, 즉 인터페이스뿐만 아니라 전체 경험에 중점을 둡니다.

1. 사용자를 파악하라

무엇보다도 내부 & 외부 사용자가 누구인지 알아야 합니다. 즉, 분석 앱이 가져올 수 있는 모든 인구 통계 데이터를 알고 있어야 합니다. 그러나 더 중요한 것은 그들이 필요로 하는 것과 목표를 달성하는 데 방해가 되는 것이 무엇인지 아는 것을 의미합니다.

공감의 수준에 도달하려면 통계를 주의 깊게 분석하는 것 이상이 필요합니다. 웹사이트를 사용하는 사람들을 알아야 합니다. 그것은 그들과 얼굴을 맞대고 이야기하고, 그들이 당신의 제품(그리고 아마도 다른 사람들)을 사용하는 것을 지켜보고, "이 디자인에 대해 어떻게 생각하세요?"보다 더 깊은 질문을 하는 것을 의미합니다.

그들의 목표는 무엇입니까? 그들이 그러한 목표를 달성하는 데 방해가 되는 것은 무엇입니까? 웹사이트가 이러한 문제를 극복하거나 해결하는 데 어떻게 도움이 됩니까?

사용자가 무엇을 원하는지 아는것을 멈추지마세요. 더 깊이 파고 그들이 필요한 것을 찾으세요. 결국 욕망은 욕구의 파생물일 뿐입니다. 사용자의 근본적인 요구 사항을 해결할 수 있다면 사용자의 요구 사항을 해결하는 동시에 보다 근본적인 요구 사항을 충족할 수 있습니다.

데이터를 분석하고 사용자와 대화하면서 알게 될 통찰력은 사람들이 인터페이스를 사용하는 방식부터 해당 인터페이스에서 강조할 콘텐츠 유형에 이르기까지 모든 결정에 정보를 제공합니다.

2. 사람들이 인터페이스를 사용하는 방법 정의

인터페이스를 디자인하기 전에 사람들이 인터페이스를 사용하는 방법을 정의해야 합니다. 터치 기반 장치의 보급이 증가함에 따라 생각보다 중요한 문제입니다.

Tinder: 앱의 사용자 경험은 말 그대로 간단한 스와이프의 용이성과 충동으로 정의됩니다.

사람들은 웹사이트와 앱을 두 가지 방식으로 사용합니다. 직접(제품의 인터페이스 요소와 상호 작용) & 간접적(제품 외부의 UI 요소와 상호 작용)입니다.

직접적인 상호작용의 예

간접 상호작용의 예

때로는 상호 작용이 너무 쉽습니다. 사용자가 누구이며 어떤 장치를 사용하는지 여기에서 결정에 깊이 영향을 주어야 합니다. 노인이나 손재주가 제한된 사람들을 위해 디자인하는 경우 스와이프에 의존하고 싶지 않을 것입니다. 주로 키보드를 통해 앱과 상호 작용하는 작가나 코더를 위해 디자인하는 경우 모든 일반적인 키보드 단축키를 지원하여 마우스 작업 시간을 최소화하고 싶을 것입니다.

3. 기대치 설정

사이트 또는 앱과의 많은 상호 작용은 결과를 가져옵니다. 버튼을 클릭하면 돈을 쓰거나, 웹사이트를 지우거나, 할머니의 생일 케이크에 대해 헐뜯는 말을 할 수 있습니다. 그리고 어떠한 결과가 있을 때마다 불안함도 있습니다.

따라서 사용자가 버튼을 클릭한 후 어떤 일이 일어날지 미리 알려야 합니다. 디자인 & 복사를 통해 이 작업을 수행할 수 있습니다.

디자인으로 기대치 설정

카피로 기대치 설정

무언가를 영구적으로 삭제하는 것과 같이 되돌릴 수 없는 결과를 초래하는 작업의 경우 사람들에게 확실한지 묻는 것이 좋습니다.

InVision에서는 휴지통 아이콘을 클릭하여 즉시 삭제하지  않습니다. 대신, 확실한지 묻고 취소할 수 없음을 알려줍니다.

..

👇 더 자세한 내용은 아래 원문에서 확인해주세요.

🎄from.designer 

🗓️ 행사 일정 & UXUI 자료 

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

💭 단톡방 가입문의  (1,900명)

🎥 유튜브 UXUI 공개 영상  

🔖 이메일 

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