🔖 UXUI 해외 인기 아티클

🔖 2022년 5월 2주 TOP3

1️⃣ 포괄적인(Inclusive) 디자인

2️⃣ 랜딩 페이지 UI

3️⃣ 디자인 시스템의 기능과 미래

1️⃣  포괄적인(Inclusive) 디자인

포괄적인 디자인은 모든 배경과 능력을 가진 사람들을 이해하고 가능하게 하는 프로덕트를 만드는 방법론을 설명합니다. 접근성, 연령, 경제적 상황, 지리적 위치, 언어, 인종 등을 다룰 수 있습니다.

포괄적인 프로덕트 경험은 사용자 배경과 능력에 대한 깊은 이해를 바탕으로 합니다. 포괄적인 디자인을 우선시하는 디지털 인터페이스는 소속감을 조성하여 사용자 경험에 긍정적인 영향을 미칠 수 있습니다.

포괄적인 디자인은 모든 배경과 능력을 가진 사람들을 이해하고 가능하게 하는 프로덕트를 만드는 방법론을 설명합니다.  포괄적인 디자인은 접근성, 연령, 문화, 경제적 상황, 교육, 성별, 지리적 위치, 언어 & 인종을 다룰 수 있습니다.  가능한 한 많은 사용자가 아니라 가능한 한 많은 사용자의 요구를 충족시키는 데 중점을 둡니다.

포괄적인 디자인의 핵심은 사용자와 공감하고 해당 사용자의 다양한 요구를 해결하기 위해 인터페이스를 조정하는 것입니다.  포괄적인 디자인은 포괄적인 디자인 패턴을 생성합니다. 포괄적인 디자인 패턴의 예를 살펴보겠습니다.

웹 전반에 걸쳐 정부 사이트에서 구직 지원, 눈에 띄는 계정 생성 프로세스에 이르기까지 사용자는 미리 결정된 옵션 집합에서 인종을 선택해야 합니다. 내가 젊었을 때 이 입력에 관해 결정을 내리려고 할 때 옵션이 상호 배타적이어서 어려움을 겪었습니다.

혼혈 여성으로서 단일 인종을 선택하라는 양식은 작은 정체성 위기처럼 느껴졌습니다. 어떤 옵션도 내 정체성을 전달하지 못했습니다.  운 좋게도 이 양식과 해당 옵션은 둘 이상의 종족 옵션(또는 이전 라디오 버튼 대신 확인란)을 포함하도록 발전했습니다. 이것은 포괄적인 디자인 패턴의 예입니다.

접근성 & 유니버설 디자인 vs. 포괄적인 디자인

포괄적인 디자인과 관련하여 종종 혼동되는 두 가지 개념은 접근성과 유니버설 디자인입니다. 세 가지 개념 모두 인간과 기술 간의 장벽을 줄이고 포괄적인 경험을 만드는 것을 목표로 합니다.

접근성은 장애가 있는 사람들(청각, 인지, 신체 & 시각 장애 포함)이 인터페이스와 기술을 사용할 수 있도록 하는 데 중점을 둡니다.  접근성은 특정 편의 시설에 중점을 둔 포괄적인 디자인보다 범위가 좁습니다.  또한 WCAG(웹 콘텐츠 접근성 지침)와 같은 접근성 표준은 접근성을 포괄적이고 보편적인 디자인보다 평가하기 쉽게 만듭니다.  그러나 접근성은 장애인을 위한 의미 있는 경험을 위한 최소한의 것입니다.

유니버설 디자인은 모든 사람들이 최대한 접근하고 사용할 수 있는 하나의 경험을 만드는 것을 목표로 합니다.  포괄적인 디자인과 달리 유니버설 디자인은 조정이나 전문적인 디자인이 필요 없이 단일 디자인 솔루션을 적용합니다. 포괄적인 디자인은 원하는 결과를 얻는 한 다양한 디자인 변형을 수용하고 수용합니다.

일반적으로 유니버설 디자인은 유형 & 환경적 맥락에서 더 널리 사용됩니다(결국 물리적 개체 또는 공간의 여러 기능적 변형을 생성하는 데 비용이 많이 듭니다).  이에 비해 포괄적인 디자인은 상대적으로 저렴하고 이러한 인터페이스를 적용하기 쉽기 때문에 디지털 프로덕트 디자인에 더 자주 적용됩니다.

포괄적인 디자인 패턴의 예시

다시 말하지만, 포괄적인 디자인은 접근성, 연령, 문화, 경제적 상황, 교육, 성별, 지리적 위치, 언어 또는 인종을 포함한 다양한 주제를 다룰 수 있습니다.  다음에서 우리는 포괄적인 디자인 패턴의 몇 가지 예를 제공합니다.

고령자를 위한 텍스트 가독성 & 다크 모드

선배들과 함께 연구하는 동안 한 참가자는 "컴퓨터가 마음에 들지 않는 것 중 하나는 화면에서 글자를 너무 작게 만드는 것입니다."라고 말했습니다.  가독성을 보장하기 위해 디자이너는 상당히 큰 글꼴 크기를 사용하고 전경과 배경의 문자 간의 대비가 높으며 깨끗한 서체를 사용해야 합니다.  이러한 특성은 모든 사용자에게 중요합니다.  그러나 노안의 한 형태인 노안이 중년 이후에 흔하기 때문에 고령 사용자는 가독성이 좋지 않은 인터페이스로 인해 특히 어려움을 겪습니다.

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

2️⃣ 랜딩 페이지 UI

사용자 친화적인 디자인을 보장하는 방법

전자 상거래 상점을 디자인하든 단순한 웹 사이트를 디자인하든 방문 페이지는 웹 디자인의 필수적인 부분입니다.  그들은 종종 잠재 고객과 브랜드 간의 첫 번째 상호 작용 지점입니다.

그리고 여러분은 첫인상에 대해 사람들이 말하는 것을 알고 있습니다 – 여러분은 첫인상을 한 번 만들 수 있어요!

따라서 랜딩 페이지 UI 측면에서 사용자 친화적이면서 방문자에게 독특한 느낌을 주는 것이 중요합니다.  이 기사에서는 사용자의 관심을 끌고 전환율을 높이는 랜딩 페이지를 디자인하는 방법에 대해 논의할 것입니다.

사용자 친화적인 디자인은 무엇을 의미합니까?

‘사용자 친화적'은 사용하기 쉬운 인터페이스 디자인을 의미합니다.

모든 것은 1970년대에 시작되었습니다. 컴퓨터의 인기가 계속 높아짐에 따라 프로그램과 인터페이스를 설계하는 주요 방법인 코딩을 할 수 있는 사람들과 할 수 없는 사람들 사이에 간극이 나타났습니다.  시장이 더 많은 청중에게 도달함에 따라 이러한 새로운 사용자가 실제로 사용할 수 있는 프로그램을 구축하는 것이 필수적이 되었습니다.

틀림없이 그 당시 사용자 친화적인 디자인의 가장 큰 도약은 Apple Lisa의 출시와 함께 이루어졌습니다. 즉, 그래픽 사용자 인터페이스(GUI)가 있는 최초의 공개 컴퓨터이며 오늘날에도 여전히 사용되고 있습니다.

오늘날 개발자, UI 및 UX 디자인 팀은 계속해서 사용자 친화적인 경험을 완성하고 있습니다.  특히 요즘에는 형편없거나 '사용자 친화적이지 않은' 디자인 선택이 비즈니스에 피해를 줄 수 있습니다.

세련되고 사용자 친화적인 웹 디자인은 웹 사이트 사용 경험을 더 쉽게 만들어야 합니다.  사용자는 많은 인지 부하 없이 웹사이트, 모바일 앱 또는 게임을 탐색하는 데 문제가 없어야 합니다.  웹사이트는 유동적이고 직관적이며 복잡하지 않고 빨라야 합니다.  그리고 UX 디자인은 모든 기기에서 매끄럽고 일관되어야 합니다.

랜딩 페이지 UI를 디자인하는 방법은 무엇입니까?

UI 디자인과 랜딩 페이지 테스트의 두 단계를 살펴보겠습니다.전자부터 시작하겠습니다. 랜딩 페이지를 만들 디자인 단계입니다.

UI 디자인 단계 마스터

UX 디자인이 끝났다고 가정해 보겠습니다.  이 단계를 완료했거나 사용자 조사 및 기타 요소를 기반으로 랜딩 페이지의 정보 아키텍처를 만든 UX 디자이너의 도움을 받았습니다.

랜딩 페이지 UI를 만드는 UI 디자인 단계에서는 랜딩 페이지의 모양과 모든 UI 요소의 상호 작용을 처리합니다. 

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

3️⃣  디자인 시스템의 기능과 미래

자동차, 손목, 귀, 직장 책상, 집 TV 등 새로운 종류의 컴퓨터와 인터페이스가 유비쿼터스되고 있습니다. 이에 대한 응답으로 우리는 디자인 토큰, 상호 운용성, 핸드오프 자동화, CSS-in-JS 및 원자 스타일과 같은 디자인 시스템의 콘텐츠, 구성 및 전달에서 혁신을 보았습니다.

그러나 이것들은 새로운 종류의 경험이 시장에 출시되는 속도를 맞추기에 충분하지 않을 수 있습니다. 디지털 인터페이스가 더욱 개인화되고 사용자 정의가 가능하며 접근성이 높아짐에 따라 많은 설계 시스템이 기하급수적인 가능성의 무게로 인해 가늘어지고 신음하고 있습니다.

그 이유는 이름에도 불구하고 대부분의 디자인 시스템이 시스템과 그다지 비슷하지 않기 때문입니다. 물론, 그것들은 시스템에 따라 설계되었으며 구성 요소와 토큰이 정의되는 방식에 논리적 일관성이 있지만 실제로 대부분의 설계 시스템은 사전처럼 작동합니다. 구성 요소를 찾고 해당 구성 요소를 사용하기 위한 지침을 얻습니다.

가장 정교한 설계 시스템은 여러 코딩 언어로 지침을 제공할 수 있으며 자세한 문서와 함께 규칙적이고 정기적인 업데이트를 제공할 수 있습니다. 그러나 여전히 상대적으로 정적이어서 문서를 해석하고 올바른 컨텍스트에서 사용할 디자이너나 엔지니어가 필요합니다.

오늘날 우리가 디자인 시스템을 작동시킬 때 결합은 없습니다. 한 부분을 밀어도 다른 부분이 당기지 않습니다. 연동 또는 상호 연결이 없습니다. 네트워크, 피드백 루프 또는 힘이 작용하지 않습니다. 그리고 이러한 메커니즘이 없으면 지렛대도, 힘을 곱하는 간단한 기계도, 출력에 전력도 없습니다.

그러나 규모와 복잡성의 최전선에 있는 디자인 시스템에는 희미한 희망이 있습니다. 증가하는 사용자 및 인터페이스의 다양성을 관리하는 새로운 방법입니다. 현재의 혁신 속도를 따라잡을 수 있을 뿐만 아니라 새로운 수준의 사용자 정의 및 특수성을 가능하게 하는 잠재력이 있습니다.

이 에세이에서는 디자인 시스템의 사전 모델이 한계에 도달한 이유를 분석하고 지평선 너머에 우리를 기다리고 있는 도구와 패러다임을 미리 상상해 보고자 합니다.

사전의 놀라운 효율성

디자인 시스템을 사전과 비교하는 것은 쉬운 일이 아닙니다. 사전은 학습의 황금기 또는 상당한 문화적 변화의 기간 동안 언어와 문화에서 자주 나타납니다.

"design"에 대한 New Oxford American Dictionary 항목의 첫 번째 부분을 살펴보겠습니다.

항목은 작은 공간에 엄청난 양의 정보를 담고 있습니다.

일부 사전1에는 단어의 어원(어원의 언어), 동의어, 반의어, 일반적인 구 또는 지역 방언 및 변형과 같은 훨씬 더 많은 정보가 포함되어 있습니다.

사전의 힘은 단일 단어를 정보 모음에 연결(매핑)하는 방식에서 나옵니다. 사전 사용자는 "디자인"이라는 단어를 검색하여 말, 쓰기 또는 언어 연구에서 해당 단어를 효과적으로 사용하는 데 필요한 정보 집합을 찾을 수 있습니다.

사전 및 디자인 시스템

대부분의 현대적인 디자인 시스템은 사전처럼 작동합니다.

디자인 시스템의 사용자는 효율성과 일관성에 대한 대가로 구성 요소를 표준화하는 데 동의합니다. 아무도 처음부터 설계 결정을 내릴 필요가 없기 때문에 작업 속도가 빨라집니다. 또한 사용자는 다른 모든 최종 사용자와 조정할 필요 없이 구성 요소 또는 기본 가치를 조회하고 일관된 방식으로 사용할 수 있습니다. 모호성이 감소되거나 완전히 제거됩니다.

모호성은 협업을 저해합니다. 예를 들면 다음과 같습니다. 미국인이라면 아마도 "sloppy joe"가 무엇인지 알고 있을 것입니다(미국인이 아니라면 갈은 쇠고기와 토마토 소스를 곁들인 샌드위치입니다). 그러나 제 아내가 사는 뉴저지의 작은 지역에서 조잡한 조는 완전히 다른 샌드위치입니다(호밀 위에 칠면조와 코울슬로, 스위스 치즈, 러시안 드레싱). 그녀와 내가 점심으로 엉성한 조를 만들기 전에 조리법 책을 참조하지 않으면 우리 중 하나는 매우 실망할 것입니다.

마찬가지로 버튼을 둥근 모서리와 흰색 텍스트가 있는 파란색으로 생각하고 사각형 모서리와 아이콘이 있는 녹색 버튼을 생각한다면 일관되고 사용자 친화적인 인터페이스를 구축하는 데 어려움을 겪을 것입니다.

구성 요소의 이름을 설계, 기능 및 코드 사양에 매핑하는 사전은 모든 설계 시스템의 중요한 부분입니다. 이 소스가 없으면 설계 및 엔지니어링 팀은 설계 시스템의 약속을 실현하기 위해 많은 것을 할 수 없습니다. 

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

🎄from.designer 

🗓️ 행사 일정 & UXUI 자료 

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

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

🎥 유튜브 UXUI 자료 영상  

🔖 이메일 

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