• [세가지 유형의 사용자 인터뷰]
• [사용자 친화적인 폼 양식 만들기]
• [UI/UX 디자인 프로세스의 상위 5단계]
• [인간 중심의 웹 디자인을 달성하는 5가지 방법]
• [UX 멘탈 모델 생성이 웹 디자인 및 인터페이스에 미치는 영향]
• [홈페이지 UX의 현재 상태 – 8가지 일반적인 함정]
• [사용자 평가 및 리뷰를 디자인하는 방법]
• [사용성의 가치 또는 UI/UX 디자인의 ROI를 계산하는 방법]
• [훌륭한 404 오류 페이지를 작성하는 방법]
• [UI 키트란 무엇이며 왜 필요한가요?]
• [UX/UI 디자이너를 위한 19가지 최고의 프로토타이핑 도구]
• [랜딩 페이지로 유료 뉴스레터 구독자를 늘리는 방법(1부)]
• [웹 사이트 성능이 SEO 순위에 미치는 영향]
• [제품 컨텐츠 가이드라인 만들기]
• [Bad VS Good 접근성 디자인]
• [UX product 디자인 포트폴리오에 대한 6가지]
• [디자인의 접근성 테스트하기 위한 4단계 프로세스]
• [혁신적인 폼 양식 디자인의 10가지 예]
• [웹 사이트 전환을 개선하기 위한 21가지 학습]
• [디자인 씽킹 워크숍 (단계별 가이드)]
• [디지털 접근성을 위한 컬러]
• [Figma에서 프로그래밍 방식으로 256개의 새로운 디자인 시스템 구성 요소를 구축하는 방법]
• [기술 분야의 UX Writing 프로세스 이해하기]
• [비주얼 디자인에 색상을 올바르게 사용하는 방법]
• [인터페이스 디자인을 위한 시각적 계층을 구현하는 방법]
• [개인 브랜드 구축을 위한 그래픽 디자이너 가이드]
• [모던 미니멀 UI 스타일 가이드]
• [사용자 인터페이스 디자인 모범 사례]
• [사용자 공감을 통해 막대 차트를 더욱 통찰력 있게 만드는 방법]
• [접근성을 위한 디자인 방법]
• [10가지 프로토타이핑 디자인 기법]
• [스큐어모피즘, 플랫디자인, 뉴모피즘]
• [디자인 스프린트 방법으로 Crazy 아이디어 생성]
• [카피라이팅은 UX 라이팅이 아닙니다.]
• [웹 사이트를 리디자인하는 이유는 무엇입니까?]
• [히트 맵 가이드 (히트 맵의 용도 및 유형)]
• [8point 그리드 시대는 가고, 4point 그리드 시대가 올까요?]
• [사용자 중심 제품을 만드는 7단계]
• 비주얼 디자인의 유사성 원칙
• 신뢰를 위한 디자인
• 게이미피케이션 (참여도와 만족도를 높이기 위한 11가지 팁)
• 웹 디자인의 7가지 필수 원칙
• 브로셔 디자인을 위한 최고의 가이드
• 모던 웹 디자인에서 고딕체(산세리프) 타이포그래피의 역사와 사용법
• 인터랙션 디자인의 힘이란
• Netflix 디자인에서 배울 수 있는 것
• 새로운 브랜드 아이덴티티를 개발하는 방법
• 브랜드의 UX를 향상시키기위한 스타일 가이드를 만드는 방법
• 2021년 팝업 양식을 디자인하는 방법 (모범사례 + 예제)
• 원격 UX 워크샵을 위한 33가지 활동
• 쉐이프 디자인 (Shape Design)는 무엇일까요?
• 이메일의 웹 글꼴에 대한 가이드
• 스프린트 계획을 효율적으로 유지하는 방법
• 와이어프레임 시작하기
• 20가지 뛰어난 여백 디자인 예제와 모범 사례
• 2021년 4월 모바일 인터랙션 디자인 TOP5
• UX 디자인 가이드의 프로토타이핑 체크리스트
• UX 디자이너가 킥오프 미팅에서 질문해야 할 26가지 질문
• UI/UX 디자인을 즉시 개선하는데 도움이 되는 유용한 팁 3가지
• 이커머스 UI 디자인 오늘 판매를 시작하는 12가지 팁
• UX/UI 디자인의 아토믹 디자인과 모듈식 애플리케이션
• 마이크로 인터랙션을 사용하여 UI / UX를 개선하는 방법
• 프리랜서 그래픽 디자이너를 위한 8가지 고객 확보 방법
• 프로세스에 접근성 테스트 레이어를 적용하는 방법
• Google 머티리얼 디자인 가이드 라인의 10가지 핵심 사항
• 2021년 모든 웹 디자이너에게 필요한 기술 TOP14
• 디자인 시스템을 시작하는 방법
• Wish 디자인 시스템 색상이야기
• 전환하는 랜딩 페이지의 10가지 요소
• UX 디자이너를 위한 정보 아키텍처
• 접근성을 고려한 디자인
• UX 디자인에서 정량적 연구를 최대한 활용하는 방법
• 포트폴리오를 돋보이게 만드는 방법
• 테이블(표)의 UX가 사용자의 복잡한 결정을 내리는데 도움되는 방법

세가지 유형의 사용자 인터뷰

사용자로부터 직접 데이터를 수집하여 UX를 개선합니다. 구조화 된 인터뷰, 구조화되지 않은 인터뷰 및 상황에 맞는 문의의 세 가지 사용자 인터뷰 기술을 알아보십시오.

경험에서 문제를 식별하는 가장 좋은 방법 중 하나는 제품을 사용하는 사람들을 조사하는 것입니다. 사용자 인터뷰는 사용자의 요구에 대한 자세한 정보를 얻을 수 있는 훌륭한 UX 조사 방법입니다. 인터뷰를 통해 사용자에게 공감하고, 해결하려는 문제를 효과적으로 정의하고, 선입견 대신 편견 없는 데이터로 뒷받침되는 더 나은 솔루션을 만들 수 있습니다.

사용자 인터뷰를 하는 이유는 무엇입니까?

당사는 스파크박스에서 프로젝트를 시작할 때 Discovery 프로세스 중에 실제 사용자와 대화하는 것을 목표로 합니다. 프로젝트의 범위에 UX가 포함된 경우, 로젝트의 목표와 제품의 기회를 더 잘 정의하기 위해 직접 사용자로부터 더 많은 정보를 얻는 것이 좋습니다. 프로젝트의 목표를 정의한 후에는 프로젝트의 현재 위치와 필요한 정보를 얻을 수 있을 것으로 생각되는 사항에 따라 가용성 테스트 또는 사용자 인터뷰를 제안 할 수 있습니다.

사용자 인터뷰를 통해 다음을 수행할 수 있습니다.

• 잘못된 것을 만드는 위험을 줄입니다.
• 사용자의 요구 사항을 이해하도록 보장합니다.
• 사용자로부터 편견이 없는 1인칭 정보를 얻습니다.
• 사용자의 습관이나 정신 모델을 정의합니다.
• 사용자 요구의 동향을 파악합니다.

사용자 인터뷰의 3가지 유형입니다.

사용자 인터뷰에는 세 가지 일반적인 유형이 있습니다. 가장 일반적으로, 우리는 사용자와 일대일 대화를 나누고 일련의 질문을하는 구조화 된 인터뷰를 실시합니다. 또한 사용자가 사용하는 환경이나 도구를 확인하는 상황 별 문의를 수행하여 사용자와 사용자가 설계중인 제품을 어떻게 사용하는지 더 잘 이해할 수 있도록 합니다.

상황별 조회는 사용자가 제품 또는 경험을 사용하여 특정 태스크를 수행하는 것을 관찰하는 것입니다. 이러한 유형의 인터뷰에서는 인터뷰 전, 도중 및 후에 사용자에게 물어볼 수 있는 세심한 질문을 준비해야 합니다.

상황 별 문의의 이점은 사람들이 제품을 사용하는 방식을 실시간으로 관찰하거나 자신의 환경에서 경험을 경험할 수 있다는 것입니다. 이러한 유형의 인터뷰는 사용자가 무엇을 하고 있는지 적극적으로 듣고 관찰해야 합니다.

이러한 인터뷰는 사용자가 상상하기 어려운 조건 (예 : 공장 또는 소매 환경)에서 상호 작용할 제품에 적합합니다. 상황에 맞는 문의는 최종 제품 환경에서 작업하는 사람들을 직접 관찰하여 제품 상태를 파악하는 데 도움이 됩니다. Sparkbox에서는 이러한 인터뷰를 사용자가 처한 환경과 환경을 더 잘 이해해야 하는 프로젝트에 활용합니다.

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://sparkbox.com/foundry/interviewing_users_with_structured_interview_unstructured_interview_contextual_inquiry

사용자 친화적인 폼 양식 만들기

웹에서 발생하는 거의 모든 의미있는 상호 작용은 양식을 통해 이루어집니다. 따라서 디자인에있어 가장 흥미로운 요소는 아니지만 좋은 형태 디자인은 매우 가치 있는 기술입니다.

몇 가지 다른 리소스를 살펴본 후에 가장 효과적인 모범 사례 목록을 작성할 수 있었습니다. 그러나 양식은 상황에 맞는 요소이며 모범 사례에 대한 예외가 종종 요구된다는 점을 유념하십시오.

시작하기 전에 양식의 5 가지 주요 구성 요소를 빠르게 살펴 보겠습니다.

• 구조 : 양식의 레이아웃과 개별 필드의 순서
• 입력 필드 : 텍스트 상자, 라디오 버튼 또는 확인란과 같은 인터페이스 요소
• 필드 레이블 : 해당 입력 필드에 대한 설명
• 작업 버튼 : 사용자가 정보 제출과 같은 작업을 수행
• 피드백 : 사용자가 제출의 성공 여부를 확인 (피드백은 시각적 신호 또는 청각적 신호로 제공)
• 한 열 유지 한 열인 양식은 사용자가 더 쉽게 검색할 수 있고 스캔하기 편리합니다.

다중 열 양식 레이아웃은 잘못 해석되기 쉽습니다. 사용자는 필수 필드를 건너 뛰거나 잘못된 필드에 데이터를 입력하거나 양식 입력을 포기할 가능성이 높습니다.

여러 열을 사용하면 양식이 잘못 해석 될 수 있습니다. 일부 사용자는 하나의 열만 작성하면 된다고 생각할 수 있습니다. 어떤 사람들은 따라야 할 순서가 있다고 생각할 수 있습니다.

양식을 작성할 수 있는 명확한 경로를 제공하지 않으면 양식을 이해하는 데 훨씬 더 오랜 시간이 걸립니다. 완료 경로가 한 열일 경우, 양식을 완료하는 방법에 대한 모호성이 없습니다.

2. 흐름, 순서 및 그룹화

꼭 필요한 정보만 요청하세요. 1,200만 달러가 걸려 있을 수 있습니다. 추가하는 필드가 많을수록 사람들이 이 필드를 모두 작성할 가능성이 낮아지며, 이는 전환율에 영향을 미쳐 매출 손실을 초래할 수 있다는 점을 기억하십시오. 항상 특정 정보가 필요한 이유를 묻고 이해하십시오. 필요한 양식 필드를 결정하는 한 가지 방법은 질문 프로토콜을 사용하는 것입니다. 질문 프로토콜은 양식에 나열해야 하는 필드/질문과 나열해서는 안 되는 필드/질문을 체계적으로 결정하는 방법입니다.

논리적으로 양식 주문 적절한 시기에 적절한 정보를 요구하는 것이 중요합니다. 그렇지 않으면 사용자에게 큰 장애가 될 수 있습니다. 자신의 온라인 구매 경험에 대해 생각해 보십시오. 주문을 검토하기 전에 결제 세부 정보를 제공해야 한다면 기분이 어떻겠습니까? 아니면 이름을 기입하기 전에 주소를 입력해야 하는 건가요? 사용자의 관점에서 양식 구축을 구상해 보십시오.

그룹 관련 분야 논리적 그룹을 생성하면 한 번에 한 그룹에 너무 많은 요청을 하지 않고 정보를 보다 명확하게 처리할 수 있습니다. 그룹화 정보는 연관성을 나타냅니다. 구분하기 위해 패딩이 추가 된 그룹을 시각적으로 구분하는 것도 중요합니다.

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://uxdesign.cc/8-ways-to-make-forms-more-user-friendly-50f3f22c708c

UI/UX 디자인 프로세스의 상위 5단계

[1] UI/UX 디자인

UI/UX는 프로덕트 디자인과 관련하여 자주 사용되지만 실제로는 다른 의미를 지닌 두 가지 용어입니다. 어떤 차이점이 있는지 자세히 살펴볼까요?

먼저 UI는 "User Interface"를 의미하고 UX는 "User Experience"를 의미합니다.

UI/UX 디자인 프로세스라는 용어는 1990년대 후반 유명 디자이너이자 인지심리학자인 도널드 노먼에 의해 처음 소개되었습니다. 그는 이렇게 말한 적이 있습니다.

"휴먼 인터페이스와 사용 편의성이 매우 뛰어나다고 생각해서 이 용어를 발명했습니다. 저는 산업 디자인 그래픽, 인터페이스, 물리적 상호작용 및 매뉴얼을 포함하여 시스템에 대한 개인의 모든 경험을 다루고 싶었습니다. 그 이후로 이 용어는 널리 퍼져서 의미를 얻기 시작했습니다."

제품을 성공적으로 만들기 위해서는 제품이 즐겁고 유쾌해야 합니다. 즉, 엔지니어링, 제조 및 인적 요인의 요구 사항을 충족시킬 뿐만 아니라 전체 경험에 주의를 기울여야 합니다. 따라서 제품 설계와 경험을 훌륭하게 만들기 위해 전체 설계 프로세스를 5단계로 나눌 수 있습니다.

[2] 디자인 프로세스

디자인 프로세스의 초기 단계에서 디자인 또는 연구원 팀은 현재 제품이 사용자에게 친화적인지 여부를 테스트하는 방법인 휴리스틱 평가를 수행합니다. 즉, 사이트의 사용성을 테스트 합니다.

디자인 프로세스의 첫 번째 단계는 해결하려는 문제를 '공감'하며 이해하는 것입니다. 1단계에서는 제품의 실제 범위와 존재에 대해 이해하므로 매우 중요합니다.

디자인 프로세스 초기에 디자인 또는 연구팀이 발견적 평가를 실시하여 현재 제품이 사용자 친화적인지 여부를 테스트합니다. 즉, 사이트의 사용 가능 여부를 테스트 합니다.

이 프로세스에는 설계 팀, 제품 관리자 및 비즈니스 관리자가 포함됩니다. 이 단계의 목표는 최종 사용자가 누구인지, 최종 사용자가 직면한 문제, 충족해야 할 요구사항 및 기대 사항을 명확히 파악하는 것입니다.

사용자의 공감을 높이기 위해 설문 조사, 인터뷰 및 관찰 세션을 실시합니다. 이 단계의 결과는 사용자 페르소나, 사용자 스토리 및 사용 사례 다이어그램입니다.

[3] 사용자 페르소나

첫 번째 단계에서 수집한 모든 정보를 종합하여 다음 단계는 문제 설명을 정의하는 것입니다. 사용자에 대해 배운 내용을 기반으로 현재 당면한 과제를 정의하는 것은 디자이너의 책임입니다.

정의 단계를 설명하는 방법에는 여러 가지가 있지만, 가장 중요한 활동에서는 스티커 메모의 벽이 필요합니다. 이 스티커 메모는 연구를 통해 들은 관찰과 아이디어로 채워질 것입니다.

사람들이 현재 어떻게 문제를 해결하고 있는지에 대한 모든 정보를 수집함으로써 보다 혁신적이고 훌륭한 해결책을 제시합니다. 사람과 요구 사항을 잘 이해하는 것부터 시작해서 제품 디자인을 발전시키는 데 도움이 됩니다

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://muskanverma5910.medium.com/top-5-steps-of-ui-ux-design-process-e65d95b740be

인간 중심의 웹 디자인을 달성하는 5가지 방법

인간 중심 디자인은 사용자를 염두에두고 웹 사이트를 개발하는 것입니다. 도메인을 구축하는 과정에서 디자인에 많은 것들이 포함됩니다. 브랜드에 맞는 색상, 로고 및 글꼴등 고려해야 할 것들이 많이 있습니다.

때로는 프로세스가 너무 복잡 할 수 있으며, 사이트와 상호 작용할 사람들을 잊을 수도 있습니다. 그러나 웹 디자인의 초점은 항상 사람이어야 합니다.

인간 중심의 디자인 접근법은 사용자의 문제에 대한 해결책을 만들어 내려고 합니다. 사용자, 사용자 요구 사항, 생활 상황 및 행동을 이해하려고 합니다. 모든 디자인 결정은 사용자 환경을 개선하고 사용자의 문제를 해결하며 청중과 지속적인 관계를 형성하는 데 도움이 되므로 이러한 관점에서 이루어져야 합니다. 인간 중심의 웹 디자인은 세 가지 중요한 요소로 구성됩니다.

• 공감: 사용자의 디자인은 사용자가 진정으로 관심을 갖고 있다는 것을 보여줄 수 있는 용기를 주어야 합니다.
• 창의성 : 디자인은 사람들의 문제를 혁신적으로 해결해야 합니다.
• 비즈니스 요구사항: 웹 디자인을 사용하여 제품 또는 서비스를 상업적으로 실행 가능하고 성공적으로 만듭니다.

인간 중심의 설계를 구축하는 데 필요한 기본 사항을 제공하기 위해 다음과 같은 5가지 방법을 소개합니다.

1. 사람 중심

이것이 인간 중심 디자인의 기본 원리이며, 사람들을 디자인 과정의 중간에 놓이게 합니다. 웹 사이트 사용자는 요구를 충족하기 위해 웹 사이트와 상호 작용하는 실제 사용자임을 이해하십시오.

그렇기 때문에 사람들이 웹 사이트를 방문하고 싶어하는 이유를 찾아 디자인을 시작하는 것이 매우 중요합니다.

타겟층을 파악하면 디자인의 토대가되는 사용자 페르소나를 만들고 만족시키려는 요구 사항을 파악하는 데 도움이 됩니다. 이를 염두에두면 더 나은 사용자 경험을 위해 콘텐츠를 쉽게 구성하고 구성 할 수 있습니다. 다음은 웹 사이트 콘텐츠 제작에 대한 추가 자료입니다.

이 웹 사이트는 사용자를 위한 것임을 항상 명심하고, 대상 독자들이 더 많은 가치를 창출할 수 있도록 하는 데 초점을 맞추십시오.

2. 해결하기에 적합한 문제 찾기

사용자가 가질 수 있는 모든 문제를 해결하는 대신 문제의 근본 원인을 파악해야 합니다. 이 문제를 해결하는 가장 좋은 방법은 적절한 사용자 조사를 통해 확인하는 것입니다.

사용자에게 필요한 것과 원하는 것을 구분해야 합니다. 우선 고객의 요구 사항을 충족하는 데 주력해야 합니다. 사람들을 당신의 웹 사이트로 불러오는 것은 니즈가 있습니다. '이유'를 묻는 것은 사용자의 요구 사항을 파악하는 데 도움이 될 수 있습니다.

보다 강력한 연구를 통해 더 나은 결과를 얻을 수 있습니다. 이 단계에 충분한 시간과 노력을 투자하십시오. 이 과정에서 경쟁업체가 사용자 문제를 어떻게 해결하고 있는지도 조사하십시오. 이를 통해 실패한 부분을 개선하여 설계에 경쟁력을 부여 할 수 있습니다.

3. 모든 것을 함께 생각하기

웹 사이트를 설계할 때 기능을 개별적으로 생각하고 사용자에게 어떤 영향을 미치는지 생각하고 싶을 수 있습니다. 디자이너에게는 효과가 있을 수 있지만 사용자에게는 그렇지 않을 수 있습니다. 사용자는 여정을 중단하지 않고 한 페이지에서 다음 페이지까지 원활한 환경을 원합니다. 그들에게 웹사이트는 모두 하나의 경험이며, 여러분은 그렇게 되도록 노력해야 합니다.

한 부분이 적절하다고 느껴지지 않으면 디자인의 모든 것이 상호 연결되어 전체 사용자 환경이 영향을 받게 됩니다. 사용자가 웹 사이트와 상호 작용하는 방식을 이해하려면 디자인을 테스트하고 사용자 피드백을 확인하십시오.

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://codegeekz.com/5-ways-to-achieve-a-human-centered-web-design/

UX 멘탈 모델 생성이 웹 디자인 및 인터페이스에 미치는 영향

UX 디자인은 진공 상태에서 완료될 수 없습니다. 디자이너가 고객을 둘러싼 많은 것을 이해하고 읽고 이해해야 하는 통합 활동입니다. 디자이너가 사용자와 공감하기 위해 사용하는 방법 중 하나는 UX 멘탈 모델입니다.

간단히 말해서, 멘탈 모델은 사용자가 액세스하는 인터페이스에서 사용자가 가지는 욕구와 기대를 나타냅니다. 모바일 애플리케이션일 수도 있고 웹 사이트일 수도 있습니다. 사용자에게 더 나은 사용자 환경을 제공하려면 사용자에게 필요한 흐름, 정보 공유 및 구조가 필요합니다.

사용자가 자신의 관점을 직접 공유하여 원하는 대로 설계를 생성할 수 있는 것은 아닙니다. 이것들은 사용자의 뇌 속에 항상 존재하는 UX 멘탈 모델입니다. 이러한 모델은 유사한 애플리케이션과의 과거 상호 작용으로 인해 사용자의 마음 속에서 생성됩니다.

예를 들어, 사용자는 날씨 앱을 사용한 경험을 기억하고 다른 날씨 애플리케이션과 동일한 흐름과 레이아웃을 보고 싶어할 것입니다. 이 기사에서는 UX 디자인에서 멘탈 모델을 구현하는 방법을 살펴보겠습니다.

.

잘못 정렬된 멘탈 모델을 개선하는 방법입니다.

UX 멘탈 모델은 사용자 중심 설계에 적합한 모델을 사용하는 것이 중요합니다. 또한 모델을 이미 만들었다 하더라도 더 나은 설계를 만들 수 있도록 모델을 개선할 수 있는 여지가 항상 있습니다.

잘못 정렬된 멘탈 모델은 참여를 유도할 잠재력이 없는 비정상적인 디자인을 생성하게 됩니다. 따라서 이러한 모델은 사용자의 선호도에 따라 재정렬되어야 합니다. 우리는 다른 방법을 통해 기존 멘탈 모델을 개선할 수 있습니다.

1. 사용자 베이스 발견 :

모든 유형의 디지털 인터페이스를 개발하기 전에 UX 연구원과 전략을 통해 제품 사용자를 찾는 작업이 주어집니다. 모든 사용자가 개발하려는 제품을 사용하는 것은 아닙니다. 따라서 UX 연구진은 사용자 기반을 파악하고 사용자 페르소나를 생성해야 합니다. 이것은 UX 디자인을 시작하기 전에 멘탈 모델을 개선하고 만드는 데 크게 기여할 것입니다.

2. 상세한 온보딩 :

신규 고객을 온보딩할 때 제품 및 서비스에 대한 고객의 선호도를 종합적으로 파악해 보는 것이 좋습니다. 고객의 기대치, 기능 사용 가능성 또는 원치 않는 기능과 같은 이러한 측면을 파악하면 이상적인 UX 설계를 수립하는 데 도움이 될 것입니다. 멘탈 모델을 개선하면 당신을 더 나은 디자이너, 디테일 지향적인 연구가가 되고 고객 만족을 위한 고유한 경로를 만들 수 있습니다.

3. The Big Sharks 관찰 :

여러분의 회사가 스타트업이라는 것을 고려해 볼 때, 여러분은 제품을 위한 웹사이트를 구축했습니다. 이제 과제는 시장에서, 특히 현재 시장을 지배하고 있는 경쟁사와 유사한 제품들을 알아내는 것입니다. 웹 사이트를 확인하고 레이아웃과 흐름을 어떻게 구성했는지 이해하십시오. 대기업들이 UX 멘탈 모델에 기여하는 UX 연구원과 디자이너들로 이루어진 팀을 가지고 있을 가능성이 높기 때문입니다.

4. 실시간 피드백 :

반복적인 개발은 모든 종류의 디지털 제품 개발의 기본입니다. 사용자의 피드백을 무시하는 대신 고객의 피드백을 물어보고 실시간으로 멘탈 모델을 변경하는 것이 미션이 될 수 있습니다. 멘탈 모델 UX 디자인은 더 나은 애플리케이션과 웹사이트 디자인을 선별하는 데 필요한 것입니다.

5. 사용자에게 권한 부여 : 애플리케이션 기능 또는 설계의 변경 사항은 사용자가 디지털 제품을 업데이트할 때 반영됩니다. 이 경우 업데이트를 강제 적용하면 사용자가 변경 사항을 적용할 준비가 되지 않아 앱을 포기하게 될 수 있습니다. 대신, 먼저 애플리케이션의 업데이트된 부분을 사용자와 공유한 다음 업데이트된 인터페이스로 작업할 수 있는 자유를 제공하는 것이 좋습니다. 이 접근 방식을 통해 사용자는 변화에 대비하고 수용할 수 있습니다.

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://mockitt.wondershare.com/ui-ux-design/ux-mental-models.html?utm_source=other_media_sites&utm_medium=social&utm_campaign=md&utm_term=medium_post&utm_content=post_md_md_en_20087918_2021-03-11

홈페이지 UX의 현재 상태 – 8가지 일반적인 함정

홈페이지는 사용자에게 세 가지 주요 제품 찾기 경로, 즉 범주 탐색, 검색 및 큐레이션된 경로를 추구하는 방법을 명확히 하는 것이 중요합니다.

2020년 후반에 60개 전자 상거래 웹 사이트를 벤치마킹한 결과, 전반적으로 홈페이지 UX의 성능이 양호한 것으로 나타났습니다. 그러나 사이트의 32%는 보통이거나 저조한 성능을 보이고 있습니다.

벤치마크에는 10,900개 이상의 홈페이지 및 카테고리 요소가 포함되어 있습니다. Baymard의 UX 연구팀이 수동으로 검토하고 점수를 매겼으며, 미국과 유럽의 상위 60개 전자 상거래 사이트에서 3,100개의 모범 사례와 최악의 사례(성능 검증)가 적용되었습니다.

이 기사에서는 이 데이터셋의 일부를 분석하여 전자상거래 홈페이지 UX의 현재 상태를 제공하고, 대부분의 전자상거래 사이트에 적용되는 8가지 일반적인 설계상의 함정과 전략적 감시를 간략히 설명합니다.

1. 다양한 제품 유형을 시각적으로 나타내지 못합니다.
2. 지나치게 공격적이고 주의를 산만하게 하는 광고를 사용합니다.
3. 캐러셀의 잘못된 구현입니다.
4. 잘 정의된 범위를 선택하는 데 도움이 되지 않습니다.
5. 맞춤형 이미지와 디자인이 부족합니다.
6. 검색 필드를 즉시 표시하지 않습니다.
7. 국가 및 언어 선택이 잘못 구현되었습니다.
8. 실제 히트 영역과 일치하지 않는 시각적 히트 영역이 있습니다.
9. 8 일반적인 홈페이지 UX 함정 및 전략적 실수

위에서 설명하는 함정은 많은 사이트에서 안고 있는 문제이며, 전자상거래 산업 전반에 대해 "기회를 놓치는 것"도 포함하고 있습니다.

이는 미국과 유럽의 상위 80개 전자 상거래 사이트의 평균 성능을 분석한 것입니다.

특정 사이트를 분석할 때, 거의 항상 소수의 중요한 UX 문제와 함께 가치가 있는 개선 사항들이 있습니다.Fortune 500대 기업에 대한 UX 감사를 수행하는 경우에도 마찬가지입니다.

따라서 거의 모든 사이트에는 일부 사용자의 부정적인 경험을 방지하기 위해 수정해야 하는 홈페이지의 몇 가지 중요한 영역이 있습니다.

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://baymard.com/blog/2021-current-state-of-ecommerce-homepage-ux

사용자 평가 및 리뷰를 디자인하는 방법

사용자는 어떤 컨텐츠 또는 제품의 품질이 더 높은지 결정할 때 등급에 의존합니다. 사용자 등급은 본질적으로 정량적 정보이므로 정성적 데이터(사용자 리뷰)로 보완하는 것이 좋습니다.

평가 및 검토 시스템을 언제 사용해야 합니까? 사용자 평가와 리뷰는 많은 사람들이 이해하는 것이 되어 사용자에게 좋고 나쁨을 알려 줍니다. 95%의 사용자는 제품에 대해 자세히 알아보기 위해 리뷰에 의존합니다.

평가 시스템은 사용자 기반이 많을 때 잘 작동합니다. 항목 간의 비교는 투표/검토 횟수가 많을 때만 의미가 있습니다. 소규모 사용자층은 의미 있는 그림을 만들기에 충분한 데이터를 제공하지 못할 가능성이 높습니다.

• 평가 시스템의 필수 속성

사용자가 특정 항목에 대한 의견을 남기기 쉬워야 합니다. 아래에 언급된 것과 같은 간단한 평가 시스템을 사용하십시오.

1. 좋아요/싫어요로 나뉘는 이진 평가 시스템은 기사, 음악 또는 비디오와 같은 콘텐츠에 적합 합니다.
2. 유튜브는 별 1~5개 등급 시스템을 사용합니다. 별 1개는 '끔찍함'을 나타내고 별 5개는 '우수한' 경험/제품을 나타냅니다. 이 평가 시스템은 전자 상거래에서 일반적으로 사용됩니다.
3. 별점 1~10점 등급 시스템은 1-10개의 별 등급 척도에 의존합니다. 이를 통해 사용자는 제품/서비스에 대한 보다 구체적인 등급을 제공할 수 있습니다.

IMDb는 별 10개 등급 시스템을 사용합니다. 사용자가 항목을 평가할 때 시스템은 사용자에게 평가가 기록되었음을 알려야 합니다.

평가 대상 정보를 전달할 때는 명확히 해야 합니다. 예를 들어, 사용자가 온라인 마켓플레이스에서 제품을 구매할 때는 자신이 구매한 품목이나 판매자의 서비스 등 평가 등급을 확인해야 합니다.

"평점과 리뷰가 정직하고 진실된 것인가?"는 사용자가 등급 섹션을 탐색할 때 묻는 질문입니다. 사용자들이 압도적으로 긍정적인 리뷰만 보게 되면 리뷰를 의심하기 시작합니다.

사용자는 항목에 대한 사용자의 주관적인 의견을 신뢰할 수 있다고 느껴야 합니다. 특정 제품을 홍보하기 위해 등급을 조작하지 마십시오.

이 섹션에 언급된 모범 사례는 전자 상거래 경험에 더 적합합니다. 구매 후 경험에 '제품 등급' 단계를 추가합니다.

eCommerce 웹 사이트의 경우 사용자가 제품을 수령한 후 제품 등급 요청을 트리거하는 것이 좋습니다. 어떤 사람이 잠시 동안 제품을 사용할 때, 그들은 더 가치 있는 피드백을 제공할 수 있습니다.

사용자가 사진을 업로드할 수 있게 함으로써 사용자 리뷰를 보다 잘 설명할 수 있습니다. 다른 사람들이 리뷰의 의미를 훨씬 더 쉽게 이해할 수 있게 됩니다. 또한 사진은 신뢰성과 신뢰성을 더해줍니다.

사용자에게 평가 및 리뷰를 제공하도록 요청할 때 몇 가지 평가 기준을 참조할 수 있습니다. 사용자로부터 보다 자세한 피드백을 수집하는 데 도움이 됩니다.

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://uxplanet.org/how-to-design-user-rating-and-reviews-1b26c0208d3a

사용성의 가치 또는 UI/UX 디자인의 ROI를 계산하는 방법

가치는 사물의 중요성, 의미성, 유용성으로 정의됩니다.

사람들은 잠재적인 이점을 기반으로 결정을 내리는 경향이 있습니다. 예를들어 "이 제품을 구매해야 하나요?" 또는 "이 서비스에 가입해야 합니까?"

디자인의 비즈니스 가치를 평가할 때, 기업가는 "디자이너를 고용해야합니까?"라고 자문 할 수 있습니다. 이 질문은 본질적으로 소유자가 디자인 수익을 항상 정량화 할 수 없기 때문에 발생합니다.

이 기사에서는 이 프로세스에 적용할 디자인 품질 및 측정 기준을 측정하는 방법을 설명합니다.

.

1. UX의 ROI를 측정하는 방법은 무엇입니까?

UI/UX 디자인은 종종 정량적 지표로 표현할 방법이 없는 추상적인 개념으로 간주됩니다. 많은 사람들이 사용자 전용으로 개발된 것으로 생각하지만 실제로는 그렇지 않습니다.

수행된 작업과 얻은 결과 간의 관계를 어떻게 볼 수 있을까요? UX품질을 평가하기 위한 다양한 측정지표가 있습니다. 디자이너의 역량이 의심되고 작업 성능을 평가하려는 경우 이러한 기능을 사용할 수 있습니다.

Google의 HEART는 제품과 상호 작용하는 사람의 인상을 반영하는 프레임워크입니다. 다양한 관점에서 사용자의 태도를 분석하고 현재 요구 사항이 얼마나 잘 충족되는지 보여줍니다. HEART는 행복, 참여, 채택, 유지 및 작업 성공의 5가지 범주로 나뉩니다. 종합하면 사용자로부터 피드백을 받고 실시간으로 응답할 수 있는 포괄적인 UX 측정 항목 세트를 형성합니다.

이 프레임워크로 작업하기 위해 Google은 "목표 – 신호 – 측정항목" 시스템을 제공합니다.

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://softensy.com/true-value-of-usability-or-how-to-calculate-roi-of-ui-ux-design/

훌륭한 404 오류 페이지를 작성하는 방법

우리는 종종 고객과 소통 할 기회를 놓치기도 합니다.

404 오류 페이지를 통해 사용자는 찾고 있는 페이지를 사용할 수 없거나 존재하지 않음을 인지할 수 있습니다. 처음 사용하는 사용자는 404 오류 페이지를 보고 사이트를 떠나 돌아오지 않을 수 있습니다.

우리는 이 페이지를 사용하여 홈으로 다시 연결하거나 새 제품을 언급하거나 다른 유용한 URL로 리디렉션 할 수 있습니다.

404 오류 페이지를 사용하여 사용자와 연결하고 그들과 공감하십시오. 그들의 경험이 얼마나 실망 스러운지 인정하고 그들을 웃게 만드십시오. 픽사의 404 오류 페이지를 보면 장난기가 넘치는걸 볼수 있습니다.

웹 사이트를 만들 때 다른 페이지의 우선 순위를 지정할 수 있습니다. 그러나 오류 페이지는 브랜드 아이덴티티를 전달하고 전환에 기여할 수 있습니다.

404 페이지는 UX 작가가 빛을 발하고 그들의 창의력을 잘 활용할 수 있는 좋은 기회입니다.

그렇다면 훌륭한 404 페이지를 어떻게 만드나요?

눈에 편한 디자인을 만드십시오. Hootsuite와 We Are Social의 보고서에 따르면 우리는 매일 평균 6시간 42분을 온라인에서 보냅니다. 우리는 종종 넘치는 정보에 압도 당합니다.

404 페이지는 시각적으로 유쾌해야 합니다. 텍스트를 너무 많이 사용하지 마십시오. 적을수록 좋습니다.

대부분의 연구에 따르면 웹 사용자들은 많이 읽지 않는다는 것을 보여줍니다. 대신, 그들은 스캔합니다. 그들을 위해 쉽게 만드십시오.

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://bootcamp.uxdesign.cc/how-to-write-a-great-404-error-page-f3e76297d70c

UI 키트란 무엇이며 왜 필요한가요?

디자이너, 코드 작성자 또는 개발자는 언제든지 필요한 인터페이스 요소를 가져와서 다른 상태에서 어떻게 보이는지 이해하면서 사용할 수 있습니다. 이를 위한 UI 키트가 있습니다.

모든 디자인을 위한 탄탄한 기반을 구축하여 성능을 최적화하고 디자이너가 빠르고 효율적으로 아름다운 인터페이스를 만들 수 있도록 합니다. 이 자료에서는 UI 키트의 용도와 사용 시간 및 비용을 절약하는 방법에 대해 설명합니다.

• UI 키트는 무엇입니까?

UI 키트는 미리 만들어진 사용자 인터페이스 솔루션 세트입니다. 다음과 같은 경우가 많습니다. 버튼, 입력, 메뉴, 체크 박스, 다양한 스위치, 사이트와의 상호 작용의 기타 표준 요소

• 디자인에서 사용자 인터페이스 키트란 무엇입니까?

UI 키트의 모든 요소는 상호 연결되어 동일한 스타일로 만들어집니다. 고급 UI 키트에는 다음이 포함됩니다. 그리드, 열, 타이포그래피 사용 규칙, 들여 쓰기 등 UI 키트는 대규모 프로젝트를 단순화, 통합 및 통합하는 데 사용됩니다.

이전 페이지의 모델에 따라 구성요소를 사용하여 각 다음 페이지를 빠르고 효율적으로 작성할 수 있습니다. 또한 프로젝트의 모든 작업 단계에서 디자이너, 레이아웃 디자이너, 개발자 등 모든 사람이 확인하는 프로젝트의 주요 디자인 문서입니다.

• 글로벌 기업의 UI 키트의 예를 살펴보십시오.

Google의 UI 키트, Apple의 휴먼 인터페이스 UI 키트, Microsoft UI 키트, Amazon UI 키트

• 비즈니스를 위한 UI 키트 제작의 장단점

각 UI 키트 요소는 모든 사이트의 페이지에서 재사용할 수 있습니다. 사이트에 페이지가 많을수록 UI 키트를 만들어야 할 필요성이 커집니다. 모든 요소가 조화롭게 보이도록 해야 합니다. UI 키트를 사용하지 않으면 인터페이스가 조잡해보입니다. 따라서 사용자는 이 요소가 의미하는 바를 이해하지 못할 것입니다.

• 사용자 인터페이스 키트에는 다음과 같은 웹 또는 앱 설계 전문가가 있습니다.
• 모든 프로젝트의 통합 스타일 모든 정보 시스템은 동일합니다. 고객은 동일한 요소로 귀사를 인식 할 것입니다. 또한 모든 요소와 그 의미에 익숙해 지므로 각 신제품을 보다 편안하게 사용할 수 있습니다.
• 전체 팀의 UI 키트에 즉시 액세스 분석가, 디자이너, 개발자는 링크를 통해 키트에 액세스 할 수 있습니다. 모든 요소, 사용 규칙을 독립적으로 숙지하고 프로토타입, 프론트엔드 및 디자인을 제작할 수 있습니다.
• 개발 속도 미리 만들어진 UI 키트를 사용하면 버튼, 입력 필드, 테이블, 차트 등 모든 요소가 이미 설계되고 구성 요소로 변환된 모든 요소를 자바스크립트에서 사용할 수 있습니다. 설계 및 개발 시간을 낭비하지 않고 시스템을 구축할 수 있습니다. 또한 프로토타이핑을 단순화합니다. UI 키트는 제품에 대한 개발 속도를 제공합니다.
• UI 키트를 사용하는 방법?

우리는 프로젝트에 UI 키트를 사용하고 제작할 수 있습니다. 처음부터 아무것도 그릴 필요가 없습니다. UI 키트를 가져다가 필요한 부분으로 나눕니다. 아이콘, 진행 표시줄, 버튼 등을 사용합니다.

• 디자인 시스템 및 UI 키트와의 관계

사이트의 UI를 변경하거나 페이지 또는 새 제품을 기존 리소스에 추가할 때, 모든 UI 요소가 동일한 스타일로 유지되고 하나의 메커니즘으로 작동하도록 주의해야 합니다. 이것이 바로 디자인 시스템이 필요한 이유입니다.

디자인 시스템은 작업에 필요한 모든 UI 키트 요소를 저장하고, 배치하고 바로 사용할 수 있는 전자 카탈로그입니다.

예를 들어 신입 사원이 회사에 출근할 경우 사이트에 삽입해야 하는 버튼을 오랫동안 찾을 필요가 없습니다. 이 버튼은 이미 디자인 시스템의 방대한 문서에 포함되어 있습니다. 이 버튼은 모든 직원이 일정 수준의 액세스 권한으로 사용할 수 있습니다.

디자인 시스템은 팀 커뮤니케이션이라는 또 다른 장점을 가지고 있습니다. 프로세스의 각 참여자가 제품 사용 방법과 방법을 정확하게 알고 있기 때문에 제품을 몇 배 더 빨리 만들 수 있습니다.

개발자는 제품의 프로토타이핑 패턴을 이해합니다. 디자이너와 개발자는 구성요소를 함께 구현할 수 있습니다. 프로젝트 관리자는 항상 변경할 요소와 이유를 지정할 수 있습니다.

디자인 시스템은 마이크로소프트, 애플과 같은 대기업을 위해 만들어졌습니다. 여기에는 다양한 제품들과 100페이지가 넘는 리소스 페이지들이 있으며 모든 것들이 함께 어울리고 전체적으로 보여야 합니다.

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://gapsystudio.com/blog/what-is-a-ui-kit/?ref=webdesignernews.com

UX/UI 디자이너를 위한 19가지 최고의 프로토타이핑 도구

프로토타이핑은 사용자와 개발자가 프로덕션을 시작하기 전에 웹 사이트 또는 앱의 전체 개요를 볼 수 있도록 합니다.

프로토타이핑은 최종 버전을 사용하지 않고도 팀과 협업하고 옵션을 탐색할 수 있도록 지원하기 때문에 디자인 프로세스에서 반드시 필요한 작업입니다. 프로토타이핑을 통해 최종 제품을 실행하기 전에 UX/UI 설계가 완벽한지 확인할 수 있습니다.

대부분의 프로토타이핑 도구는 코딩 경험이 없어도 됩니다. 다음은 UX/UI 디자이너를 위한 최고의 프로토타이핑 도구 19개와 함께 제공되는 몇 가지 장단점 입니다.

[1] 피그마 (Figma)

Figma는 UX/UI 디자이너를 위한 최고의 프로토타이핑 도구이며, 팀들이 함께 프로토타입을 제작하고 디자인을 할 수 있도록 협업을 확대하도록 설계되었습니다. 클라우드 기반이기 때문에 작업이 자동으로 저장되므로 작업 중인 프로젝트의 초안이나 버전을 잃어버릴 염려가 없습니다.

무료 버전부터 시작한 다음 전체 조직에서 사용할 수 있는 최대 월 45달러 버전까지 작업할 수 있습니다. Designlab 학생인 경우 Perks 페이지를 통해 전문 피그마 계정의 1년 무료를 받을 수 있습니다.

무료 Figma 101 과정을 통해 기본 및 고급 기능을 모두 배우고 오늘날 시장에서 가장 우수한 프로토타이핑 도구 중 하나를 최대한 활용하십시오.

[2] 어도비 XD (Adobe XD)

Adobe XD는 UX/UI 디자인 및 개발 팀이 다양한 프로토타이핑 도구에 액세스할 수 있도록 함으로써 동시에 도움을 줍니다. Adobe XD는 설정 및 사용이 쉬울 뿐 아니라 복잡하고 상세하게 디자인된 도구도 제공합니다.

개인용 스타터 버전은 무료로 사용할 수 있으며, 단일 앱에 대해 한 달에 9달러 99센트를 지불하도록 선택할 수 있습니다.

무료 Adobe XD 101 과정을 통해 Adobe XD를 사용하여 프로토타입을 만들고 UX/UI 디자인 기술을 전반적으로 향상시키는 방법을 알아보십시오.

[3] 스케치 (Sketch)

Sketch는 팀이 협업하고 프로토타입을 만드는 데 도움이 되지만 Mac 기기에서만 사용할 수 있습니다. 또한 Sketch는 팀과 동일한 프로젝트를 동시에 수행할 수 있도록 지원하는 플러그인을 제공하고 다양한 내보내기 옵션을 지원합니다.

필요한 라이센스 수에 따라 Sketch는 연간 $79에서$99의 비용이 들 수 있습니다. Designlab 학생인 경우 Perks 페이지를 통해 50% 할인(50달러 상당)을 받을 수 있습니다.

매일 실습하는 튜토리얼, 스케치에서 사용할 무료 다운로드 가능 템플릿 및 스케치 치트 시트까지 포함된 무료 스케치 101 과정을 통해 스케치를 마스터하는 방법을 배우십시오.

[4] 제플린 (Zeplin)

Zeplin을 사용하면 프로토타입을 최종 제품으로 쉽게 전송할 수 있습니다. UX/UI는 독특한 느낌을 주지만 디자인을 내보낼 때 가끔 문제가 발생합니다.

무료 버전을 제공하지만 비즈니스 규모와 구조에 따라 사용자당 월 10.75달러에서 월 26달러까지 비용이 들 수 있습니다.

[5] 프레이머 (Framer)

Framer는 팀이 협업하고 코딩 및 디자인에 집중할 수 있도록 지원합니다. 일부 신규 사용자는 프로그램의 인터페이스와 제한에 대해 불만을 제기하지만, 프로토타입 설계에 필요한 모든 유연성과 속도를 제공합니다.

무료 버전에서 각 편집자에게 한 달에 20달러만 내면 무제한 프로젝트를 지원하는 프로 버전까지 다양한 구독 플랜을 제공합니다.

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://bootcamp.uxdesign.cc/19-best-prototyping-tools-for-ux-ui-designers-f1953fa4fcb8

랜딩 페이지로 유료 뉴스레터 구독자를 늘리는 방법(1부)

최근 들어 유료 뉴스레터는 중요한 비즈니스가 되었으며 이것은 당연한 일입니다.

독자를 유료 고객으로 바꾸는 것은 쉬운 일이 아닙니다. 하지만 강력한 랜딩 페이지로 더 많은 구독자를 확보 할 수 있는 기회를 높일 수 있습니다.

이 과정에서 일반적으로 3단계가 포함됩니다.

1. 무료 또는 제한된 평가판 뉴스레터에 전자우편을 등록
2. 프리미엄 서비스를 업셀링하면서 내용을 그대로 전달
3. 구독 결제로 업그레이드

위에서 1번과 3번은 랜딩 페이지와 관련이 있습니다.

이 두 소개 페이지에 필요한 핵심 요소를 자세히 살펴보고, 결과적으로 신규 유료 뉴스레터 가입자와 귀하의 비즈니스를 위한 더 많은 연간 반복 매출(ARR)을 창출합니다.

간단히 말해 무료 또는 평가판 뉴스레터에 구독자가 많을수록 업그레이드하도록 설득할 수 있는 기회가 많아집니다.

📬 뉴스 레터 가입 방문 페이지

좋은 랜딩 페이지에는 하나의 목표가 있으며, 이 사용 사례에서는 방문자가 이메일을 입력하고 구독을 누르는 것입니다. 마케팅 전문가들은 이것을 전환이라고 부릅니다.

수십 개의 뉴스레터 소개 페이지를 조사하고 검토한 후 가입 전환을 개선하는 데 도움이되는 7가지 팁을 목록에 추가했습니다.

1. 가입 양식을 삽입하고 스크롤없이 볼 수있는 부분에 배치합니다.

하나의 목표 (가입)에 따라 다음 두 개의 랜딩 페이지에 처음 도착할 때 이메일 주소 만 입력해야 함을 분명하게 보여줍니다.

2. 양식 클릭 유도 문안 버튼을 예쁘게 디자인해주세요. 여러분은 방문객들이 여러분의 뉴스레터를 발견하게 되어 매우 기쁩니다. 그러니 여러분의 양식 버튼에서 그 기쁨을 공유해보세요.

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://ghost.org/blog/newsletter-signup-landing-page-tips/?ref=webdesignernews.com

웹 사이트 성능이 SEO 순위에 미치는 영향

SEO는 끊임없이 진화합니다. 구글이나 빙과 같은 검색 엔진은 방문자들의 눈앞에 어떤 컨텐츠를 놓아야 할지를 더 잘 결정하기 위해 업그레이드되며 향상 및 개선되고 있습니다.

인터넷 컨텐츠의 타당성과 가치를 높이기 위해 검색 엔진은 많은 알고리즘과 요소에 의존합니다.

웹 사이트와 웹 사이트의 성능이 검색 엔진 최적화 노력에 어떤 영향을 미치는지 알고 싶다면 계속 읽어보십시오. 아래에서 SEO 전략에 대해 생각할 때 지금부터 사용할 수 있는 몇 가지 흥미로운 정보를 확인할 수 있습니다.

• 귀사 웹 사이트의 성능이 SEO에 어떤 영향을 줍니까?

웹 사이트의 페이지 속도는 가장 중요한 요소 입니다. 귀하의 웹 사이트에는 청중이 이해하기 쉬운 메시지를 담고 있는 잘 디자인 된 페이지를 가지고 있을 수도 있지만 해당 청중이 적절한 시간(2초 이하) 내에 도착할 수 없다면 귀하의 웹 사이트는 그들이 무언가를 보거나 중요한 행동을 하기 전에 버려질 것입니다.

페이지 로드 또는 웹 성능 문제와 관련하여 문제가 있는 경우 웹 사이트의 검색 엔진 순위를 저장하려면 가능한 한 빨리 문제를 해결해야 합니다. 그리고 전문 지식이 부족하면 전문가와 상의해야 합니다.

웹 사이트의 성능을 진정으로 높이려면 SEO Host와 같은 SEO 호스팅 서비스에 특화된 타사 조직을 고용하는 것이 가장 좋습니다. 장기적으로 성공하려면 전용 IP, 개인 이름 서버 및 SEO 친화적인 전략과 같은 기능이 매우 중요합니다.

• 웹 사이트 성능 및 SEO

수 많은 연구에 따르면 웹 사이트를 로드하는 데 시간이 오래 걸릴수록 비즈니스에서 발생하는 전환이 줄어 듭니다.

따라서 eCommerce에서 제품을 판매하는 기업이든, 구독자를 수집하려는 기업이든, 중요한 정보를 공유하려는 조직이든 관계없이 페이지 로딩 시간은 고객 만족을 위한 중요한 고려 사항입니다.

• 다양한 기기에서의 웹 사이트 성능

웹 사이트의 성능은 데스크톱 기기뿐만 아니라 모든 기기에서 우선시되어야 합니다.

많은 웹 개발 기업들이 모바일 우선 접근 방식을 택하는 이유는 웹 고객 대다수가 모바일 사용자임을 알기 때문입니다.

예전에는 모바일 환경의 경우 사용자 부담이 적었습니다. 그러나 느린 페이지 로딩 속도는 더 이상 허용되지 않습니다. 사람들은 그것들을 좋아하지 않으며 알고리즘도 그것들을 싫어합니다.

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://bootstrapbay.com/blog/how-your-website-performance-affects-your-seo-rankings/

제품 컨텐츠 가이드라인 만들기

지금까지 저의 가장 큰 책임은 콘텐츠 설계를 통해 사용자 환경을 형성하는 것입니다. 지난 10개월 동안 저는 언어, 스타일, 어휘 및 음성을 일관성 있게 만들기 위해 일련의 콘텐츠 지침을 개발하고 구현했습니다.

그 과정에서 저는 제품 디자이너와 사용자 연구원과 제품 관리자 및 마케팅 담당자 등 모든 관련자에게 전례 없는 학습 경험이 되었습니다.

아래에서는 유사한 것을 만드는 데 관심이 있는 모든 사람을 위해 지금까지의 프로세스, 결과 및 계획을 공유하겠습니다.

컨텐츠 가이드 라인이란 무엇입니까?

형식적이고 지루하게 들리지만 컨텐츠 지침은 UX에 활력을 불어넣을 수 있으며, 모든 제품 조직에 중요한 도구입니다.

• UI 카피 표준에 대한 소스
• 제품의 컨텐츠를 작성, 편집 또는 생각하는 모든 사용자를 위한 공유 리소스
• 디자인 시스템 및 브랜드의 필수적인 부분
• 생산을 간소화하고 일관성을 향상시키는 도구

지침을 작성하기 전에 몇 가지 조사를 해야합니다.

[1] 경쟁력 분석

모든 스마트한 디자인 프로젝트는 경쟁 분석으로부터 시작됩니다. 무엇이 있는지 확인하고, 여러분이 생각하고 있는 것과 비교하고, 좋은 것과 나쁜 것을 분별하고, 여러분이 취해야 할 방향에 대해 의견을 제시하세요.

메일챔프 및 쇼피파이는 콘텐츠 지침의 훌륭한 예입니다. 레이아웃 섹션 및 최종 제품을 더 큰 디자인 시스템에 통합하는 가장 좋은 방법을 제공했습니다.

[2] 사용자 인터뷰

프로세스의 또 다른 중요한 부분은 사용자 인터뷰를 수행하는 것입니다. 설계자, PM, 고객 지원 및 실제 최종 사용자 등 컨텐츠와 가장 많이 상호 작용하는 사람들과 함께 앉아 제품의 현재 상태, 불만 사항 및 문제점에 대한 의견과 컨텐츠를 통해 사용자 경험을 개선할 수 있는 방법에 대한 의견을 들어보십시오.

이 모든 것을 직접 듣고나서 컨텐츠 문제를 제대로 파악하게 되었고, 높은 수준의 주제를 추출하는 데 도움이 되었습니다. 두 가지 모두 컨텐츠 규칙이 더 많이 필요한 분야에 영향을 미치게 됩니다.

[3] 음성 및 톤 워크샵

프로세스 인력을 추가로 참여시키고 컨텐츠 가이드라인을 구축하는 것이 중요하다는 인식을 높이기 위해 음성 및 톤에 대한 대화형 워크샵을 개최하는 방안을 고려해 보십시오.

저는 우리의 이상적인 특성, 즉 우리가 누구인지, 어떻게 들리는지, 그리고 우리 제품에서 표현하고 싶은 성격이 무엇인지 초점을 맞춘 3-4개의 가벼운 활동을 만들었습니다.

화이트보드, 워크시트 및 스티커 메모를 사용하여 트렌드를 쉽게 시각화하고 이를 사용하여 모든 사람이 식별 할 수 있는 음성 및 톤을 만들기가 쉬웠습니다.

[4] 콘텐츠 감사

통찰력이 풍부한 웹 사이트, 앱 및 사용자 이동 경로의 모든 콘텐츠 요소에 대한 인벤토리를 수집하여 작동 중인 항목과 그렇지 않은 항목을 더 잘 이해할 수 있습니다.

이를 통해 이전 연구를 검증하고 이해관계자가 사용자 흐름의 격차와 기능 영역별 특정 문제를 파악할 수 있었습니다.

연구 단계가 끝나면, 여러분이 글을 쓰기 시작할 때 여러분을 안내할 일반적인 주제뿐만 아니라 목소리와 톤에 대한 확고한 의견을 가져야 합니다.

UX에는 무엇이 부족하고(일관성, 성격), 컨텐츠에서 더 많은 작업을 수행해야하는 것(교육, 가이드) 및 빠른 초점 영역(빈 상태, CTA)을 알아야 합니다.

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://uxdesign.cc/how-to-create-product-content-guidelines-ae8c1b6521ea

Bad VS Good 접근성 디자인

모든 웹사이트 소유자들이 고려해야 할 한 가지가 있습니다. 바로 접근성입니다.

접근성(accessibility)은 모든 사람이 사용할 수 있는 웹 사이트를 만드는 관행입니다. 접근성은 종종 간과되는 경우가 많지만, 이는 성공적인 웹 사이트를 유지하는 데 필수적인 부분입니다. 결국, 모든 사람이 액세스할 수 있는 웹 사이트는 그렇지 않은 사이트보다 더 많은 조회수를 얻을 수 있습니다.

웹 사이트를 설계할 때 고려해야 하는 접근성은 여러 가지가 있습니다. 고려해야 할 가장 중요한 측면 중 하나는 웹 사이트의 콘텐츠입니다. 올바른 코딩 및 디자인 기술을 사용하면 웹 사이트를 장애가있는 사람을 포함하여 누구나 쉽게 탐색할 수 있습니다.

WCAG(Web Content Accessibility Guidelines)는 웹 사이트 개발자가 자신의 웹 사이트를 장애인이 아닌 모든 사람이 더 쉽게 액세스할 수 있도록 하기 위해 따라야 하는 일련의 표준입니다.접근성에는 A, AA, AAA의 세 가지 레벨이 있습니다. (AAA가 가장 높은 레벨입니다.)

이 기사에서는 피해야 할 나쁜 관행과 따라야 할 좋은 관행을 다룰 것입니다. 웹 사이트 설계를 개선하고 접근성을 높이기 위한 최상의 팁을 살펴봅니다.

접근성조차 구현하지 않은 수 많은 웹 사이트를 찾을 수 있습니다. 소유주는 여전히 웹 접근성이 무엇인지 모를 가능성이 높습니다. 다음은 피해야 할 잘못된 웹 사이트 설계 관행의 몇 가지 예입니다.

1. Flash 애니메이션 사용
2. 이미지를 링크로 사용
3. 밑줄이 그어진 텍스트 사용
4. 너무 많은 색상 사용
5. 색상 대비를 사용하지 않음
6. 캡션을 사용하지 않음
7. 대체 텍스트를(Alt) 사용하지 않음
8. 명확한 제목 계층 구조가 없음
9. 읽기 어려운 웹 글꼴 사용
10. 텍스트를 제공하지 않고 시각적 디자인 요소만 사용
11. 접근 가능한 콘텐츠를 전혀 제공하지 않음
12. 너무 작아서 읽을 수 없는 고정 글꼴 크기를 사용

나쁜 디자인은 장애가 있는 사람들에게 좌절감을 줄 수 있습니다. 예를 들어, 시각장애인 사용자는 페이지의 내용을 읽어주는 웹 리더를 보유하고 있을 수 있습니다. 콘텐츠에 올바르게 코딩되지 않은 광고 또는 동영상이 있는 경우 웹 리더는 콘텐츠를 읽을 수 없습니다.

대체 텍스트와 같은 장소에 키워드를 채워서 검색 엔진을 조작하려는 웹 사이트의 경우도 마찬가지입니다. 대체 텍스트는 화면 판독기 및 시각 장애인에게 이미지가 무엇인지 설명하는 데 사용되며 페이지에있는 내용을 이해하게합니다.

마케팅 담당자는 대체 텍스트에 키워드를 추가하면 Google에서 키워드가 더 높게 표시되고 접근성 목적으로 이미지를 설명하는 대신 더 많은 검색 트래픽을 얻기 위해 선택합니다. 말할 필요도 없이 이러한 방식으로 대체 텍스트를 접근성 대신 마케팅용으로 오용하는 것은 비 윤리적 입니다.

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://usabilitygeek.com/bad-vs-good-accessible-designs/

UX product 디자인 포트폴리오에 대한 6가지

저는 UX 포트폴리오를 만드는 것에 대한 많은 질문을 받았습니다. 대부분의 쿼리는 본질적으로 매우 유사했기 때문에 이 글을 작성하게 되었습니다.

이 기사에서는 포트폴리오 생성에 대한 배운 내용과 FAANG으로의 여정에 도움이 된 내용을 공유하려고 합니다.

1. 포트폴리오에서 어떤 기술을 강조해야 합니까?

특정 프로젝트를 시작하기 전에 포트폴리오에서 강조하고 싶은 기술이 무엇인지 생각해보십시오. 여러분의 장점과 단점을 적는 것부터 시작하세요. 리서치, 인터랙션, 프로토타이핑, 비주얼, 모션디자인 등과 같은 몇 가지 기술을 생각해 보십시오. 더 많은 기술이 있을 수 있습니다. 각 카테고리에 대해 5점 만점에 점수를 매기십시오.

2. 당신이 포트폴리오를 준비 할 시간이 거의 없다고 가정 해 봅시다.

제약과는 별도로 고려해야 할 세 가지 사항이 있습니다.

a) 누가 포트폴리오를 볼 수 있을까요? (어느 조직, 그들이 무엇을 하는지) b) 연구/인터랙션/비주얼/모션 중에 어떤 역할을 지원합니까? c) 자신의 포트폴리오를 통해 무엇을 전달하려고 합니까?

자신의 강점에 집중해야합니다. 여러 아이디어 생성, 중요한 사용자 여정 (CUJ) 및 프로토 타이핑을 통해 그의 상호 작용 디자인 기술을 과시하십시오.

문제 진술을 어떻게 분석했는지, 가정과 사고 과정을 어떻게 검증했는지, 최종 해결책을 제시합니다.

자신의 연구 기술을 보여줍니다. 문제 설명을 어떻게 분석했고, 가정과 사고 과정을 어떻게 검증하고 최종 솔루션에 도달했는지를 보여줍니다.

브랜드 지침에 따라 몇 가지 최종 모형을 제시하는 데 시각적 디자인 기술을 보여줍니다 (가이드가 없을 경우는 색상 팔레트 선택 / 로고 아이디어 / 타이포그래피 등에 대한 근거를 문서화해야 합니다).

'모션 디자인'이나 'UX 쓰기'와 같은 그의 부차적인 기술 중 일부를 뿌리되 그것에 너무 집중하지는 마세요.

우리는 채용 담당자나 면접관과 의사소통을 잘못하는 것을 원하지 않습니다. 마찬가지로, 당신의 주요 기술이 Research 또는 VD가 기본 기술이라면 해당 기술을 마음껏 활용하십시오.

💡Tip: 포트폴리오가 고용 결정을 내리는 데 있습니다 차별화 요소입니다. 그것을 짓기 위해 당신만의 달콤한 시간을 가지세요. 준비가 되었으면 작업에 적용을 시작합니다. 서두르지 마세요! Interaction Designer 역할을 지원하는 연구원 인 경우 포트폴리오에서 디자인 프로세스, 데이터 기반 디자인 결정 및 최종 솔루션을 잘 설명해야 함을 의미합니다.

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://medium.muz.li/6-things-i-know-about-ux-product-design-portfolio-ec643c5d76fe

디자인의 접근성 테스트하기 위한 4단계 프로세스

스크린 리더를 사용하여 접근성을 테스트하는 데 도움이 되는 가이드입니다.

세계보건기구(WHO)에 따르면, 세계 인구의 약 15%가 어떤 형태의 장애를 가지고 살고 있다고 합니다. 포용성을 위한 디자인을 생각한다면 접근성(a11y)은 단순히 QA 체크리스트의 마지막 항목이 아니라 모든 디자인 결정의 일부가 되여야 합니다.

최근에는 Shopify에서 a11y 관련 문제를 감사 및 수정했습니다. 스크린 리더 관련 문제를 자동으로 테스트할 수 있는 단일 도구가 없기 때문에 스크린 리더 사용은 까다롭습니다. 스크린 리더는 보조 도구이므로 개인의 필요에 따라 사용 방법이 달라집니다.

추가 독서를 위한 유용한 링크로 감사를 쉽게 하기 위해 이 글을 썼습니다.

스크린 리더 설정

이 가이드에서는 새로운 Mac 컴퓨터, iPhone 및 iPad에 제공되는 스크린 리더 프로그램인 VoiceOver on Mac을 사용하겠습니다. 윈도우를 사용하는 경우 JAWS 또는 NVDA를 사용할 수 있습니다. 좋은 상호 작용과 나쁜 상호 작용에 대한 안내 질문 및 예를 제공하므로 OS가 문제가 되지 않습니다.

첫 번째 단계는 화면 판독기를 활성화하고 키보드 단축키에 익숙해지는 것입니다. 어떤 것이 a11y 문제인지 제가 어떻게 알 수 있을까요?

WebAIM의 화면 판독기 테스트에 대한 기사에서는 시각 판독기 사용자와 스크린 리더 사용자가 웹 콘텐츠에 액세스하는 방법 간의 차이점을 상기시켜 주었습니다.

"대부분의 스크린 리더 사용자는 웹 페이지 전체를 이렇게 즉시 측량할 수 없습니다. 웹 콘텐츠는 선형 및 텍스트 기반입니다. 스크린 리더는 왼쪽과 오른쪽 또는 위치에 대해 생각하지 않습니다. 중요한 콘텐츠, 대담한 색상, 예술적인 디자인으로 되어 있는지 여부는 스크린 리더와는 무관합니다."

저는 상호작용이 제가 의도한 대로 행동하는지 자문해 봅니다. 시각 장애가 있는 사용자는 시각 장애가 없는 사람이 할 수 있는 것과 같은 쉬운 방법으로 내용을 이해하고, 키보드를 사용하여 페이지를 쉽게 탐색 할 수 있어야합니다. 무언가가 예기치 않게 작동하거나 사용하기 어려운 것으로 드러난 경우 추가 조사를 위해 팀에 문의하는 것이 좋습니다.

일반적으로 WCAG 요구 사항의 대부분을 다루는 키보드 단축키 4개를 테스트합니다. 포커스 가능한 요소 탐색, 각 항목 읽기, 각 이미지 읽기 및 제목 탐색 등 입니다.

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://ux.shopify.com/a-4-step-process-for-testing-the-accessibility-of-your-designs-17bc95bceafe?gi=619de03246e6

혁신적인 폼 양식 디자인의 10가지 예

폼 양식은 사용자와 비즈니스 간의 상호 작용을 촉진하고 설정하는 데 도움이 됩니다. 폼 양식이 너무 길고 작성하는데 시간이 많이 걸리는 경우 사용자는 폼을 무시할 수 있습니다.

사용자가 연락을 취할 수 있도록 폼을 신중하게 만들어야 합니다. 사용자의 관심사에 유의하고, 양식을 통해 올바른 질문을 하고, 매력적인 포장으로 마무리해야 합니다. 최종 결과는 고객이 즐길 수 있도록 진정성 있고 신중한 폼 양식이 되어야 합니다.

폼 입력을 거부할 수 없고 재미있거나 아름다운 형태를 만드는 멋진 방법을 찾은 많은 브랜드들이 있습니다. 웹에서 가장 혁신적인 예를 몇 가지 소개합니다. 이 예제에서는 흥미롭고 효과적인 폼 양식을 만들기 위해 무엇을 할 수 있는지 보여줍니다.

.

Zorka Agency는 ROI를 예측/개발하는데 주력하는 국제 디지털 마케팅 대행사입니다.

그들은 블리자드, 헤네시, 도미노피자, 알리익스프레스 및 그리고 많은 다른 유명한 회사들과 함께 일했습니다. 그들의 홈페이지는 모두 검정색 배경과 흰색과 노란색 타이포그래피 사이의 유사점에 관한 것입니다.

대문자 산세 리프 타이포그래피와 미묘하면서도 매력적인 호버 효과를 능숙하게 결합하여 방문자의 주의를 끌 수 있으며 표시되는 텍스트의 위치는 물론 색상도 변경됩니다.

홈페이지에 접속해서 하단에 보시면 타이포그래피 색상과 배경 반전, 검정색 글꼴을 사용한 "Say Hello"로 이동한 후 지정된 필드에 전체 이름을 입력합니다.

동그라미를 친 "다음 단계" 버튼은 상상력이 풍부한 폼 양식의 시작이라는 것을 알려줍니다.

대부분의 사이트에서 일반적으로 사용되는 양식인 레이블과 필드를 하나 또는 두 개의 열에 나열하는 대신 고객에게 필요한 정보를 한 번에 하나씩 묻는 5단계 기능으로 폼의 양식으로 구성했습니다.

만약 그들이 한 번에 많은 질문을 보게 된다면 양식을 건너 뛸 가능성이 더 높습니다.

사용자에게 한 번에 한 단계씩 정보를 요청함으로써 브랜드는 양식의 길이 때문에 잠재 고객이 스트레스를 받지 않도록 합니다. 그 대가로 전환율에 긍정적인 영향을 받을 수 있습니다.

. .
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://qodeinteractive.com/magazine/innovative-contact-form-design/

웹 사이트 전환을 개선하기 위한 21가지 학습

1. 상품 GIF는 가장 좋은 방법입니다. 제품을 설명하는 대신 제품의 작동 방식을 보여주세요.
2. H1을 대문자로 표시합니다. 가능한 한 명확하게 주요 이점을 최대한 명확히 전달하십시오. 텍스트의 첫 줄은 새로운 사용자를 얻거나 잃는 것의 차이를 만듭니다.
3. 사용자의 의견에 공감합니다. 브랜드를 홍보하는 대신 고객의 니즈를 충족시키는 데 집중하십시오.
4. 내용을 반복해주세요. 명확한 혜택을 자주 설명하십시오. 사용자의 주요 목표는 제품의 작동 방식과 작업을 완료하는 데 어떻게 도움이 될 수 있는지 이해하는 것입니다.
5. 짧고 읽기 쉬운 문장을 쓰세요. 사람들은 짧은 집중력을 가지고 있고 텍스트가 많으면 읽기가 어렵게 만듭니다.
6. 약속하기 사람들은 자신이 내리는 결정에 대해 확신을 갖기를 원합니다. do 또는 can과 같은 단어가 포함 된 문장은 소비자의 신뢰를 강화합니다.
7. 이야기를 하세요. 등장인물, 장소, 이벤트로부터 얻을 수 있는 많은 양의 세부 사항은 우리가 개인적으로 정보나 아이디어를 연결하는데 도움을 줍니다.
8. 사회적 증거 우리의 행동은 가장 가까운 맥락의 행동, 단어 및 취향을 모방 한 결과입니다.
9. 스토리를 발전시키는 이미지를 사용하십시오. 이미지는 제품에 대한 이해도를 향상시켜야 합니다. 사람들은 작업을 완료하는 데 필요한 인지 부하를 최소한으로 줄이기 위해 장식적인 이미지를 무시하는 법을 배울 것입니다.
10. 가능하면 하나의 CTA만 사용하십시오. 액션에 대한 호출을 최소로 제한합니다. 더 많은 클릭 유도 문안을 만들수록 더 적게 호출 할 수 있습니다.

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://medium.muz.li/21-learnings-to-improve-your-website-conversion-4fb715a9a0f9

디자인 씽킹 워크숍 (단계별 가이드)

성공적인 디자인 씽킹 워크숍을 계획하고 운영하는 방법을 알아보십시오. 팀이 중요한 목표를 달성하고 즐겁게 지낼 수 있도록 지원합니다.

본 가이드의 모든 권장 사항은 뛰어난 디자이너가 만든 연구와 함께 100회 이상의 워크샵, 현장 및 원격 워크샵, 스타트업 및 엔터프라이즈에서 얻은 학습을 기반으로 합니다.

디자인 씽킹 워크숍은 문제를 빠르게 정의하고 해결할 수 있는 좋은 방법론 입니다. 성공적인 워크숍을 통해 그룹은 문제를 이해하고, 아이디어를 생성하여 솔루션을 정의 할 수 있고, 재미와 유대감이 아이디어를 현실로 만들 수 있습니다. 아래는 디자인 씽킹 방법론 입니다. 공감, 정의, 아이디어, 프로토타입 및 테스트의 다섯 가지 단계를 정의하고 반복적으로 수행합니다.

• 디자인 씽킹의 5가지 주요 단계

[1] 워크숍의 범위와 목표 파악

첫번째 단계로 목표와 범위를 정의하는 것은 향후의 모든 활동을 정의하게 됩니다. 이 질문에 대한 답을 얻을 수 있는 가장 좋은 방법은 주요 이해 관계자들과 몇 가지 예비 인터뷰를 하는 것입니다. 검증하려는 주요 목표, 예상 결과물 및 가정을 매핑합니다.

[2] 문제가 구체적일수록 해결책이 더 구체적입니다.

디자인 씽킹 워크숍은 현실적인 기대치를 갖는 것이 중요합니다. 몇 시간 동안 한 무리의 사람들이 모여 여러 대규모 문제에 대한 구체적인 해결책을 찾을 것으로 기대하지 마세요. 문제를 더 구체적으로 해결할수록 해결 방법이 더 구체화됩니다.

일반적으로 대기업에는 여러 사용자 그룹과 제품 등 많은 문제와 질문들을 가질 것입니다. 이러한 경우에는 먼저 문제를 구성하는 데 초점을 맞춘 높은 수준의 인터뷰와 워크숍을 진행하는 것이 더 좋습니다. 그 이후에 문제에 대한 해결책을 찾기 위해 후속 워크숍을 계획하는 것이 좋습니다.

[3] 워크숍에 대해 사전 조사를 실행해주세요.

여러분은 기본적인 질문들로 워크숍을 시작하기를 원하지 않습니다. 워크숍 전에 가능한 한 많이 조사해두면 지식 격차를 더 잘 파악할 수 있습니다. 또한 그룹의 효과적인 조정에 필수적인 신뢰도를 신속하게 쌓을 수 있습니다.

[4] 관련 활동 선택

명확한 목표를 설정한 후에는 목표를 달성하기 위한 적절한 도구(활동)를 선택해야 합니다. 활동 선택은 예상 결과뿐만 아니라 초대할 수 있는 시간 및 참가자에 따라 달라집니다.

공감을 구축하는 것은 디자인 씽킹의 초석 중 하나입니다. 공감은 다른 사람이 그들의 기준 범위 내에서 경험하는 것을 이해하거나 느낄 수있는 능력입니다. 공감력을 통해 고객은 물론 고객이 달성하고자 하는 목표, 원동력 및 프로세스에서 직면하는 과제를 파악할 수 있습니다.

공감을 형성하는 데 도움이 되는 몇 가지 활동입니다. 페르소나(Proto Personas), 공감 지도(Empathy Map), 여정 지도(Journey Map), 수행해야 할 작업(Jobs To Be Done), VPC(The Value Proposition Canvas), 고객 프로필(Customer Profile) .
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://medium.com/windmill-smart-solutions/design-thinking-workshop-step-by-step-guide-428171c2adee

디지털 접근성을 위한 컬러

디지털 접근성은 디자이너의 노력으로 디자인을 혁명하는데 도움이 될 수 있습니다.

"디지털 접근성은 장애가 있는 사람들이 웹을 이해하고, 탐색하고, 인지하고, 기여하고, 웹과 상호 작용할 수 있도록 합니다."

웹 콘텐츠의 접근성을 높이기 위한 접근성 권장 사항은 W3C(World Wide Web Consortium)에서 개발한 WCAG(Web Content Accessibility Guidelines)에서 제공합니다.

WCAG 지침은 이해하기 어렵고 접근성 전문가와 전문가의 도움이 필요합니다. 올바른 방향으로의 작은 단계는 접근 가능한 디자인의 목표를 달성하는데 도움이 될 수 있습니다. 모든 접근성 지침이 중요하지만 가장 일반적인 것은 색상 대비와 가시성입니다.

Google의 소프트웨어 프로그램 엔지니어인 Mathias Bynens는 이렇게 말했습니다. "데이터에 따르면 가장 일반적인 접근성 문제는 컬러와 관련된 것입니다."

컬러에 대한 접근성은 콘텐츠에 대해 충분한 대비를 표시하고 주변 페이지와 명확하게 구분되는 색상 조합 및 팔레트를 만드는 것을 의미합니다. 제품 수명주기 초기에 접근성 지침으로 색상을 재구성하면 시간, 노력 및 비용이 절약됩니다.

각 사용자가 비슷한 디지털 경험을 할 수 있도록 계산된, 의식적이고 배려적인 색채 사용이 공감을 확산시키고 있습니다. 또한 이것은 "우리는 당신을 돌 봅니다"라는 브랜드 메시지로 더 많은 청중에게 전달됩니다.

아래는 디자이너가 접근 가능한 사용자 경험을 위해 색상 사용을 배우고 이해할 수 있는 5가지 단계를 설명합니다.

[1] 컬러 인지 관련 장애를 이해하여 최종 사용자의 요구에 공감합니다.

컬러에 민감한 사람들이 있습니다. 그들은 특정한 색상의 음영을 구별할 수 없으며, 때로는 어떤 색상도 완전히 인식할 수 없습니다. 이것은 컬러를 인지하는 시력이 결핍하거나 색맹으로 알려져 있습니다.

대부분의 사람들은 실제로 "색맹"이 아니라 "컬러가 부족한 것"입니다.

전 세계적으로 약 3억 명의 색맹/결핍인 사람이 있는 것으로 추정됩니다. 여기에는 마크 트웨인, 마크 저커버그, 파블로 스탠리, 크리스토퍼 놀란, 그리고 에디 레드메인과 같은 몇몇 공인들도 포함되어 있습니다.

색맹과 결핍은 대략 남자는 12명 중 한명, 여자는 200명 중 한명에게 영향을 미칩니다.

색맹이 있는 사람들의 98%는 적녹색맹을 가지고 있습니다.

색맹 친화적인 디자인을 확장하기 위해서는 다양한 유형의 색맹과 결함을 이해하는 것이 중요합니다. 이를 위해서는 연구와 인내, 노력이 필요하지만 이러한 노력은 모든 사람이 보다 눈에 잘 띄고, 읽기 쉽고, 공정한 디자인을 만드는 데 도움이 됩니다.

[2] 색상과 기호를 함께 사용하여 중요한 시각 정보를 모두에게 유용하게 만듭니다.

색은 정보를 전달하는 중요한 수단이고, 기호는 정보를 더 유용하게 만들기 위해 사용되어야 합니다. 다양한 종류의 기하학적 패턴, 선, 텍스트, 텍스처 및 레이블을 사용하면 모든 사용자의 가독성과 가시성을 향상시킬 수 있습니다.

사용자가 실행 가능한 작업을 생성하고 구성할 수 있는 웹 사이트이자 앱인 트렐로는 색맹 친화적인 모드를 사용합니다. 이것은 사용자가 서로 다른 레이블을 구분할 수 있는 찾기 쉬운 기능입니다.

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://www.qed42.com/blog/reimagining-colors-digital-accessibility

Figma에서 프로그래밍 방식으로 256개의 새로운 디자인 시스템 구성 요소를 구축하는 방법

우버의 기본 디자인 시스템은 제품 전반에 걸쳐 광범위하게 사용되는 맵 마커를 제공하며, 사용자가 지도를 볼 때마다 표시됩니다. 최근에 지도 마커에 컨텍스트를 추가로 표시해야 하는 필요성을 발견하고 이를 달성하기 위해 기존 기본 구성 요소인 배지를 추가하기로 결정했습니다.

문제는 지도 마커와 배지 모두 다양한 변형이 있다는 것입니다. 마커는 크기, 니들 길이, 아이콘 슬롯 및 레이아웃 동작에 따라 사용자 지정할 수 있으며 배지는 여러 크기, 레이블 및 아이콘 스타일을 가질 수 있습니다. 배지 지원 맵 마커의 최종 세트는 이러한 모든 옵션, 총 256개의 새 구성 요소를 조합한 것입니다.

일반적인 접근 방식은 디자이너가 이러한 새 구성 요소를 수동으로 생성하는 것입니다. 이는 비효율적 일뿐만 아니라 모든 변형을 생성하고 여러 시나리오에서 개별적으로 테스트하는데 필요한 작업의 양과 반복성으로 인해 오류가 발생하기 쉽습니다.

그래서 저는 프로그래밍 방식으로 접근하기로 결정했습니다.

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://medium.com/uber-design/how-i-programmatically-built-256-new-design-system-components-in-figma-84ee26d119c1

UX Writing은 이해하고, 협력하고, 분석하고, 쓰는것 입니다.

여러분이 화면에서 단어들을 볼 때 그것들은 쉽고 간단하고 짧으며 누구나 쓸 수 있다고 생각할 것입니다. 그러나 이 작은 단어들 뒤에는 아무도 말하지 않는 비밀이 있습니다. 비즈니스 및 기술 제약을 이해하면서 다양한 이해 관계자와의 수많은 토론, 몇 가지 초안과 수많은 편집이 필요한 험난하고 긴 프로세스입니다.

그렇다면 UX 사본을 작성하는 과정은 무엇일까요?

[1] 전체 제품에 대해 UX 사본을 작성 UX 작성자는 비즈니스와 사용자를 이해하고, 음성 및 어조를 공식화하고, 다양한 종류의 UX 사본을 식별하고, 어휘를 작성하는 등의 작업을 수행해야 합니다. 이것은 긴 과정입니다. 최대 3~4개월이 걸릴 수 있습니다.

[2] 기능에 대한 새 사본 기능에 대한 사본을 작성할 때 UX 작성자는 기능에 대해 배우고 경쟁을 분석하고 콘텐츠가 어떻게 작동하는지 인식해야 합니다. 이 과정은 더 짧으며 몇 주 또는 한 달이 걸릴 수 있습니다.

[3] 사본을 개선 UX 작성자가 UX 사본을 확인하고 신속하게 검토하는 것은 일상적인 작업입니다. 그것은 사본에 무엇이 잘못되었고 UX 작성자들이 그것을 어떻게 개선할 수 있는지에 대한 이해를 필요로 합니다.

[4] 시나리오 모음 커뮤니케이션이 무엇이고 어떻게 이루어져야 하는가에 대한 명확성을 지원하는 UX 사본을 작성하기 위해서는 시나리오를 더 깊이 이해하는 것이 중요합니다. 상황에 맞게 PM, 개발자 및 디자이너와 협업하면 고객의 기대, 경쟁, 비즈니스 등을 이해하는 데 도움이 됩니다.

[5] 전체 제품에 대해 UX 사본을 작성 전체 제품에 대한 UX 사본 개발의 목표는 커뮤니케이션의 일관성을 유지하고 제품을 돋보이게 하는 것입니다. 따라서 비즈니스와 사용자의 요구 사항 및 제약 사항을 이해하는 것부터 시작하여 목소리와 톤으로 브랜드 개성을 창출하십시오.

• 조직에 대해 알아보고 사명, 비전, 브랜드 인식 및 제약 사항을 이해하십시오.
• 조직의 핵심 인력과 인터뷰를 진행합니다.
• 사용자의 요구, 불만 사항, 문제 및 선호 사항을 이해합니다.
• 사용자 인터뷰와 고객 설문 조사를 수행하여 사용자가 제품을 사용할 때 자주 느끼는 감정을 이해합니다.
• 문서의 모든 정보를 수집하여 브랜드 개성과 사용자 페르소나를 만듭니다.

기능에 대한 새로운 사본을 작성하기 전에 기능의 핵심을 파악하는 것이 전제 조건입니다. 제품 관리자 또는 디자이너와 협력하여 다음 질문을 해야 합니다.

• 기능은 무엇입니까?
• 기능을 수행하는 이유는 무엇입니까?
• 고객 요청입니까?
• 고객은 누구입니까?
• 대회는 무엇을 제공합니까?
• 카피가 비즈니스에 미치는 영향은 무엇입니까?
• 경쟁사와 어떻게 다릅니 까?
• 타임 라인은 무엇입니까?

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://design.zeta.in/the-ux-writing-process-in-tech-demystified-3fe2481b599a?gi=aa113ea6659b

색은 우리의 감정의 변화를 따라갑니다. 그것은 파블로 피카소가 우리 삶에서 색상이하는 역할에 대해 생각한 것입니다. 색상은 보편적인 언어이며 매우 강력한 언어입니다. 색상은 디자인을 만들거나 깨뜨릴 수 있으며 예술에 생명을 불어 넣을 수 있으며 우리의 감정을 자극하고 기분을 바꿀 수 있습니다.

색상의 역할과 색상을 올바르게 사용하는 방법 및 기본 원칙에서 벗어나면 무엇이 잘못 될 수 있는지에 대한 이해가 필요합니다. 이 기사에서는 어떤 문제를 해결하고자 하는지 궁금할 수 있습니다. 문제 설명은 다음과 같이 구성 될 수 있습니다.

사진, 정보, 버튼 및 기타 UI 요소를 최적으로 시각화하려면 어떻게 해야하나요? 색상을 만질 때마다 명심해야 할 몇 가지 지침을 찾을 수 있습니다.

우리는 색상 사용을 지배하는 원리를 가장 잘 이해하기 위해 두 가지 프레임워크를 사용할 것입니다. 지리적 유사성과 심리적 유사성이죠. 유사한 품목 또는 기능을 나타내기 위해 색상을 사용해야 합니다.

[1] 일관적인 의미

이것을 생각하는 또 다른 방법은 색의 의미가 일관되어야 한다는 것입니다. 이에 대한 매우 일반적인 예는 모든 MacOS 응용 프로그램 창에서 볼 수 있는 세 개의 작은 원형 버튼입니다.

우리는 그것들이 빨강, 노랑, 초록이라는 것을 알고 있습니다.

빨간색은 "닫기 창"을 의미하며, 노란색은 "최소 창"을 의미하며, 녹색은 "최대 창" 또는 "앱용 새 데스크톱 만들기"를 의미합니다. 이러한 방식으로 모든 MacOS 응용 프로그램 창에서 유사한 색상의 버튼이 표시되므로 추측하거나 혼동할 여지가 없습니다.

하지만 어떻게 하면 일관성 있게 사용할 색상을 선택할 수 있을까요? 가능한 경우 색상 선택은 표준을 준수해야 합니다.

관례에 따라, 확립된 표준과 승인된 표준이 제공하는 색상 사용이 널리 퍼져 있습니다. 미국의 정치 지도를 예로 들어 보겠습니다. 붉은색은 주로 공화당이던 주들을 위해 사용되고 민주당 주들은 파란색을 사용합니다.

만약 제가 색을 바꾸면 "왜 그렇게 할까?"라고 물을 수 있습니다. 그게 바로 제 요점입니다. 우리는 가능한 한 널리 보급된 표준을 준수해야 합니다. 그러다보면 좋은 디자인뿐만 아니라 효과적인 디자인도 만들 수 있습니다.

[2] 총 색상 수를 최소화

최대 5-7가지의 다른 테마 색상을 사용하거나 최대한 적게 사용하는 것입니다. 이는 단기 기억의 한계 때문입니다. 모든 사람에게 기억을 유지하는 것이 어렵기 때문에 신중하고 적극적인 노력이 필요합니다.

구글 크롬 브라우저의 검색 결과에 대한 일관되고 단순한 색 구성표를 예로 들 수 있습니다. 결과 제목은 파란색, 다른 모든 항목은 검정색으로 나옵니다.

이것은 눈을 진정시킬 뿐만 아니라, 과학적으로 입증된 기억력에 대한 인식을 최적화하는 방법입니다.

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://medium.com/the-31-5-guy/how-to-properly-use-colours-for-visual-design-73a89c92f4c8

인터페이스 디자인을 위한 시각적 계층을 구현하는 방법

우리가 디자인을 예술의 한 형태로 간주하고 싶어하는 만큼, 그것의 기초는 과학적인 기반으로 세워졌습니다. 여러분이 핀터레스트, 드리블, 어워드라는 멋진 웹사이트 UI를 볼 때 객관적으로 웹 사이트 디자인이 실제로 문제를 해결하는지 확인해주세요.

미학의 과학은, 건전한 사업 원리와 결혼했을 때, 가장 강력한 팀이 여러분의 디자인 결정을 알리도록 만듭니다. 마음을 사로잡는 웹사이트 디자인은 환상적으로 보일지 모르지만, 거의 어떤 사용자도 그것을 사용하는 즐거운 경험을 하지 못할 것입니다. 이것이 형태와 기능이 함께 병행되어야 하는 이유입니다. 이것이 바로 디자인의 기초 중 하나인 시각적 계층구조가 처음부터 바로 해결되어야 하는 이유입니다. 시각적 계층과 커뮤니케이션의 Luke Wroblewski는 좋은 시각적 프레젠테이션의 목적을 설명합니다.

건전한 비즈니스 원칙과 결합 된 미학의 과학은 가장 강력한 팀이 디자인 결정을 내릴 수 있도록합니다. 놀라운 웹 사이트 디자인은 환상적으로 보일 수 있지만 거의 모든 사용자가이를 사용하여 즐거운 경험을 할 수 없습니다. 이것이 바로 형태와 기능이 함께 이루어져야하는 이유입니다. 이것이 디자인의 기본 중 하나 인 시각적 계층 구조를 처음부터 바로 해결해야하는 이유입니다. Luke Wroblewski는 Visual Hierarchy와 통신에서 좋은 시각적 표현의 목적을 설명합니다.

1. 사용자에게 정보를 제공하고 안내합니다.
2. 컨텐츠 관계를 전달하고 정보의 우선 순위를 지정합니다.
3. 사람들에게 정서적인 영향을 줍니다.
4. 콜 투 액션(Call-to-actions)을 조명합니다.

시각적 계층은 사용자에게 의미를 부여하기 위해 시각적 관계를 조작함으로써 시각적 가중치를 우선 순위로 둡니다.

다음은 저널리즘에서 일반적으로 사용되는 글쓰기 피라미드 기법과 인간의 눈을 스캔하는 패턴 그리고 스캐닝 패턴, Z패턴, F패턴 등 내용이 나옵니다.

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://medium.com/the-31-5-guy/how-to-implement-visual-hierarchy-for-interface-design-3aa25c8d48bc

개인 브랜드 구축을 위한 그래픽 디자이너 가이드

개인 브랜딩은 우리가 성공에 대한 해결책이라고 주장하는 유행어가 되었습니다. 우리는 매일 우리의 개인 브랜드를 구축하고 있으며 그렇게하는 것이 매우 중요합니다.

그렇다면, 전문 그래픽 디자이너의 눈에 띄는 개인 브랜드를 만들기 위한 최종 체크리스트는 어떻게 보일까요? 전문가의 인터뷰를 들어보겠습니다.

[1] 당신은 누구입니까? 자신이 누구인지를 정의하는 것은 아마도 개인 브랜드를 정의할 때 가장 어려운 부분일 것입니다. 그래서 우리는 그들이 누구인지에 대한 가장 중요한 정보를 모으는데 도움을 주는 질문들을 합니다. 일관된 이야기를 만드는 데는 시간이 좀 걸리지만, 그 길의 끝에는 매력적인 About Me 페이지가 표시됩니다.

• 이것은 저의 질문 목록입니다.
• 당신에게 동기를 부여하는 것은 무엇입니까?
• 당신이 디자인에서 가장 좋아하는 부분은 무엇입니까?
• 당신은 어떤 분야에서 뛰어난가요?
• 다른 사람들이 하지 않을 수도 있는 어떤 것(접근법, 특징, 경험 등)을 가지고 있나요?
• 어떤 종류의 프로젝트를 몰입하시나요?
• 디자인을 그만두고 싶은 프로젝트 유형은 무엇입니까?

이러한 질문은 당신이 원하는 것과 원하지 않는 것을 대략적으로 파악할 수 있습니다. 그 점이 분명해지면 작업의 측면과 자신을 독특하게 만드는 성격에 집중하여 정보 페이지 작성을 진행할 수 있습니다. 전문적인 이야기는 개인 브랜드의 기초라는 점을 기억하십시오.

글을 쓸 때, 자신을 표현할 때, 여러분이 보내고 있는 메시지에 대해 생각해 보세요. 당신의 이야기는 목표를 뒷받침하고 타겟층에 맞게 조정되어야 합니다. 여러분은 여러분의 독특하고 멋진 모습을 보여주기 위해 노력해야 합니다.

[2] 청중은 누구입니까? 오늘날 우리는 모두 개인화된 경험을 기대합니다.

청중이 누구인지 정의함으로써 그들을 어떻게 다루는지도 정의하게 됩니다.

일반 메시지는 대상 사용자의 눈에 띄지 않습니다. 너무 구체적이면 그 메시지는 일부 사람들에게만 공감이되며 다른 사람들의 시선을 끌지는 못할 것입니다. 그럼 당신은 무엇을 해야할까요?

1단계 - 고용주 / 클라이언트 / 고객 / 팔로워 중 누구의 관심을 받고 싶은지 정의하십시오. 2단계 - 정의된 청중을 조사합니다. 이들의 특성은 무엇입니까? 그들은 무엇을 좋아하고 무엇을 싫어합니까? 그들을 흥미롭게 하는 주제는 무엇입니까? 그들은 여가 시간을 어떻게 보내나요? 3단계 - 청중을 대변할 가상의 인물을 만듭니다. 청중을 대표하는 평범한 인물이 정의된 특성에 따라 어떻게 보이고 행동할지 상상해보십시오. 주의를 끌고 싶은 사람들의 유형을 잘 알 때까지 동일한 세 단계를 반복하십시오.

이것이 중요한 이유는 무엇입니까? 청중을 아는 것은 개인 브랜드를 만들기 위한 결정적인 단계입니다.

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://dribbble.com/stories/2021/05/27/personal-branding-guide-graphic-designers?ref=webdesignernews.com

모던 미니멀 UI 스타일 가이드

오랫동안 이런게 없었는데 새롭고 기능적이며 시각적으로 호소력 있는 디자인 스타일이 나오길 기다렸다는 생각이 듭니다.

저는 그동안 많은 인터페이스에서 유사한 디자인 스타일 패턴을 목격해 왔습니다. 이 인터페이스들은 매우 좋아 보였습니다. 눈길을 끌기도 하고 가독성이 높았지만 친근하고 화려하지는 않았습니다. 저는 모던 미니멀이 잘생긴 동시에 기능적인 것의 완벽한 중간이라고 생각했습니다.

저는 이 디자인 스타일을 "모던 미니멀(Modern Minimal)"이라고 불렀습니다. 이것은 기존의 머테리얼 디자인이나 플랫만큼 지루하지 않고 다른 디자인 스타일에 비해 미니멀 합니다. 여러분은 스큐어모피즘, 글래스모피즘 등 다양한 스타일에서 영감을 발견할 수 있지만 보시다시피 그것은 모두 비슷하며 시각적으로 복잡하지 않습니다.

• 일반적으로 Modern Minimal 스타일은 다음과 같은 특성을 포함합니다.
• 밝은 배경과 하얀 공백
• UI 요소의 미묘한 라운드성
• 크고 읽기 쉬운 제목
• 실제 사진
• 신중한 색상 사용
• 대비에 집중
• 효과의 제한적 사용
• 작은 세부 사항 등

[1] 밝은 배경의 시각적 표현 현대적인 미니멀리즘에서 공백은 필수입니다. 인터페이스의 전체 내용은 대부분 흰색 또는 매우 밝은 배경에 표시되는 경우가 많습니다. 공백을 신중하게 사용하면 인터페이스가 일반적으로 깨끗하고 신선하며 미적으로 보기 좋게 만듭니다.

[2] 둥근 모서리의 시각적 표현 모던미니멀 스타일의 UI 요소는 미묘하게 둥글게 처리됩니다. 인터페이스를 보다 유기적이고 친근하게 보이게 합니다. 만약 여러분이 클럽하우스라고 불리는 최근의 유행을 알고 있다면 여러분은 아마도 그들의 둥근 아바타에 익숙할 것입니다. 그들은 전체 제품을 보다 독창적이고 독특하게 보이게 합니다.

개인적으로 저는 둥근 모서리를 좋아합니다. (뾰족한 모서리에 비해 눈에 더 편합니다.) 비결은 원형 률을 과도하게 사용하지 않고 오히려 단추 및 컨테이너와 같은 특정 요소에 대해 저장하는 것입니다.

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://uxdesign.cc/a-guide-to-the-modern-minimal-ui-style-531ac1e9fbfe

사용자 인터페이스 디자인 모범 사례

UI 디자인은 제품의 첫인상입니다.

비즈니스 목표를 달성하는 것도 중요하지만, 이전에 언급한 이론에 따르면 즐거운 경험에 대한 사용자의 요구를 충족시키는 것도 중요합니다. 디자이너로서, 여러분은 최상의 결과를 만들기 위해 이 두 가지를 함께 조화시켜야 할 책임이 있습니다.

이 기사에서는 UI 설계 학습 과정 내내 모범 사례를 구현하면서 얻은 주요 이점을 요약해 보겠습니다. 이것은 Jakob Nielsen의 10가지 사용적합성 휴리스틱스, Gestalt Principles, Shneiderman의 8가지 황금 규칙을 기반으로 합니다.

1. 일관성이 핵심 기업이 브랜드 지침을 가지고 있는 것처럼 디지털 제품도 모든 플랫폼에 걸쳐 외관을 표준화할 수 있는 방법을 가지고 있어야 합니다. 복사본의 음성 톤과 제품이 어떻게 동작해야 하는지에 대해서도 이야기하고 있습니다. 일단 사용자가 제품을 사용하고 나면, 목표를 달성하기 위해 제품의 많은 표현을 다시 배울 필요가 없습니다. 코드에도 관습이 있듯이 디자인에도 지침이 있습니다. 예를 들어, Gojek는 아스팔트를 가지고 있고 Google은 Material Design을 가지고 있습니다.
2. 패턴 사용 UI에서 기존 문제에 대한 잘 알려진 솔루션을 패턴이라고 합니다. 내비게이션 바가 모바일 화면에 맞지 않습니까? 햄버거 메뉴를 사용하세요. 무언가를 삭제해야 합니까? 빨간색 버튼이나 휴지통 아이콘을 찾습니다. 적어도 이 시점에서, 일반적인 패턴에 집착하는 대신, 스스로 일을 하는 것은 올바른 선택이 아닐 수 있습니다. Jacob's Law는 사용자들이 대부분의 시간을 다른 사이트에서 보낸다면, 사용자들이 이미 알고 있는 사이트처럼 작업하는 것을 선호합니다는 것을 의미합니다. 익숙한 패턴이 그만큼 강력합니다.
3. 시각적 계층 구조 적용 디자인에 시각적 계층을 사용하면 사용자가 말하고 싶었던 이야기의 흐름을 이해하는 데 도움이 됩니다. 앱 또는 웹 사이트에서 사용자는 위에서 아래로 스크롤합니다. 즉, 페이지 상단 섹션에 더 중요한 디자인 요소를 배치해야 합니다. 배치, 색상 및 타이포그래피를 통해 명확한 계층 시스템을 설계에 적용할 수 있습니다. Fitt's Law는 중요 기능에 대해 큰 목표를 설정해야 합니다는 관점을 제공합니다.

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://bootcamp.uxdesign.cc/user-interface-design-best-practices-c1b56f51517a

사용자 공감을 통해 막대 차트를 더욱 통찰력 있게 만드는 방법

막대 차트는 가장 일반적인 데이터 시각화 솔루션 입니다. 일반적으로 거의 모든 상황에 적합합니다. 시각적 단서는 모든 데이터와 컨텍스트를 지원합니다. 데이터로 작업하는 경우 막대 차트를 생성한 적이 있을 것입니다.

시각적으로 막대 차트에는 문제가 없습니다. 서로 다른 카테고리를 비교하는데 사용되는 정확하고 표준화된 차트입니다. 그러나 막대 차트는 "기본 차트"로 간주되기 때문에 때때로 아무 생각없이 생성됩니다. 말하려는 메시지에 아무런 생각도 하지 않으면 정보가 도착하자마자 사라집니다. 이를 이해하기 위해서는 먼저 막대 차트가 왜 그런지에 대해 생각해봐야 합니다.

[1] 공통 차트의 비극 막대 차트가 그토록 일반적인 이유는 주로 다음 세 가지 이유 때문입니다.

1. 비교는 양적 사고의 핵심입니다.
2. 길이는 가장 정확한 시각적 단서 중 하나입니다.
3. 막대 차트에 대해 지정된 사용 사례가 없습니다.

[2] 양적 사고와 비교 데이터 시각화의 선구자인 Edward Tufte는 데이터 그래픽이 진실하고 드러나기 위해서는 양적 사고의 핵심 인 "무엇에 비해?"라는 질문에 답해야 한다고 말했습니다.

[3] 시각적 단서의 정확성 다양한 시각적 단서 (왼쪽에서 오른쪽으로) :위치, 길이, 각도, 방향, 면적, 볼륨, 채도, 색조

데이터 시각화가 한 눈에 처리되도록 설계되어야 한다고 생각하는 유명한 사상이 있습니다. 이를 위해서는 사용자에게 친숙한 시각적 단서에 의존해야 하며 또한 카테고리 간의 정확한 비교가 가능해야 합니다.

막대형 차트는 길이를 비교를 위한 시각적 신호로 사용하기 때문에 쉽게 범주를 비교할 수 있습니다. 너무 친숙하기 때문에 시청자는 이러한 것들을 한눈에 빠르게 소화 할 수 있습니다. 더 나은 것처럼 보이는 유일한 방법은 선형 차트처럼 그 위치를 시각적 단서로 사용하는 것입니다.

그러나 여기에는 몇가지 주의 사항이 있습니다. 막대 차트는 일반적으로 사용됩니다. 위치를 시각적 단서로 사용할 때 가장 먼저 떠오르는 차트는 꺾은 선형 차트입니다.

선 차트는 시간의 경과에 따른 변화를 표시하는 데 강력하지만, 어떤 경우에나 사용할 수 있는 올바른 차트는 아닙니다. 결국, 위치만으로 범주를 비교하거나 다른 범주를 보는 것은 더 어렵습니다.

따라서 꺾은 선형 차트와 달리 막대형 차트는 이러한 동일한 문제에 실제로 부딪히지 않습니다. 그래서 꺽은 선형 차트는 사용 사례에 따라 제한됩니다. 결과적으로 막대 차트는 시각화에 사용되는 가장 일반적인 차트 중 일부가되는 경향이 있습니다.

막대 차트가 데이터를 전달하는 가장 효과적인 방법인 것처럼 보였습니다. 그러나 작년에는 이러한 유형의 사고에 도전한 데이터 시각화 혁명이 있었습니다. 바로 집에 머무르는 홈스테이 혁명이었습니다.

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://uxdesign.cc/how-user-empathy-can-make-even-bar-charts-more-insightful-544625942856

접근성을 위한 디자인 방법

UX 디자이너는 와이어 프레임을 디자인하고 "사용자 목표" 목록을 작성합니다. 제품이나 서비스를 디자인 할 때 종종 간과되는 측면은 접근성입니다.

일부 UX 및 UI 디자이너, 카피라이터 및 제품 관리자의 관심 부족의 주된 이유는 접근성이 시각 장애가있는 사람들에게만 관심이 있다는 오해 때문이라고 생각합니다.

이 잘못된 추론에 따르면, 이해 당사자들은 그들의 목표 대상 청중들이 읽고 쓸 수 있다고 주장할 것입니다. 그러므로 그것을 간과하지 않는 것이 가장 좋습니다.

접근성은 훨씬 더 광범위하고 광범위한 연구 영역과 사용자 경험 설계가 의미하는 측면을 포괄하며, 젊고 건강한 신체 건강한 청중에게도 직접적인 영향을 미칩니다. 이러한 관점에서 접근성을 위한 디자인은 정보 아키텍처, 시각 디자인 원리 및 게슈탈트 Properties, UX 카피 라이팅과 같은 UX 연구 및 디자인의 다른 핵심 원칙과 병행하여 개발 및 구현되어야 한다고 생각합니다. 온라인에는 이 항목을 자세히 설명하는 몇 가지 리소스가 있습니다.

• Section508.gov에 의한 접근 가능한 웹 디자인 및 개발 가이드
• A11Y 프로젝트
• Usability Geek의 시각적 접근성 디자인의 6가지 원칙
• 7 InVision의 접근 가능한 현미경 작성 지침
• 색상 및 대비 확인 컨텐츠, 필드 및 CTA를 읽고 이해할 수 있도록 하기 위해, 따라서 사용할 수 있도록 설계하는 것이 중요합니다. 이 작업은 백그라운드에서 일어나는 일과의 관계를 염두에 두고 설계되어야 합니다.

최근 프로젝트인 반응형 웹 응용 프로그램에서 대비 검사기를 사용하여 큰 텍스트, 그래픽 객체 및 인터페이스 구성 요소의 가독성을 위한 최상의 비율을 찾았습니다. 이 도구를 사용하면 디자인 초기 단계에서 선택한 메인 색상(#6AA4C5)이 너무 가볍고 화면에 사용하던 흰색 배경과 비교했을 때 대조 검사를 통과하지 못해 그래픽 및 UI에 필요한 최소치인 3.00:1 미만의 명암비를 얻을 수 있었습니다.

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://bootcamp.uxdesign.cc/how-to-design-for-accessibility-eaaef7857d2

10가지 프로토타이핑 디자인 기법

디자인하기에 훌륭한 많은 디자인 응용프로그램이 있습니다. 이러한 응용 프로그램을 보강하면서 새로운 디자인 위젯과 액세서리가 매일 시장에 출시됩니다. 이들은 디자이너의 작업을 더 쉽게 만들기 위해 제작되었습니다.

하지만 호환성 문제, 중복성 또는 파악하기 어려운 모듈이 있을 수 있습니다. 따라서 강력한 디자인 컨셉을 구축하기 위해서는 디자인 기술과 원칙에 집중하는 것이 중요합니다.

응용프로그램 전반에서 디자인 원칙과 디자인 도구에 대한 지식을 개발하는 것은 프로토타이핑을 위한 개념적 기반을 구축하기 이전에 핵심입니다.

이러한 상위 10가지 기술은 모든 프로토타이핑 디자인 애플리케이션에서 어디서나 볼 수 있는 기능입니다. 설계 프로세스 중에 이 도구는 신뢰할 수 있고 검증된 도구로서 우수한 설계 기반을 제공합니다.

1. 레이아웃 그리드 레이아웃 그리드를 활성화하면 통합 모듈식 디자인 시스템이 가능하며 화면 콘텐츠 구성의 핵심이 됩니다. 그리드는 화면 크기에 비례하여 열과 행으로 구성됩니다. 그리드가 1열 또는 8열 이상 레이아웃으로 설정되었는지 여부에 관계없이 설계 모듈 및 구성요소에 대한 Blueprint를 즉시 설정합니다. 그리드를 사용하면 다양한 장치에 걸쳐 디자인 시스템에 참여할 수 있습니다.
2. 부울 모양 정의에 따라, 부울 모양은 결합, 빼기, 교차 및 제외의 네 가지 공식 중 하나를 통해 형상 레이어의 집합을 결합하는 연산입니다. 부울 그룹은 단일 셰이프 계층으로 처리되고 채우기 및 스트로크 속성을 공유합니다. 부울 모양은 유동 디자인 객체이며, 모든 단계에서 변경할 수 있습니다. 특히 아이콘 디자인이나 UI 구성 요소로 유용합니다. 부울 모양은 디자인에 즐거움을 줍니다.
3. 반복 격자 패턴 반복 그리드는 패턴 설계의 기초입니다. 모든 모양, 문자, 색상, 이미지 및 구성요소를 패턴으로 설정할 수 있습니다. 이 기능은 배경 또는 브랜드 요소를 채울 때 매우 유용합니다. 반복 패턴을 쉽게 편집할 수 있습니다.

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://evaschicker2012.medium.com/top-10-prototyping-design-techniques-159062bd4f8f

스큐어모피즘, 플랫디자인, 뉴모피즘

세 가지 UI 스타일의 특성, 이론적 근거 및 표현 리소스를 살펴봅니다.

왜 이런 스타일일까요? 디지털 인터페이스의 역사에는 여러 가지 디자인 스타일과 변형이 존재했습니다. 단순화된 설명에서는 첫 번째 단계가 있으며, 대부분 기술적인 제약 조건(픽셀의 양, 색상 및 메모리 사용량)에 의해 정의됩니다. 두 번째 단계에서 컴퓨터는 디자이너들에게 가능성을 열어주었고, 더 의도적인 시각적 스타일이 나타났습니다. 이 기간 중 가장 관련성이 높은 두 가지는 스큐어모피즘과 플랫 디자인 입니다. 뉴모피즘은 통합된 스타일은 아니지만, 아래 설명에 포함시켰습니다.

• 과정 각각의 스타일의 정의적 특성을 연구한 후, 저는 각각의 컨셉 인터페이스를 만들었습니다. CAD 도구를 사용하여 배경과 적절한 조명이 포함된 각각의 3D 모델을 제작했습니다. 그런 다음, 상단 및 등각도에서 사실적인 렌더링을 만들었습니다. 탑뷰를 참고하여 피그마를 이용하여 2차원을 표현하였습니다. 이러한 구성 요소는 코드로 빌드하고 최종 제품에 사용할 수 있는 일반 패턴을 사용합니다.
• 스큐어모피즘 구분된 스타일 이상의, 스큐어모피즘은 물리적인 세계 인터페이스를 디지털 세계로 모방하는 이론적 근거입니다. 원래 이것은 사용자가 보다 직관적으로 상호작용할 수 있도록 하는 데 사용되는 리소스였습니다. 이 원리에 따라 스큐어모피즘은 일련의 시각적 스타일을 함께 그룹화합니다.

이러한 시각화는 약간 둥근 모서리와 결합 된 기하학적이고 균일 한 요소로 깔끔한 스타일을 보여줍니다. 이러한 구성 요소는 실제 세계의 고품질 플라스틱 인터페이스와 유사합니다. 마이크로 인터랙션은 일반 버튼과 컨트롤의 물리적 패턴도 복제합니다.

• 플랫디자인 스큐어모피즘에 대한 반대 반응으로 플랫디자인이 나왔습니다. 사용자가 규칙적인 상호작용 패턴에 익숙해지자 요소의 문맹성은 불필요해졌습니다. 디자이너들은 그 요소들의 기호학에 반전을 주어 이런 스타일을 만들었습니다. 플랫 디자인은 물리적 규칙과 깨졌습니다. 신뢰할 수 있고 현실적인 표현은 더 이상 필요하지 않았습니다. 메시지는 아이콘, 추상화 및 개념적 상호 작용을 통해 전달됩니다. 사용자들은 이미 디지털-원래의 상호작용 패턴에 익숙했습니다.

플랫 디자인의 전통적인 변형은 화면의 2차원에만 의존합니다. 그림자, 투명 또는 물리적 세계에 대한 언급은 사용되지 않습니다.

그럼에도 불구하고, 이 스타일의 일부 후속 변형에는 음영, 투명도 및 그라데이션으로 표현되는 3차원 중첩 레이어 표현이 포함되기 시작했습니다. 머티리얼 디자인은 이러한 개념의 훌륭한 예입니다. 이 탐사를 위해, 저는 캔버스에 떠 있는 라미네이트 물체와 유사한 간단한 구성 요소를 사용했습니다. 미세 상호작용은 물질의 거칠기나 중력 법칙을 따르지 않습니다.

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://uxdesign.cc/tridimensionality-of-skeuomorphism-flat-design-and-neumorphism-bc9d705a5cc7

디자인 스프린트 방법으로 Crazy 아이디어 생성

디자인 스프린트 방법을 사용하여 팀의 창의적인 경계를 넓혀보세요.

[1] Design Sprint는 이해, 정의, 스케치, 결정, 프로토타입 및 검증의 6단계를 따릅니다. 따라서 팀은 정의 단계를 지나 문제 설명을 구성했습니다. 이제 스케치 단계에 있으며 아이디어를 시작할 준비가 되었습니다. 여러분의 브레인스토밍을 시작하기 위해 의미있는 아이디어를 도출하기 위한 몇가지 How Might We 문장을 쓰세요.

[2] Crazy 8은 무엇입니까? Crazy 8는 디자인 스프린트의 핵심 방식입니다. 이것은 사람들이 8개의 독특한 아이디어를 8분 안에 스케치하는데 도전하는 빠른 스케치 연습 방법입니다. 목표는 첫 번째 아이디어를 넘어 가장 혁신적이지 않은 아이디어를 추진하고 과제에 대한 다양한 솔루션을 개발하는 것입니다.

[3] Google 디자인 스프린트 빠른 아이디어 생성에 사용되는 Design Sprint 방법입니다. Crazy 8의 워크샵에는 디자이너가 아니더라도 모든 팀 구성원이 참여할 수 있습니다. 각 개인은 사용자 및 문제에 대해 고유한 관점을 제공합니다. 디자이너가 아닌 사람은 스케치가 멋지게 보일 필요는 없음을 확인하십시오. 그것들은 여러분의 생각을 전달하는 시각적인 방법일 뿐입니다.

[4] Crazy 8을 작업하는 방법

1. 모든 사람은 한 장의 종이를 8개의 섹션으로 접어야 합니다. 또는 스티커 메모를 대신 사용할 수 있습니다.
2. 8분 동안 모든 팀원은 How Might We 진술을 기반으로 8가지 아이디어를 조용히 스케치해야 합니다.

이 연습의 목표는 창의력을 발휘하는 것입니다. 솔루션의 기능이나 특정 기술에 초점을 맞추지 마십시오. 구현에 대해 걱정하는 대신 사용자가 솔루션에 대해 가질 수 있는 경험을 설명하는 것이 좋습니다.

매 분마다 팀이 새로운 아이디어를 시작하도록 요청합니다. 질보다는 양에 중점을 두어야하므로 스케치가 완벽 할 필요는 없다는 점을 안심 시키세요.

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://uxplanet.org/generate-crazy-ideas-with-this-design-sprint-method-c6a36a16c3d5

카피라이팅은 UX 라이팅이 아닙니다. 차이점은 무엇이며 왜 중요한가요?

일반 독자들은 제가 매일 하는 일이 마케팅에 가깝다는 것을 알게 될 것입니다. 따라서 정기적으로 제기되는 대화 중 하나는 광고 카피라이터가 작성한 내용이 대개 UI 설계나 디지털 상호 작용에 적합하지 않은 이유입니다.

.

[1] 카피라이터란 무엇입니까?

에이전시에서 카피라이터를 광고하는 전통적인 역할은 마케팅 캠페인 및 관련 마케팅 채널(스트랩라인, TV 광고 대본, 포스터 및 다이렉트 메일)을 위한 단어를 작성하는 것입니다. 이러한 유형의 카피의 목적은 다음을 통해 제품을 판매하는데 사용됩니다.

• 브랜드 메시지 및 제품 속성 홍보
• 소비자 감정 활용하고
• 창의적인 캠페인 또는 래퍼를 지속적으로 실행

[2] 결과적으로 오늘날 디지털 채널 (앱 화면, 이메일, 랜딩 페이지, 가입 양식 등)에 적용될 때 내가 보는 대부분의 마케팅 및 광고 카피 라이팅은 다음에 초점을 맞추고 있습니다.

• 브랜드 메시지 및 속성 홍보
• 사용자가 브랜드에 대해 특정 방식으로 느끼게 함
• 비즈니스 요구의 우선 순위 지정 및 판매 촉진
• 창의적인 컨셉을 성공적으로 실행

[3] UI를 이해할 수 있는지, 사용할 수 있는지, 액세스할 수 있는지 또는 각 사용자가 원하는 작업을 성공적으로 수행할 수 있는지에 초점을 맞추는 경우는 거의 없습니다. 따라서 저는 다음과 같은 많은 작업을 볼 수 있습니다.

한 블록의 조밀한 중앙 정렬 복사본(로렘 입섬 난센스 텍스트로 작성됨)과 그 아래에 불분명한 텍스트 기반 CTA가 있습니다.

"Sign up(가입하기 위해 이메일 주소로 등록)"이라는 명확한 설명, 단일 이메일 캡처 양식 필드 및 "sign up(가입)" 사본이 포함된 단일 버튼입니다. 이렇게 하면 사용자가 이해할 수 없는 버튼인 설명 텍스트의 양이 점점 더 길어지는 경우가 많습니다. 중앙 정렬된 대형 복사본도 시작하지 마십시오.

당연히, UX 사용자가 카피라이터에게 단어들이 과도하고, 혼란스럽고, 접근할 수 없다는 것을 피드백합니다면, 이는 잘 되지 않을 수 있습니다. 결국, 아무도 다른 사람이 무엇을 해야 하는지 알려주는 것을 원하지 않습니다.

[4] 사용자가 아닌 카피는 더 이상 누구의 영역도 아닙니다.

이러한 상황은 악의적인 의도가 아니라 오해의 소지가 있습니다. 광고 카피 쓰기 기술을 사용하여 현재 자체 전문가 기술인 UX Writing을 수행하려고 하는 것입니다. 광고 카피는 종종 디지털 경험에 적합하지 않습니다. 디지털 플랫폼과 상호 작용은 우리가 설계하고 있는 새롭고 다른 경험이기 때문에 새롭고 다른 기술을 필요로 합니다. CTA 마이크로카피가 긴 형식의 신문 기사를 쓰는데 적절하지 않은 것처럼 말입니다.

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://medium.com/@h_locke/copywriting-is-not-ux-writing-564e45ac0684

우리 모두는 사이트가 브랜드의 "얼굴"이라는 것을 이해합니다.

사이트의 주요 임무는 매력적인 사진이되는 것뿐만 아니라 브랜드를 '판매'하는 것입니다. 웹 디자인의 트렌드는 날마다 바뀌고 있으며, 우리의 과제는 이를 추적하고 브랜드의 목표에 성공적으로 적용시키는 것입니다.

이 질문을 고려한다면 여기에 웹 사이트를 재설계해야 하는 가장 적절한 이유를 모았습니다.

[1] 웹 사이트를 재설계해야 하는 가장 일반적인 이유

대다수의 사람들은 정보를 시각적으로 인식합니다. 즉, 사용자가 웹 사이트의 외부 구성 요소를 좋아하지 않으면 정보에 머무르지 않을 것입니다. 그렇기 때문에 수시로 웹사이트 디자인을 업데이트 하는 것이 좋습니다. 리디자인에는 많은 프로세스가 포함됩니다.

[2] 리브랜딩

우선, 우리는 이 단어들이 의미하는 바가 무엇인지, 그리고 그것들이 어떻게 조화를 이루는지 알아야 합니다. 브랜드 변경은 새로운 고객을 유치하기 위해 회사의 브랜드를 변경하는 과정입니다. 리브랜딩은 잠재 고객을 극대화하는 완벽한 방법입니다. 브랜드 변경은 구매자의 눈에 새롭고 독특한 브랜드 디자인을 만드는 것을 포함합니다.

디지털 시대의 주요 "무기"중 하나가 고품질 영상이라는 것은 비밀이 아닙니다. 프로젝트의 디자인은 일관성이 있어야 합니다. 기업 색상, 글꼴, 인식 가능한 요소, 새 페이지 등 모든 구성 요소는 통합된 스타일로 구성되어야 합니다. 정체성을 구축하고나면 이후에 많은 새로운 고객을 가져올 것입니다.

[3] 리브랜딩은 우리에게 무엇을 제공합니까?

리브랜딩은 회사의 올바른 이미지를 만들 것입니다. 올바른 포지셔닝은 성공의 열쇠입니다. 종종 신생 기업은 타겟 고객 형성에 문제가 있기 때문에이 프로세스를 무시합니다. 이 문제는 리브랜딩을 통해 쉽게 해결할 수 있습니다.

종종 기업은 새로운 조건에 적응하지 못합니다. 동시에 끊임없이 변화하는 시장에 적응하는 것은 기업의 존재와 발전에 필수적입니다.

놀라운 적응의 예는 Eastman Kodak Co입니다. 얼마 전, 대표자들은 이전에 변경되지 않은 사업 계획의 변경을 발표했습니다. 한 세기 이상 사진 장비를 생산해온 이 회사는 코로나 바이러스와 싸우기 위해 브랜드를 개혁하고 약물 성분을 만들기로 결정했습니다.

그 결과 Eastman Kodak Co.는 미국 정부로부터 $ 765m 대출을 받았습니다. 웹 사이트가 어떻게 바뀌었는지 살펴보면 회사가 리브랜딩되었음을 쉽게 이해할 수 있습니다.

그 결과 이미 잊혀지기 시작한 회사가 눈에 잿더미에서 떠오르는 것을 볼 수 있습니다.

[4] 웹 사이트 리디자인 하는 이유 - 브랜드 변경

웹 사이트 디자인을 재 설계하는 또 다른 이유 중 하나는 브랜드 인지도를 높이기위한 것 입니다. 리브랜딩은 확실히 이 작업에 대처할 것입니다. 경쟁이 치열 해지는 것을 잊지 말아야 합니다. 때로는 경쟁에서 눈에 띄기 위해 슬로건, 색상 팔레트 또는 스타일을 수정해야 합니다.

브랜드 변경은 또한 인기를 높이는데 도움이 될 것입니다. 브랜드가 오랫동안 시장에 나와 있고 고객에게 잘 알려져 있다면 그 새로움은 제품에 관심만 끌 뿐입니다. 예를 들어, 잘 알려진 회사 마스터카드는 지불의 미래가 디지털이기 때문에 로고를 변경했습니다.

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://gapsystudio.com/blog/why-redesign-a-website/?ref=webdesignernews.com

웹 사이트 최적화와 CRO 커뮤니티에서 다양한 히트 맵 유형이 큰 추세를 보이고 있지만 이해하기 쉬운 히트 맵 지침이 필요합니다.

.

• 히트 맵의 종류와 사용 방법 및 사용 사례

웹 페이지가 구성되는 방식, 시각적 스타일 및 변환 수단은 지속적인 추세, 사용 가능한 기술 및 사용자 행동 분석에 따라 지속적으로 진화하고 있습니다. 끝없이 무한 스크롤하는 랜딩페이지가 있었지만 이제 거의 사라졌습니다.

웹 사이트 제작자는 이러한 스크롤의 낮은 유지 효율성을 이해하기에 충분한 사용자 피드백과 웹 사이트 히트 맵 데이터 중에 실제 사용자 행동 패턴을 분석하는데 얼마나 많은 리소스를 사용할 수 있을까요?

특정 웹 사이트 디자인을 어떻게 평가할 수 있습니까? 무엇이 효과가 있는지, 무엇이 효과가 없는지를 어떻게 알 수 있을까요?

수천 명의 사용자가 페이지를 방문할 때까지 기다려야하는 경우 투자 수익 (ROI)을 얼마나 빨리 확인할 수 있습니까?

다양한 유형의 웹 사이트 히트 맵에 대해 알려 드리겠습니다. 여러 히트 맵을 사용하고 결합하면 웹 페이지를 최상의 방법으로 설계하고 구성하는데 도움이 됩니다.

.

• 히트 맵이란 무엇입니까?

모든 히트 맵은 관심있는 조사 또는 예측 데이터를 시각적으로 표시하는 방법입니다. 히트 맵 자체는 차트, 데이터 파이 및 다이어그램과 같이 또 다른 형태의 데이터 표시입니다. 히트 맵은 고온에서 저온으로 색상 팔레트를 사용하여 수집 된 정보의 높거나 낮은 정량적 값을 표시합니다.

.

• 프랑스 인구 밀도를 나타내는 히트 맵

"hearmap(히트 맵)"이라는 용어는 소프트웨어 디자이너인 Cormac Kinney가 실시간 금융 시장 정보를 그래픽으로 표시하는 도구를 만들었던 90년대 초에 처음 상표가 지정되었습니다. 이 도구는 데이터 밀도에 대해 독자에게 분명한 시각적 단서를 제공하여 트레이더가 종이 차트를 분석하는데 많은 시간을 절약하고 시장 변동에 따라 결정을 내릴 수 있도록 해주었습니다.

.

• S&P 주식 히트 맵

웹 사이트 히트맵과 관련하여 소프트웨어는 사용자의 동작 빈도를 컬러로 나타내는 레이어를 만든 다음 분석된 웹 사이트에 오버레이됩니다.

.

• 히트 맵이 생성되는 방법을 설명하는 또 다른 방법이 있습니다.

웹 사이트는 그리드로 구분되며, 각 그리드는 데이터 단위 수량에 따라 색상이 지정됩니다.

.

• Imotions

시선 추적 히트 맵을 나타내기 위해 특정 그리드에 다른 값이 할당되는 방식을 간단히 설명합니다.

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://attentioninsight.com/heatmaps-101/?ref=webdesignernews.com

4일 만에 아이디어를 검증하고 제품을 더 빠르게 만드는 방법

.

• 디자인 스프린트를 사용하면 디지털 & 물리적 제품 구축, 비즈니스 모델을 작업, 혁신 프로젝트를 정의할때 보다 쉽게 작업을 수행할 수 있습니다.
• 디자인 스프린트는 아이디어를 검증하고 몇 달의 작업을 몇 주로 단축하고 귀하와 귀하의 팀이 올바른 방향으로 나아가도록 보장하는 프로세스입니다.

.

기본적으로 제품 개발은 출시 이후에 고객의 반응을 확인할 수 있습니다. 디자인 스프린트를 통해 팀은 아이디어를 구축하기 위해 시간과 비용을 투자하기 전에 신속하게 아이디어를 검증합니다.

오늘날, 전 세계 수천 개 기업과 스타트업이 이 방법을 사용하여 설계 프로세스의 속도를 높이고, 영역 간의 커뮤니케이션을 개선하며, 팀을 정렬하고, 아이디어가 매우 신속하게 가치가 있는지 확인합니다.

이것은 단 4일 만에 큰 문제를 해결하며 훌륭하고 흥미로운 아이디어를 테스트하는 단계별 원격 또는 대면 프로세스를 가집니다.

.

• 디자인 스프린트는

제품이 개발할 가치가 있는지 기능이 노력할 가치가 있는지 또는 가치 제안이 실제로 유효한지 확인하는 가장 빠른 방법입니다. 또한 실험, 협업, 반복을 통해 독창적인 사고를 장려합니다.

.

• 디자인 스프린트는 어떻게 생겼습니까?

여러 분야의 팀과 함께 한 주를 시작하여 일반적인 과제에 대해 논의하고 대화형 하이파이 프로토타입과 실제 사용자의 피드백으로 한 주를 마무리 합니다.

• 기본적으로 4일 간의 검증 프로세스입니다.

1일차에는 과제를 정의하고 한 주를 계획합니다. 2일차에는 프로토타입에 대한 과제를 결정합니다. 3일차에는 고화질 프로토타입을 제작합니다. 4일차에는 실제 사용자를 대상으로 테스트합니다. 원격으로 수행하거나 클라이언트와 직접 대면할 수 있습니다.

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://uxplanet.org/how-to-validate-ideas-in-4-days-and-build-products-faster-1687314e47bf

8point 그리드 시대는 가고, 4point 그리드 시대가 올까요?

.

UI에서는 유연성을 높이기 위해 4의 배수를 사용합니다.

기술이 발전함에 따라 많은 그래픽 디자이너들이 UX/UI 설계로 전환하거나 이미 전환했습니다. 저는 아트 디렉션을 공부했기 때문에 그래픽 디자인의 기준선 그리드에 익숙합니다.

약 6년 전 UI 디자인을 시작했을 때, 저는 어떤 구체적인 지침도 따르지 않았습니다. 저는 주로 다른 앱과 웹 사이트에서 그들이 사용하는 간격의 종류를 살펴보니 모든 사람들이 다르게 사용하고 있다는 것을 알게 되었습니다.

12px, 13px, 15px, 20px의 마진과 패딩 등등 모든 종류의 숫자를 보았습니다. 당시에는 그다지 중요해 보이지 않았습니다.

.

몇 년 전에 Spec.fm에서 8포인트 그리드와 "소프트 그리드"와 "하드 그리드"라는 두 가지 방법에 대해 읽었습니다.

브린 잭슨은 디테일 지향적인 사람으로서 저에게 새로움을 가져다 주었습니다.

모든 디자인에 8포인트 그리드를 적용하기 시작했는데, 다른 사람들이 이 방법을 따르지 않으면 짜증이 생겼었습니다. 하지만 얼마 지나지 않아 기업용 소프트웨어나 카피, 텍스트 필드, 하이퍼 링크, 테이블 및 버튼이 많은 인터페이스에서 저를 제한하는 경우가 많았습니다.

저는 그것에 대해 전혀 조사하지 않고 그것을 4포인트 그리드로 바꾸기 시작했습니다. 하지만 다행히도, 저는 이 4포인트 그리드를 사용하는 유일한 사람이 아니라는 것을 알게 되었습니다.

.

• 8포인트 그리드는 무엇인가요? 기본 원칙은 모든 것이 8의 배수 (8, 16, 24, 32, 40, 48,… 80,… 96,…)라는 것입니다. 모든 요소 사이의 간격입니다. 예를 들어 입력 필드의 높이는 48 픽셀이고 다른 입력 필드 사이의 공간은 16 픽셀이 됩니다.

.

• 왜 정확히 4포인트가 8포인트보다 높을까요? 더 세분화되고 더 많은 옵션을 읽을 수 있습니다. 8 이나 16 중 하나를 선택하는 대신에, 여러분은 12로 갈 수 있습니다. 아이콘 크기, 요소 간 간격, 텍스트와 아이콘 간 수평 간격 등을 생각해 보십시오.

저는 제 텍스트를 8의 기준 그리드에 맞추곤 했습니다. 그러다보니 항상 여러 줄의 텍스트가 너무 빡빡하거나 너무 크다는 문제가 있었습니다. 이제 저는 제 텍스트를 4의 기준선에 맞추고 4의 선 높이 배수를 4의 기준선 그리드에 맞춥니다. 다음 제품을 사용하여 만든 좋은 라인 높이 도구를 적극 추천합니다.

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://bootcamp.uxdesign.cc/goodbye-8-point-grid-hello-4-point-grid-1aa7f2159051

사용자 중심 제품을 만드는 7단계

.

제품을 디자인 할 때 고려해야 할 중요한 사항이 많이 있습니다. 비즈니스 목표, 업계 동향, 경쟁 업체의 노력, 시장 세부 사항 등입니다.

이 기사에서는 Techstack의 설계 프로세스에 대한 통찰력을 공유합니다. 이를 따르는 것이 왜 중요한지, 어떤 단계로 구성되어 있는지, 그리고 제품을 성공적으로 만드는 데 있습니다 중요하다고 생각하는지에 대해 설명합니다.

.

1. 디자인 프로세스의 정의 및 중요한 이유

디자인 프로세스는 디자인 팀이 디지털 제품 (웹 사이트, 애플리케이션 등)을 만드는 데 수행하는 작업의 집합체입니다. 여기에는 이해 관계자와의 상호 작용, 연구 참여, 개발, 향후 제품 프로토 타입 테스트 및 향후 개선 사항 구현을 위한 결과 분석이 포함됩니다.

사용자 중심의 디자인을 구축하고 그 효과를 테스트함으로써 팀은 사용자의 요구와 비즈니스 목표를 모두 충족하는 미래 제품의 성공에 영향을 미칩니다.

.

2. 디자인 프로세스를 수행하는 방법

제품 디자인 작업을 할 때 Techstack 디자인 팀은 7가지 주요 단계를 따릅니다.

1단계 - 브리핑 우리는 브리핑으로 시작하여 주요 제품 아이디어와 제품 생성 목표에 몰두하고 필수 요구 사항을 정의하기 위해 고객과 소통합니다. 대부분의 경우 브리핑은 고객 담당자, 디자인 팀장, 제품 소유자 및 기타 이해 관계자와의 공동 회의로 수행됩니다.

첫째, 고객이 제품에 대한 비전을 공유합니다. 그런 다음 Q&A 세션을 수행하여 가장 중요한 사항을 명확히 합니다.

• 누가 그 제품의 사용자가 될까요? 이 제품을 만든 사람과 고객이 완벽한 사용자(나이, 성별, 사회적 지위 등)를 어떻게 상상하는지를 보여줍니다.
• 제품이 해결해야하는 사용자 문제는 무엇입니까? 사용자가 어떤 문제를 가지고 있고 원하는지, 제품이 어떻게 만족시켜야 하는지 등입니다.
• 제품이 달성해야하는 비즈니스 목표는 무엇입니까? 향후 제품에 대한 비즈니스 기대치(판매 또는 브랜드 인지도 증가, 특정 시장 점유율 획득 등)가 얼마나 존재하는지 확인합니다.
• 제품이 회사의 브랜드와 어떤 관련이 있습니까? 회사 브랜드의 어떤 요소들이 디자인에서 구현될 수 있는지(회사 색상, 아이콘, 글꼴 등) 알 수 있습니다.
• 예산과 일정은 어떻게 되나요? 디자인 예산은 얼마이며 고객이 최종 결과를 기대하는 시점입니다.

디자인 팀은 필요한 모든 정보와 요구사항을 수집하여 이를 분석하고 모든 설계 프로세스 단계를 추정하여 이해관계자에게 제시합니다. 양측 모두가 모든 점에 동의하면 디자인 팀은 작업을 시작합니다.

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://medium.com/techstack-ltd/design-process-at-techstack-7-steps-to-create-a-user-focused-product-96ca1c72e07

• 요약

  동일한 색상, 모양 또는 크기를 공유하는 디자인 요소는 어떤 방식으로든 비슷하게 보이는 관련된 것으로 인식되는 반면, 비슷하지 않은 요소는 별도의 그룹에 속하는 것으로 인식됩니다.

.

• 주제

  시각 디자인, 심리학 및 UX

  유사한 시각적 특성을 가진 개체는 관련성이 가장 높거나 최소한 사용자 인터페이스 디자인과 관련되어야 합니다.

  각 유형의 UI 요소에 대해 명확하고 일관성 있게 적용되는 시각적 규칙은 사람들이 디자인을 쉽게 이해하고 사용하는 데 매우 중요합니다. 

  이는 각 상호 작용이 다른 유사한 요소가 어떻게 작동하는지에 대한 사용자의 기대치를 발전시키기 때문입니다.

.

• 정의

  유사성의 원칙은 시각적 특성을 공유하는 항목이 유사하지 않은 항목보다 관련성이 더 높은 것으로 인식 된다는 것입니다. 

  유사성 원칙은 20세기 초 게슈탈트 심리학자들이 발견한 시각적 그룹화 원칙 (근접 및 폐쇄와 함께)의 원래 세트 중 하나입니다.

  이 심리학자들은 사람들이 세상을 시각적으로 인식하는 방법을 이해하고 특정 요소가 같은 그룹에 속하는지 여부를 결정하는 것을 목표로 했습니다.

  나중에 더 많은 그룹화 원칙(예 : 공통 영역)이 원래 게슈탈트 목록에 추가 되었습니다.

  이러한 게슈탈트(Gestalt) 원칙은 시각적 디자이너가 사용 가능한 사용자 인터페이스를 만들기 위해 사용할 수 있으며 사용해야 합니다.

.

• 공유 특성을 사용하여 관계 의미

  유사성의 원칙은 단순히 항목이 어떤 시각적 특성을 공유 할 때 어떤 식으로든 관련이 있다고 가정한다는 것입니다.

  항목이 동일 할 필요는 없지만 색상, 모양 또는 크기와 같은 눈에 보이는 특성을 하나 이상 공유하면 동일한 그룹의 일부로 인식됩니다.

  유사성 원칙은 공유 특성이 분산된 배치에도 불구하고 요소를 통합 할 수 있다는 점에서 다른 여러 시각적 그룹화 원칙과 다릅니다.

  또한 시각적으로 유사한 항목이 다른 위치 기반 그룹에도 포함될 수 있습니다.

  따라서 유사성 원칙이 근접성 또는 공통 영역에 의해 압도되는 경우가 많기 때문에 반드시 가장 강력한 그룹화 원칙은 아니지만, 가장 탄력적인 것으로 간주 될 수 있습니다.

.

• 색상

  공유 색상을 적용하여 특정 항목이 관련되어 유사하게 작동 할 수 있음을 나타내는 것은 강력합니다.

  일반적인 색상은 형태과 같은 다른 특성보다 더 두드러지는 경향이 있으므로 다양한 유형의 요소를 통합하고 실제로 관련이 있음을 전달하는 데 사용할 수 있습니다.

  사용자 인터페이스 디자인에서 색상은 흔히 공통 기능을 나타내는 데 사용됩니다.

  예를 들어, 클릭 가능한 항목을 사용자에게 전달하는 기본 방법으로 단일 링크 색상을 사용하는 것이 가장 좋습니다.

  공유 색상을 사용하면 클릭 가능한 요소가 페이지의 링크 위치에 관계없이 그룹으로 돋보일 수 있습니다.  

  이 링크 색상은 대화형 텍스트 및 기타 클릭 가능한 요소에만 지정되어야 합니다.

  사용자는 이 특성을 공유하는 모든 항목이 관련되어 있고 동일한 방식으로 작동한다는 것을 인식하게 됩니다.

  따라서 링크 색상은 키워드, 클릭 할 수 없는 제목 또는 실제로 클릭 할 수 없는 주변 아이콘에 사용해서는 안됩니다.

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://www.nngroup.com/articles/gestalt-similarity/

신뢰를 위한 디자인

.

신뢰는 사용자 행동을 유도하는 강력한 힘입니다. 그리고 미학은 신뢰의 차원이기 때문에 모든 디자이너는 신뢰가 어떻게 작용하는지 이해하려고 노력해야 합니다.

스토리텔러는 디자인 속성을 능숙하게 사용하여 특정 감정을 불러 일으킵니다. 예를들어 색상, 색조, 형태, 선, 유형, 모양, 질감, 크기, 균형 및 대비가 있습니다.

디자인은 인간적으로 우리가 행복하고, 공감하고,
동기를 부여하고, 심지어 슬프게 느끼도록 영감을 줍니다.

광고주는 브랜드가 의미 있고 감성적인 방식으로 연결될 수 있도록 사람의 성향을 활용할 때 성공합니다.

마케터들이 디자인을 통해 드러낼 수 있는 모든 감정적 반응들 중에서
신뢰는 특히 업무 완료를 위해 가장 중요합니다.

온라인 사기, 신뢰 할 수 없는 사이트들, 그리고 다른 위험한 온라인 사이트들은 웹을 이용하는 사람들 마음속에 자연스러운 불안감과 불신을 심어주었습니다.

그들이 매체를 덜 신뢰할수록, 그들은 의미있고, 실행가능하며, 지속적인 방법으로 브랜드를 열 가능성이 줄어듭니다.

사람들은 많은 정보없이 매우 빠른 정서적 결정을 내릴뿐만 아니라 유사한 정서적 반응을 촉진하는 디자인 관습의 존재를 암시합니다.

그리고 사람들은 옳은 것을 좋아하기 때문에 나머지 경험이 얼마나 좋든 나쁘든 상관없이 초기 인상은 그들에게 남아 있습니다.

고객 전환 깔때기는 시간, 경쟁, 관심, 비용 및 미지의 측면에서 위험 요소가 산재해 있습니다. 고객이 여러분의 소개 페이지를 보기 전에 많은 일이 일어나야 합니다.

정확한 타겟팅 전략과 함께 디지털 및 기존 미디어 장소에 걸쳐 창의적이고 명확한 영업 활용을 유도하는 크리에이티브 캠페인을 시작하고 적절한 수준의 인상과 반복을 지원하는 재무 계획을 수립하고 있다면 1,000명 중 3~6명이 클릭할 것입니다.

광고를 보고 사람들은 방문 페이지로 이동합니다. 그러면 여러분은 올바른 감정적 관계를 형성하기 위해 20분의 1초를 갖게 될 것입니다.

결국이 3~6 명을 전환 퍼널의 다음 단계로 발전시키는 유일한 느낌은 신뢰입니다. 신뢰가 모든 것보다 우선합니다.

그리고 미학은 신뢰의 차원이기 때문에
모든 디자이너는 신뢰를 주는 방법을 이해하려고 노력해야 합니다.

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://uxdesign.cc/design-for-trust-342e639ca9ef

게이미피케이션 (참여도와 만족도를 높이기 위한 11가지 팁)

.

1. 게이미피케이션은

소비자 대상 웹이나 모바일 사이트 등 애플리케이션 사용을 권장하기 위해 게임 플레이 기법을 적용하는 것을 뜻합니다.

게이밍과 게이밍을 사용하여 사용자 환경을 개선하는 방법에 대해 알아보겠습니다.

notees에서 만들어진 이 기술은 사용자가 지루하고 일상적인 작업을 완료하도록 유도하는 설계 기법 입니다.

.

2. 게이밍 이란 무엇입니까?

어느 시점에서 우리 모두는 원하지 않는 일을 해야하거나 재미없는 일들을 해야 했습니다. 게임화의 과정은 모든 제품을 게임으로 바꾸는 것이 아닙니다.

이것은 디자이너들이 게임에서 나오는 면을 시뮬레이션하여 게임 이외의 제품이나 서비스에 사용하는 메커니즘에 가깝습니다.

이러한 즐거운 요소들의 통합은 인간의 감정과 동기에 영향을 주어 사용자들이 더 즐거운 경험을 할 수 있도록 합니다.

기본적으로, 많은 디자이너들은 재미를 더하려고 노력하고 있습니다.

.

3. 게임 화의 이점

게이밍을 사용하는 것은 사용자가 특정 태스크에 소속되어 있지 않거나 작업을 완료하기를 원하지 않을 때 특히 도움이 될 수 있습니다.

이러한 작업은 지루한 작업으로 인식되거나 완료되는 특정 개인에게 거의 가치가 없는 작업으로 인식될 수 있습니다.

재미있는 요소를 주입함으로써 사용자를 격려하고 장려할 수 있으며, 이러한 작업과 관련된 부정적인 감정을 숨기거나 제거하는데 도움을 줄 수 있습니다.

게임화는 모든 분야의 비즈니스에 도움이 될 수 있지만, 특히 마케팅, 영업 및 고객 서비스 부문에서는 더욱 그렇습니다.

가장 성공적인 게임화 기술은 사용자들의 습관을 변화시킬 수 있습니다. 한때는 지루한 작업이었던 일을 잘 하고 싶어할 정도로 말이죠.

.

게이메이션을 사용하여 과제를 만들고 성공했을 때 보상을 하면
다음 사항이 증가할 수 있습니다.

약속, 만족감, 생산성, 학습, 유용성, 세일즈, 기억력

. .

어떻게 하면 당신의 경험에 맞는 게이미피케이션을 얻을 수 있을까요?

1. 사용자와 목표 파악

동기 부여는 사용자 유형과 목적에 따라 달라집니다.

디자인 활동에 앞서 UX연구를 수행하면
게이미피케이션 솔루션에 대한 정보를 제공할수 있고
이를 가장 잘 달성 할수있는 기법을 생각해 볼 수 있습니다.

• 도전을 기반으로 한 활동이 보상을 줄까요, 아니면 박탈될까요?
• 개인적인 도전이 팀 내에서 경쟁을 유발할까요?
• 시간을 기반으로한 활동이 생산성을 향상시키는 방법입니까, 아니면 품질 저하 위험이 있습니까?

사용자와 개인의 목표를 알면 '게임'에 대한 자신의 목표를 설정하는데도 도움이됩니다. 사용자가 이러한 목표를 성공적으로 달성하면 재미를 위한 강력한 요소인 성취감이 생깁니다.

자신만의 목표를 설정하고, 게임화 측면에서 무엇을 이루려고 하는지 목표에 대해 생각하는 것도 중요합니다.

.

2. 문맥 인식

경험에 재미를 주입해야 하는 요구 사항의 균형을 맞출 때 문맥은 매우 중요하며, 동시에 작업을 완료해야 하는 고유한 요구 사항을 기억해야 합니다.

운전을 예로 들어 보겠습니다.
운전자들에게 좀 더 침착한 스타일을 적용하고 더 경제적이 되도록 장려하는 것은
문제가 되지 않고 자신이나 다른 사람의 안전을 위협하지 않는 한 괜찮습니다.

마찬가지로, 친구와 가족 간의 경험에 사용되는 기술은 직장 동료들에게 적용되었을 때 반드시 성공하지는 않을 것입니다.

'게임'에 대한 규칙을 관리하면 경계가 제공되고 사용자가 '게임' 방법을 이해하는 데 도움이 됩니다. 사용자가 이러한 규칙을 쉽게 이해할수록 더 많은 참여를 유도할 수 있습니다.

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://www.uxcentric.co.uk/post/the-a-to-z-of-ux-g-is-for-gamification-10-tips-for-increasing-engagement-and-satisfaction

웹 디자인의 7가지 필수 원칙

.

웹 사이트의 디자인은 고객에게 중요합니다. 웹 사이트가 불쾌하다면 비즈니스 목표에 대한 결과도 마찬가지입니다. 원활한 사용자 경험을 제공하는지 확인하는 것이 최우선 과제입니다.

.

WebFX의 연구 결과는 다음과 같습니다.

1. 첫 인상의 94%는 사이트의 웹 디자인과 관련이 있습니다.
2. 웹 사이트 신뢰도의 75%는 디자인에서 비롯됩니다.
3. 소비자의 89%는 열악한 사용자 경험 이후 경쟁 업체와 쇼핑합니다.

.

제품 및 서비스를 디지털에서 브랜드를 적절히 표현하지 않으면
목표를 달성하지 못할 위험이 있습니다.

디자인은 마케팅에도 들어가므로 잠재 고객에게 매력적인 방식으로 브랜드를 전달합니다. 다음은 이러한 매력을 발산할 수 있도록 채택해야 하는 7가지 필수 원칙입니다.

.

1. 시각적 계층

웹 디자인에서 가장 중요한 원칙 중 하나인 시각적 계층 구조는 중요합니다. 각 페이지 콘텐츠의 계층 구조는 다음과 같은 특성으로 조작됩니다.

• 크기 : 요소가 클수록 눈에 잘 띕니다.
• 색상 : 밝은 색상은 흐릿한 색상보다 더 많은 관심을 받습니다.
• 방향 및 정렬 : 나머지 대부분의 요소와 다르게 정렬된 요소는 더 돋보입니다.
• 반복 : 동일한 스타일을 반복하면 콘텐츠가 더 관련성이 있음을 알 수 있습니다.
• 대비 : 색상의 극적인 대비는 특정 요소를 돋보이게 만듭니다.
• 공백 : 요소 주변에 더 많은 공간이 있으면 요소를 향해 시선을 끌 수 있습니다.
• 텍스처 & 스타일 : 더 풍부한 텍스처 또는 스타일이 플랫한 것과 구별됩니다.

이 원칙의 핵심은 시청자가 가장 집중하기를 원하는 영역인 초점을 설정하는 것입니다.
비즈니스 목표를 염두에 두고 시청자가 엿볼 수 있도록 필요한 항목의 순위를 매깁니다.
그런다음 위의 특성을 조작하여 사람들이 이러한 사항에 주의를 기울일 수 있도록 합니다.

.

2. 힉스 법칙(Hicks Law)

심리학자 William Edmund Hick과 Ray Hyman의 이름을 따서 명명 된 Hick-Hyman 법칙이라고도 알려져 있습니다.
이 법칙은 사용자가 더 많은 선택을 할 수록 결정을 내리는 데 오랜 시간이 걸리는 것을 제안합니다.

여러분이 거의 끝없는 옵션을 제공하는 식당에 갔을 때 이런 경험을 해본 적이 있을 겁니다. 웹 사이트도 마찬가지입니다. 방문자에게 더 많은 옵션을 제공할수록 방문자가 탐색하기가 더 어려워집니다.
기본적으로 K.I.S.S.(Keep It Simple Stupid)와 옵션을 제거해야 합니다.

다양한 제품을 제공하는 경우 필터 기능을 제공하는 것을 고려해주세요. 만약 아마존이 홈페이지에 모든 제품을 보여주었다고 상상해보세요. 생각만으로 벌써 두통이 생깁니다.

.

3. Fitts 법칙

유명한 심리학자 Paul Fitts의 이름을 따서 명명된 이 법은
사람이 포인터를 목표 영역으로 이동하는 데 필요한 시간을 고려합니다.

예를 들어, 클릭하려는 다음 위치로 마우스 (모바일의 경우 엄지 손가락)를 이동하는 데 걸리는 시간입니다.
대상까지의 거리를 대상 크기로 나눈 값으로 계산됩니다. 따라서 웹 사이트에 있는 요소의 거리가 길고 크기가 작을수록 사용자가 해당 요소에 도달하는 데 더 많은 시간이 걸리고 따라서 더 많은 에너지를 사용해야 합니다.

좋은 UX (사용자 경험)는 사용자를 더 어렵게하는 것이 아니라 더 쉽게 만드는 것입니다.
하지만 그렇다고 크기가 클수록 더 좋은 것은 아닙니다. 화면의 절반을 차지하는 버튼은 좋은 생각이 아닙니다.

화면의 다른 모든 버튼과 적절한 비율을 유지하는 것이 더 중요하며 스마트 폰, 태블릿, 데스크톱 등과 같은 기기에 따라 올바른 비율이 다릅니다.

.

4. 삼등분의 법칙

황금 비율 이론 (The Divine Proportion)에서 탄생 한 것은 1/3의 법칙입니다. 3분의 1의 법칙은 이미지를 9개의 동일한 부분으로 나누어야 함을 설명합니다.

이미지를 9개의 균등 부분으로 나누면 4개의 교차점을 상상할 수 있습니다. 이 교차점은 여러분의 눈이 가장 많이 머무르는 곳입니다. 디자이너가 이를 인식하면 교차점과 일치하도록 이미지 또는 콘텐츠를 중요도에 따라 복잡하게 배치 할 수 있습니다.

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://uxplanet.org/7-essential-principles-of-web-design-e9645d54cec8

브로셔는 마케팅의 필수 요소입니다. 이상적인 고객에게 어필 할 수 있도록 제품과 서비스를 광고 할 방법은 비즈니스에서 중요합니다. 

예를 들어, 사람들은 컨퍼런스나 무역 박람회에 가면 책자 더미를 많이 들고 나갑니다. 하지만 어떤 것을 버리지 않고 보관 할까요? 브로셔 디자인은 바로 여기에 있습니다.

저는 브로셔를 생각할 때 그 지역의 투어와 활동에 대한 다채로운 팜플렛으로 가득 찬 호텔의 나무 디스플레이를 상상합니다. 또는 은행의 대기실에 다양한 유형의 신용 카드 요금제에 대한 브로셔를 생각합니다.

예전엔 브로셔가 중요했지만 지금은 상황이 조금 다릅니다.
호텔에서는 아이패드에 있는 전자 여행 카탈로그를 제공하고있고 은행에는 평면 TV가 있습니다.

브로셔는 여전히 안내 책자이며, 여전히 중요합니다. 하지만 우리가 온라인에서 더 많은 광고를 하고 있기 때문에 매력적인 물리적 브로셔는 냉장고 자석 아래에 놓일 가능성이 더 높습니다.

이 글에있는 가이드는 브로셔 디자인을 시작하는 데 필요한 모든 것이 있습니다. 시각적 영감에서 예비 작업, 마지막으로 실제 브로셔 디자인 단계에 이르기까지 다양합니다.

.

1. 브로셔란 무엇입니까?

간단히 말해서 브로셔는 회사의 서비스나 제품을 보여주는 시각적 마케팅 자산입니다. 잠재 고객을 유치하려는 기업을 위한 공통 리소스입니다.

브로셔는 일반적으로 인쇄되어 이벤트, 기타 지역 관련 비즈니스에서 고객에게 제공되거나
오픈 하우스 방문을 상기시켜 줍니다. 브로셔 배포 방법에는 제한이 없습니다.

현대에서 브로셔를 인쇄하는 것은 어렵지 않습니다. 기술적으로 pdf 브로셔를 만들어 이메일로 보낼 수도 있습니다. 하지만 고전적인 브로셔는 인쇄된 종류입니다.

.

2. 브로셔, 팜플렛 및 전단지의 차이점은 무엇입니까?

브로셔와 팜플렛이라는 용어를 같은 의미로 듣는 것이 일반적입니다.
똑같이 보일 수 있지만 내용과 목적면에서 차이가 있습니다.

브로셔의 목적은 회사의 제품이나 서비스를 유인, 설득하고 궁극적으로 판매하는 것입니다.  반면 팜플렛은 특정 주제에 대한 정보를 전달하지만 판매하지는 않습니다.

예를 들어 박물관에서 여행에 대한 이야기를 전하고 방문자와 공유하려는 경우 팜플렛이 됩니다.  지역 학교에서 지역 사회에 여름 캠프 과정을 제공하려면 브로셔가 필요합니다.

브로셔와 전단지의 차이는 시각적 차이와 목적 입니다.   전단지는 특정 이벤트 또는 판매를 홍보하는 펼쳐진 페이지로 한쪽 또는 양쪽에 인쇄됩니다.  브로셔보다 전단지에 정보가 적은 경향이 있습니다.

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://medium.com/sketch-app-sources/the-ultimate-guide-to-brochure-design-f932dae388b4

모던 웹 디자인에서 고딕체(산세리프) 타이포그래피의 역사와 사용법

.

산세리프(Sans serif) 글꼴 사용에 대한 가장 초기의 알려진 예는 1779년으로 거슬러 올라갑니다. 당시 영국의 건축가 John Soane은 영국 상원 의회를 위한 계획 도면에 세리프리스 문자를 적용했습니다.

신 고전주의 건축가로써 그는 고풍스러움으로 되돌아가고자 노력했고
그의 작품에서 고전적인 고대의 전형적인 단순함을 성취하기 위해 노력했습니다.

그것은 글자에도 반영되었습니다. 그가 이 디자인을 위해 만든 글자들은 구조적이고 기하학적이었으며
앞으로 몇 년 동안 산세리프의 발전에 큰 영향을 끼쳤습니다.

.

대문자 산세리프 문자는 처음에는 헤드라인과 제목, 특히 광고에서 거의 독점적으로 사용되었습니다. 19세기 초에 산세리프는 "Old Roman"이나 "Egyptian"으로 불렸습니다.

당시 유럽은 나폴레옹의 이집트 침공의 결과로 이집트 만물에 대한 새로운 관심을 표현했고, 산세리프는 고대 이집트 건축의 전형적인 글자를 떠올리게 했습니다. "Egyptian"는 1816년경 William Caslon 4세에 의해 개발된 최초의 상업용 산세리프 글꼴의 명칭이기도 합니다.

"산세리프"라는 용어의 첫 사용은 1832년 Vincent Figgins에 의해 불리게 되었습니다.

.

다양한 형태의 산세리프 사용이 유럽과 북아메리카 전역에 퍼지기 시작했습니다. 세리프 글꼴은 사람들을 혼란스럽게 했고, 그 글자를 그로테스크한(괴상한) 것으로 묘사했습니다.

사람들이 그것들을 사용하기 시작하고 새로운 예술 철학이 발전함에 따라 창작자들은 글자의 모양을 실험했습니다.

특히 러시아에선 더욱 강하고 기하학적이고 생글씨 형태를 발전시켰고, 반면 바우하우스는 아르누보에 대한 반응으로 서체의 사용을 더 대중화 시켰습니다.

그것은 "Futura" (1928)와 같은 가장 영향력 있는 세리플리스 글꼴 중 일부를 만드는 것으로 이어졌습니다.

수십 년 후, 1960년대 스위스에 의해 국제 타이포그래픽 스타일이 대중화되었을 때, 전설적인 "헬베티카"와 "유니버설" 글꼴이 세상에 소개되었습니다.

.

현재로 빠르게 나아가고있는 sans-serifs의 독창성은 새로운 차원에 도달하고 있습니다.

디자이너들은 헤드라인 뿐만 아니라 본문에도 적용하고 있습니다. 많은 인기 브랜드 (특히 Google)는 로고를 serifs에서 sans-serifs로 변경했으며 일부는 수도 전용 serifless 타이포그래피 (예 : Saint Laurent)를 선택했습니다.

Serifless 서체는 날카롭고 깨끗하며 가독성이 좋기 때문에 디자이너는 타이포그래피 측면에서 많은 자유와 실험을 할 수 있습니다.

그리고 전체를 대문자로 사용하는 관행은 지난 몇 년 동안 인기를 얻었습니다.

대문자 산세리프 타이포그래피는 고전적이고 현대적이며 유동적이며 모든 종류의 브랜드 개성과 미학을 수용 할 수 있습니다.

.

우리는 여러분에게 대문자 산세리프 타이포그래피의 창조적인 범위를 보여주는 웹사이트를 소개하려고 합니다. 여러분은 이 눈에 띄는 페어링이 얼마나 많은 것을 보완 할뿐만 아니라 달성하고자 하는 미적 브랜드를 증폭시킬 수 있는지 알게 될 것입니다. 올캡 산세리프 문자의 힘, 다양성 및 유연성을 보여주는 사이트는 다음과 같습니다.

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://qodeinteractive.com/magazine/uppercase-sans-serif-typography-in-modern-web-design/

인터랙션(상호 작용)은 웹 사이트에 활기를 불어 넣어 사용자를 기쁘게하고 참여도를 높일 수 있습니다.

예를들어 헤드폰을 판매하는 쇼핑몰에서 마우스 오버 상호 작용이 확대되고 페이지 요소 중 하나에 색상을 추가하는 상호 작용은 웹 사이트에 활력을 불어넣어 사용자를 즐겁게 하고 참여도를 높일 수 있습니다.

인터랙션 디자인은 웹 디자인에서 가장 중요한 요소 중 하나라는 것은 놀라운 일이 아닙니다.
원하는 결과를 얻으려면 구동 원리와 프레임워크를 이해해야 합니다.

이제 인터랙션 디자인이 무엇인지부터
무엇이 만들어 졌는지에 이르기까지 제대로 이해하기 위해 알아야 할 모든 것을 살펴 보겠습니다.
인터랙션 디자인의 원칙과 그 이점은 물론 에디터 X에서 호버 인터랙션을 만드는 방법을 다룰 것입니다.

.

인터랙션 디자인이란?

인터랙션 디자인은 방문자가 참여할 수있는 디지털 요소를 만드는 데 초점을 맞춘 UX 디자인 분야입니다.

예를 들어 버튼, 연결, 컨트롤 전환, 양식 필드, 슬라이더 컨트롤, 아코디언, 호버로 트리거되는 애니메이션 등 이 있습니다.

인터랙션 디자인은 단순히 사용자가 참여할 때 변하는 정적 요소로 전환하는 것 이상의 의미를 가집니다.

인터랙션 디자이너는 사용자가 어떻게 생각하고 행동하는지 이해해야합니다.

실제로 상호 작용으로 인식 할 수 있고 브랜드와 앱 또는 웹 사이트 디자인에 참여하려는 사용자의 신뢰와 신뢰를 높이는 요소를 디자인하는 유일한 방법입니다.

이는 실제로 대화형 요소로 인식되고 브랜드와 해당 앱 또는 웹 사이트 디자인에 참여하려는 사용자의 신뢰와 신뢰를 높이는 유일한 방법입니다.

사용자가 본질적으로 참여하는 방법을 알고있는 대화 형 인터페이스를 설계하면
사이트에서의 경험을 개선하고 목표를보다 효과적으로 달성하고
사용자와 제품 간의 의미있는 관계를 조성 할 수 있습니다.

.

인터랙션 디자인의 5가지 차원

인터랙션 디자인 언어 또는 차원을 만드는 개념은
Gillian Crampton Smith에 의해 처음 소개되었습니다.
이러한 차원은 대화형 UI가 사람들과 통신하는 다양한 방식을 정의합니다. 당시에는 4가지 차원이 있었습니다.

오늘날 우리는 5가지 차원을 상호작용 설계의 프레임워크로 인식하고 있습니다.

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://www.editorx.com/shaping-design/article/interaction-design

Netflix 디자인에 대해 무엇을 배울 수 있습니까?

디자이너는 최종적으로 세련된 UI를 디자인할 뿐만 아니라 웹 사이트의 UX 또는 사용자 경험에 대해 생각해야 합니다.

이 기사에서는 5개의 잘 알려진 웹 사이트를 분석하여 그 웹 사이트에서 무엇을 배울 수 있는지 알아보고 이를 웹 디자인 프로젝트에 적용합니다.

몇 가지 기본 사항을 먼저 살펴 보겠습니다. UX와 UI의 차이점은 무엇이며 웹 디자이너로서 이것을 왜 둘 다 알고 있어야합니까?

.

UX (User Experience) 란? 사용자 경험 (UX라고도 함)은 웹 사이트나 앱과 같은 디지털 제품과 상호 작용할 때 사용자가 경험하는 전반적인 경험을 설명하는데 사용되는 일반적인 용어입니다.

UX 디자이너가 프로젝트를 위해 작업 할 수있는 작업으로는 사용자 테스트, 사용자 흐름 및 여정지도, 와이어 프레임, 로우 및 하이파이 UI 모형 디자인, 작동하는 프로토 타입 제작 등이 있습니다. 기본적으로 UX에는 전체 엔드-투-엔드 프로세스가 포함됩니다.

와이어 프레임은 UX 디자인 프로세스의 중요한 부분입니다. 개별 랜딩 페이지에 대한 콘텐츠를 매핑하는 방법과 이러한 페이지가 서로 상호 작용하여 사용자 여정을 만드는 방법입니다. 와이어 프레임은 간단한 펜 및 종이 스케치에서 저 충실도 및 고 충실도 디자인의 모형에 이르기까지 다양 할 수 있으며, 각각은 디자인 프로세스에서 목적을 제공합니다.

더 많은 아이디어를 얻기 위해 디자인 프로세스를 시작할 때 손으로 빠르게 스케치 할 수 있습니다. 나중에 생각을 공유하고 클라이언트 또는 사용자 테스트를 위해 피드백을 요청하기 위해 충실도 높은 와이어 프레임을 만들고 싶을 것입니다.

또한 UX 디자인 프로세스의 일부는 프로토타이핑으로, 마치 사용자가 실제로 제품과 상호 작용하는 것처럼 와이어 프레임에 생명을 불어 넣습니다.

와이어 프레임에 많은 세부 사항이 있고 사용자가 앱과 상호 작용할 수있는 방법을 명확하게 이해하고 있기 때문에 이것은 고화질 프로토 타입으로 간주됩니다.

.

UI 란? UI (사용자 인터페이스라고도 함)라는 용어는 웹 사이트 또는 앱의 모양과 느낌을 디자인하는 것을 의미합니다.

UI를 디자인 할 때 강력한 시각적 디자인 기술이 필요합니다. 그리드, 타이포그래피, 색상 및 레이아웃을 사용하여 사용자가 탐색 할 수 있도록 깔끔하고 간결한 방식으로 정보를 구성합니다. 시각적 세부 사항을 수정하고 버튼 크기, 색상, 둥근 모서리와 정사각형 모서리와 같은 디자인 결정을 내릴 것입니다.

와이어 프레임 작업을 할 수 있지만 대부분의 경우 이러한 와이어 프레임을 가져와 개발 준비가 된 세련된 UI 모형을 만듭니다. 왼쪽의 와이어 프레임과 오른쪽의 최종 UI 디자인으로 시작하는이 예제를 살펴보십시오.

구조가 동일하게 유지되는 방식에 유의하십시오. 유일한 차이점은 색상, 타이포그래피, 일러스트레이션 및 디자인 요소를 추가하는 것입니다. 이제 UX 및 UI 디자인에 대한 이해의 기초를 얻었으므로 사용자로서 이미 접했을 수있는 유명 웹 사이트의 몇 가지 예를 살펴 보겠습니다.

.

1. 넷플릭스 Netflix는 제대로 된 UX의 좋은 예입니다. 웹 사이트에서 앱이 모바일 및 TV 용으로 설계된 방식에 이르기까지 모든 플랫폼은 원활한 경험을 제공합니다. Netflix와 같은 제품을 사용하는 경우 사용자의 의도를 고려해야합니다.

누군가 Netflix에 로그인하면 지금 당장 무언가를보고 싶은 기분이 듭니다. 시청하고 싶은 콘텐츠를 이미 알고있을 수도 있지만 조금 더 탐색해야 할 것입니다. Netflix는이 여정에서 사용자를 돕기 위해 많은 일을 합니다.

첫째, 화면의 상단 절반이 몇 초 후에 자동 재생되기 시작합니다. 이렇게하면 사용자가 빠른 "미니 트레일러"클립에서 영화나 쇼를 이해하는 데 도움이 됩니다. 누군가 관심이 있고 배우고 자하는 경우 재생 또는 추가 정보를 누를 수 있는 옵션이 있습니다.

볼 항목을 더 많이 선택하면 하나의 썸네일 위로 몇 초 이상 마우스를 가져 가면 동일한 자동 재생 기능이 나타납니다. 

이 기능은 사용자가 관심있는 콘텐츠를 찾는 문제를 해결하는 데 도움이 되지만 잠시 후 짜증이 날 수 있습니다.  넷플릭스는 또한 이것을 생각하고 사용자에게 사운드를 비활성화하고 브라우징 이유를 미리 볼 수있는 옵션을 제공했습니다.

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://uxplanet.org/what-can-we-learn-about-design-from-netflix-502f6a384aa8

초기 아이덴티티 부터 최신 리브랜딩에 대한 생각에 이르기까지 Maze의 브랜드를 만들기 위해 겪은 과정을 공유합니다.

.

1. 회사 이름짓기

3년 전 회사를 설립했을 때, 저는 회사의 이름에 대해 많은 고민을 했습니다. 우리는 회사의 성장에 따라 관련성을 유지할 수 있는 단순하고 추상적인 이름을 원했습니다.

사람들은 목표를 가지고 제품과 상호작용 하는데, 이러한 목표와 차별화되는 것을 만드는 게 UI/UX입니다. 우리는 디자이너들이 쉽게 테스트할 수 있도록 함으로써 UX를 더 잘 만들 수 있도록 돕고 싶었습니다. 또한 우리가 원하는 방향으로 브랜드를 성장시킬 수 있을 정도로 기억과 발음이 쉽고 추상적이었습니다.

Maze라는 이름은 우리의 목표에 딱 들어맞았습니다.

.

2. 기초 쌓기

이제 우리가 이름을 갖게 되었으니 그다음 목표는 로고, 색상, 음색 등 모든 자산을 갖춘 완전한 시스템으로 변환하는 것이었습니다.

메이즈의 첫 브랜드 아이덴티티입니다. 당사의 첫 번째 브랜드 시스템은 다음과 같습니다.

• 로고를 위한 글리프(글자의 모양) M이라는 글자를 나타내는 위에서 바라봤습니다.
• 음성 가이드라인 우리의 임무는 디자이너들이 테스트 할 수 있도록 하는 것이어서 우리는 그 톤이 장난스럽고 쉽게 접근하기를 원했습니다.
• 일러스트 우리 브랜드의 시각적 그림들은 장난감과 같은 형식으로 표현했고 그 안에서 움직이는 공은 인터페이스와 상호 작용 하였습니다.

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://maze.co/blog/building-the-maze-brand

UX와 UI의 세계에서 프로젝트를 시작할 때 항상 명심해야 할 것은 스타일 가이드입니다. 브랜드의 사용자 경험을 향상시키고 새로운 수준으로 끌어 올리는 데 도움이 됩니다.

스타일 가이드는 일관된 디자인 시스템을 만드는 데 도움이 됩니다. 아이디어를 효과적으로 전달하고 훌륭한 콘텐츠를 만들 수 있습니다.

생산성을 저해하지 않고 작업 시간을 절약 할 수 있으며 무엇보다도 가장 전문적인 시각으로 브랜드와 회사를 선보일 수 있습니다.

스타일 가이드를 통해 얻을 수 있는 몇 가지 이점을 살펴보겠습니다.

.

1. 프론트 엔드 개발자

   모든 중요한 정보와 데이터를 참조하여 CSS 및 HTML을 작성하고 색상에 대한 16 진수 코드를 쉽게 찾고, UI 구성 요소, SVG 파일을 재사용하고 필요한 다른 자산을 빠르게 찾아 추출 할 수 있습니다.

2. UX 디자이너

   브랜드 스타일에 맞는 반응형 레이아웃을 제작할 수 있도록 도와줍니다.

3. 소셜 미디어 관리자

   문서를 참조하여 동일한 서체, 색상 팔레트 및 그래픽 자산을 사용하여 일관된 소셜 미디어 피드를 만들 수 있습니다.

4. 크리에이티브 작가

   브랜드의 특정 목소리 톤에 맞는 카피를 제작합니다.

.

프로젝트를 시작하기 전에 범위, 스타일, 시각적 방향 및 목소리 톤을 정의하는 스타일 가이드가 있으면 모든 팀원에게 매우 유익할 수 있습니다.

또한 여러분이 구상한 최종 제품을 만들고 길을 잃지 않도록 안내하는 데 도움이 되는 참조 지점이 될 수도 있습니다.

UX/UI 스타일 가이드 문서는 마감일을 준수하고, 항상 높은 생산성을 유지하며 일반적으로 스트레스를 피하는 데 도움이 됩니다.

.

스타일 가이드 또는 브랜드 가이드 라인은 무엇입니까?

스타일 가이드는 브랜드 가이드 라인이 아닙니다. 스타일 가이드는 프로젝트를 시작할 때 최종 제품의 시각적 이미지 / 표현을 얻고 디자인 및 개발 프로세스, 즉 무엇을 예상할 수 있는 설명하는 데 도움이 됩니다.

브랜드 가이드라인 북은 로고 타입 (기본 및 보조), 그래픽 요소, 패턴 및 아이콘과 같은 특정 브랜드 요소의 사용과 웹, 인쇄물 및 기타 미디어에서의 응용 프로그램을 지정하는 문서입니다. 또한 모든 브랜드 자산에 대한 최적의 애플리케이션 크기와 간격을 제안합니다.

스타일 가이드의 규칙을 준수하고 제공된 것을 활용하면 다음 사항에 대해 걱정할 필요가 없습니다.

타이포그래피 / 서체, 색상 팔레트, 아이콘, 이미지, UI 구성 요소 HEX 코드, CMYK 및 RGB 값, 목소리 톤, 코드 문서

.

참고할 만한 스타일 가이드는

• NASA 그래픽 표준 매뉴얼
• Mailchimp의 스타일 가이드
• Barnes & Noble의 UI 스타일 가이드 입니다.

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://www.uxpin.com/studio/blog/style-guide-ux/

팝업은 모든 기업이 가입자를 확보하거나 영업 기회를 창출하는 데 도움이 됩니다. 하지만 만약 여러분이 적절한 계획을 세우지 않고 팝업을 띄운다면 방문자들은 페이지를 떠날 수도 있습니다. 최악의 경우 계획되지 않은 팝업으로 인해 Google 위약금이 부과될 수 있습니다.

그렇다면, 여러분의 팝업이 효과적이라고 결정하는 요인은 무엇일까요? 성가신 팝업이 되지 않는다는 걸 어떻게 아실 건가요.

팝업 양식을 설계하기 위한 몇 가지 팁과 모범 사례를 소개합니다.

.

1. 단순하고 집중적인 상태

캠페인을 시작할 때마다 고객의 관점에서 생각해 보십시오. 만약 당신의 팝업이 혼란스럽거나, 서툴거나, 짜증난다고 느끼면, 그들은 떠날 것입니다. 따라서 간단해야 합니다. 단순하고 포인트 팝업으로 만들어야 합니다.

.

2. 간단한 클릭 유도 방법

개인화된 CTA가 기본 CTA보다 약 202% 더 잘 변환된다는 것을 알고 계셨습니까? 방문자가 웹 사이트를 읽거나 탐색하는 동안 갑자기 팝업이 나타나면 활동을 방해받을 수 있습니다.

당신은 단지 팝업을 통해 방문자의 이메일 주소를 얻고 가능한 한 빨리 사라지기를 원할뿐입니다. CTA는 짧은 시간 내에 버튼을 누르도록 권장해야 합니다.

.

3. 팝업에 스토리를 추가

스토리를 추가하는 것은 단순히 팝업을 친구처럼 느끼게 하는 것을 의미합니다. 팝업을 클릭할 가치가 있도록 할 수 있습니다.

만약 여러분이 목표 대상자에 대해 전혀 알지 못한다면 어떻게 팝업을 개인화 하시겠습니까 가장 좋은 방법 중 하나는 추천 소스를 활용하는 것입니다.

레퍼러 탐지 도구를 사용하여 특정 도메인에서 온 방문자를 식별합니다. 이제 수집된 정보를 사용하여 팝업을 개인 설정합니다.

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://medium.com/@alice.jackson/how-to-design-popup-forms-in-2021-best-practices-examples-for-inspiration-c974b785a31a

모든 사람이 시간을 할애할 가치가 있는 워크숍을 만드는 것이 핵심입니다. 워크숍이 왜 중요한지에 대한 목록으로 바로 들어가겠습니다.

• 아이스브레이커

아이스브레이커와 팀 구성 활동은 워크숍을 위해 모든 사람들을 따뜻하게 해주고 그들이 올바른 사고 방식을 갖도록 돕고, 긍정적인 에너지를 만들고, 팀 동료들과 공감대를 형성하며, 여러분의 일상적인 일에 맥락을 더하도록 도와줍니다.

• 대화의 시작

팀을 나눠서 두 가지 공통점을 발견하고 이 두 가지를 바탕으로 팀 이름을 생각해냅니다

사람들이 서로를 잘 알지 못할 때 대화를 시작하면서 서로를 알아가기 위한 방법으로 도움이 됩니다.

.

• 화이트보드를 이용

온라인 화이트보드 도구에 한 사람당 2개의 사분면이 있는 보드를 설치하고 각 참가자는 사분면에 기입합니다. 맨 위에는, 휴대폰에서 무작위로 찍은 사진, 책상 위에 있는 사진 등, 카테고리의 사진을 넣을 것입니다. 맨 아래 사분면에, 그들은 특정한 질문에 대답할 것입니다. "최근에 배운 것이 무엇인가?" "첫 번째 직업이 무엇이었는가?" "마지막 식사는 무엇이었을 것인가?" 등등.

사람들이 서로에 대해 좀 더 잘 알고 서로를 따뜻하게 해주기를 원할 때 사용합니다.

.

• 다른 언어로 소통

5개의 기호 (예 : 그림 이모티콘) 또는 그림으로  회사나 제품에 대해 설명해야 합니다. 각 참가자들은 다섯 개의 간단한 이미지를 그리거나 수집합니다. 

그룹에 언어 또는 문화적 차이가있을 때 특히 유용합니다. 모든 사람이 그림으로 의사 소통 할 수 있습니다.

이미지가 완벽할 필요는 없으며, 설명도 완벽하지 않다는 것을 반드시 설명하십시오.

.

• 거짓말 추측하기

각 구성원은 그룹에게 자신에 대한 세 가지 진술을 합니다. 다른 사람들은 세 가지 진술 중 어느 것이 거짓인지 추측해야 합니다.

참가자들이 사전에 진술을 생각할 수 있도록 워크숍이 시작되기 전에 미리 조언을 제공하는 것이 좋습니다. 온라인 화이트보드 도구에서 투표 기능을 사용하여 대부분의 사람들이 어떤 진술이 거짓이라고 생각하는지 확인할 수 있습니다.

.

- 팀 구성 활동을 위한 아이디어 창출

사람들에게 그들이 가지고있는 버킷리스트 하나 또는 두 개의 큰 인생 목표를 공유하도록 요청하십시오.

이미 서로에게 익숙한 그룹이 있지만 서로를 조금 더 알게되기를 원할때 적용합니다.

이 질문을 사람들에게 미리 알려주는 것이 좋습니다. 이것은 향후 팀 구성 활동을 위한 아이디어를 창출하는 좋은 방법입니다.

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://uxtools.co/blog/33-activity-ideas-for-remote-ux-workshops/

이 글은 현대 일러스트레이션의 특정 스타일에서 사용된
쉐이프 디자인(Shape design)에 대해 설명합니다.

도형 디자인은 그래픽 디자인 기법입니다.
그래픽 일러스트레이션이나 손으로 그린 연필, 종이 등
어떤 종류의 이미지 메이킹 작업에도 적용할 수 있습니다.

보다 유기적인 형태와 교차하는 기하학적 형태에 기초한
형태 디자인은 눈을 즐겁게 하고 현대적인 이미지를 보여줍니다.

저는 쉐이프 디자인을
보다 유기적인 형태와 함께 삼각형, 직사각형, S-커브 및 원 모양으로 많이 활용했습니다.

쉐이프 디자인이라는 용어를 사용할 때
저는 그래픽 일러스트레이션이나 이미지에 일종의 기하학적 쉐이프를 도입하는 것에 대해 말하곤 합니다.

쉐이프 디자인을 파악하는 데 유용 할 수있는 예제를 알려드리겠습니다.

좋아하는 아티스트를 선택하고 그 아티스트에게서 흥미를 끄는 특정 모양을 찾아서 복제 할 수 있는 방법을 찾아보세요.

저는 제가 좋아하는 이미지들 중 하나인 구름들이 꽤 흥미롭다는 것을 알았습니다. 그리고 포토샵에서 그 모양을 만드는 방법을 알고 싶어졌습니다.

우리가 어떤 요소를 그리거나 묘사할 때, 보는 것보다 직접 만드는 것이 훨씬 더 잘 이해할 수 있습니다.

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://uxdesign.cc/what-is-this-shape-design-thing-83f41cb64c94

Arial 및 Trebuchet, Times 및 Georgia와 같은 웹 안전 글꼴은 대부분의 운영 체제에 설치됩니다.

따라서 이러한 "시스템 글꼴"은 이메일 클라이언트, 웹 메일 클라이언트, 앱 및 브라우저를 포함하여 해당 운영 체제의 모든 소프트웨어에 표시되므로 "웹 안전"으로 분류됩니다.

보편적으로 웹 안전 글꼴은 이를 사용하여 디자인하고 개발된 이메일은 받은 편지함에서 눈에 띈다는 것을 의미합니다.

받은 편지함에서 눈에 띄는 부분은 사용자 지정 글꼴이 들어오는 곳입니다.

안타깝게도 웹에 적합한 글꼴과 달리 웹 글꼴은 대부분의 이메일 클라이언트, 웹 메일 클라이언트 및 앱에 표시되지 않습니다.

하지만 그렇다고해서 이메일에 웹 글꼴을 사용하는 것을 막을 수는 없습니다.

웹 글꼴을 표시 할 이메일 클라이언트, 웹 메일 클라이언트 및 앱, 사용할 웹 글꼴 형식 웹 글꼴을 가져올 위치 및 이를 이메일에 구현하는 방법을 알아야 합니다.

.

웹 글꼴을 표시 할 이메일 클라이언트, 웹 메일 클라이언트 및 앱

웹 글꼴은 웹에 적합하지 않지만 표시 할 이메일 클라이언트, 웹 메일 클라이언트 및 앱을 알면 안전 할 수 있습니다.

대부분은 Apple 운영체제 에서 찾을 수 있습니다. (macOS의 Microsoft Outlook 및 Thunderbird, macOS의 Mail, iOS의 Mail, iPadOS의 Mail)

글을 쓰는 시점에 Litmus의 이메일 클라이언트 시장 점유율 보고서에 따르면 전 세계 이메일의 50 % 이상이 이 소수의 이메일 클라이언트, 웹 메일 클라이언트 및 앱에서 열립니다. 따라서 웹 글꼴을 구현하는 데 시간과 노력을 투자하여 표시 할 가치가 있습니다.

그러나 웹 글꼴을 구현하기 전에 수신자가이를 표시 할 이메일 클라이언트, 웹 메일 클라이언트 및 앱을 사용하고 있는지 확인하십시오.

받는 사람의 50% 이상이 이를 사용하고 받는사람의 50% 미만이 이를 사용하는 것일 수 있습니다.

.

사용할 웹 글꼴 형식

이제 이메일에 웹 글꼴을 구현할 준비가 되었으므로 사용할 웹 글꼴 형식을 알아야합니다. 웹 글꼴은 다음과 같은 다양한 형식으로 제공됩니다.

1. TrueType 글꼴 (TTF)
2. OTF (Open Type Format)
3. EOT (Embedded OpenType)
4. 웹 오픈 글꼴 형식 글꼴 (WOFF)
5. 웹 오픈 글꼴 형식 글꼴2 (WOFF2)
6. 확장 가능한 벡터 그래픽 (SVG)
7. 이메일에는 WOFF(Web Open Font Format Font) 형식 만 표시됩니다.

.

웹 글꼴을 가져올 수 있는 위치입니다. 기본적으로 세 가지 옵션이 있습니다.

1. 무료: 다른 브랜드의 전자 메일에서 볼 수 있는 글꼴입니다.
2. 라이센스: 다른 브랜드의 전자 메일에서 볼 가능성이 낮은 글꼴입니다.
3. 다른 브랜드의 전자 메일에서 볼 수 없는 글꼴을 말합니다.

.

[1] Google Fonts Google Fonts는 수백 개의 무료 오픈 소스 글꼴 제품군을 제공하고 있습니다. 따라서 이것이 많은 브랜드를 위한 Go-to-Font Foundry라는 것은 놀라운 일이 아닙니다.

따라서 전자 메일에서 동일한 "Google 글꼴"을 사용하는 브랜드를 많이 볼 수 있지만 웹 안전 글꼴을 사용하는 브랜드는 많지 않습니다.

Google 제품에 나타나는 Google 글꼴도 볼 수 있습니다. Roboto는 Android 4.0 이후 부터 설치되어 있습니다.

.

[2] Envato Elements 저렴한 가격에 프리미엄 웹 글꼴을 찾고 있다면 Envato Elements를 확인하십시오. 저렴한 비용으로 방대한 글꼴 라이브러리에 액세스 할 수 있습니다. 전문적이고 상업적인 용도로도 사용이 허가되었습니다.

.

[3] Adobe Fonts 이전에 Typekit으로 알려진 Adobe Fonts는 수천 가지 글꼴을 제공하지만 이를 사용하려면 Creative Cloud 구독이 필요합니다. Baskerville 및 Futura와 같은 잘 알려진 이름과 Mrs Eaves XL 및 Fenwick과 같은 덜 알려진 이름이 포함됩니다.

다른 라이선스와 달리 Adobe Font 라이선스는 특정 달 내에 웹 페이지 또는 이메일에 글꼴이 업로드되는 횟수를 제한하지 않습니다.

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://webdesign.tutsplus.com/tutorials/web-fonts-for-email--cms-36847

빠르게 움직이는 프로젝트에서는 광범위한 스프린트 계획 회의를 위한 시간을 뽑는 것이 어려울 수 있습니다. 대규모 제품 개발 프로젝트 중 하나를 위해 프로세스를 최대한 효율적으로 유지하는 방법은 다음과 같습니다.

.

최근 제 마음에 떠오른 한 가지 요소는 스프린트 계획 회의에 얼마나 많은 시간을 할애해야 하는가 입니다.

이를 실행하는 방법에는 여러 가지가 있습니다. 구조는 방법론, 팀 규모, 프로젝트에서 현재 위치 등에 따라 다릅니다.

우리 주변의 COVID-19 전염병이 계속해서 전 세계의 환경을 변화시키고 있기 때문에

우리는 점진적이고 중요한 제품을 지속적으로 업데이트 하고 있습니다.

스프린트 계획 회의는 몇 시간 동안 지속될 수 있으며, 며칠 동안 지속될 수 있다는 이야기를 들었습니다.

모든 사람들이 그들이 무엇을 해야 하는지 확실히 아는 것에 대한 기회 비용은 엄청나게 비쌀 수 있습니다.

올바른 방법으로 수행하면 눈에 띄는 생산성 저하없이 상당한 시간을 절약 할 수 있습니다.

방법은 다음과 같습니다.

.

스프린트 계획 준비

첫 번째 스프린트 계획 회의를 가질 준비가되면 제품 관리자로서 집중하고있는 기능 세트에 대해 최종 사용자가 수행 할 수있는 모든 작업을 거의 알고 있어야 합니다.

그 지점에 도달하는 것은 그 자체로 일련의 기사이지만 우리의 목적을 위해 개발자가 적절하게 검토 한 디자인을 승인했다고 가정 해 보겠습니다.

(일반적으로 여기에 도달하는 프로세스는 요구 사항 수집 → 디자인과 제품 및 개발자 협업 → 구성 요소 → 기능 정의입니다.)

스프린트 계획을 준비하는 첫 번째 단계는 모든 디자인을 사용자 스토리와 정의로 나누는 것입니다.

앱의 스크린 샷과 사용자 스토리로 작성된 허용 기준 목록입니다.

"테스트 사이트 관리자> 일정> 사용자가 일정을 볼 수 있음"스토리의 예입니다.

이 작업을 마치면 첫 번째 스프린트 계획 회의 (아래에서 자세히 설명)를 다음 목표에 집중할 수 있습니다.

이 기능 세트 내의 모든 것이 최종 사용자를 위해 어떻게 작동해야하는지에 대한 공유 된 이해 구축 첫 스프린트에서 팀이 자신있게 달성할 수 있는 것을 알아냅니다.

이 시점에서 그룹의 모든 사람은 구성 요소를 검토하고 특정 제안 된 동작의 뉘앙스에 대해 개발자와 공동 작업을 했으므로 적어도 기능 세트에 어느 정도 익숙해질 것입니다.

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://www.viget.com/articles/how-to-keep-sprint-planning-efficient/

와이어프레임은 웹 사이트의 뼈대이며 콘텐츠 구조와 흐름을 보여줍니다.

빠른 스케치부터 레이아웃 설계까지 다양한 수준의 와이어 프레임이 있습니다.
디자인을 완성하기 전에 컨텐츠와 구조에 맞춰 조정해야 합니다.

처음 웹 사이트를 만들거나 간단한 랜딩 페이지를 디자인 할 때
디자인 프로그램으로 바로 디자인을 시작하고 싶을 것입니다.

와이어 프레임이 무엇인지, 왜 중요한지 자세히 알아보고,
웹 디자인을 위한 다른 와이어 프레임 예제에서 배우고,
처음으로 와이어프레임을 만드는 경우 자신만의 와이어 프레임을 만드는 방법을 알아 보겠습니다.

.

와이어프레임이란 무엇입니까?
와이어프레임은 웹 디자인 프로젝트의 시작 단계에서 생성됩니다.

영감을 수집하거나 조사한 후 고객과 비즈니스 목표를 일치시키고 그 정보를 와이어프레임으로 변환합니다.
이러한 와이어프레임은 클라이언트에게 전달하는 방법을 나타내는 지도가 됩니다.

.

와이어프레임에 무엇을 포함해야 합니까?
스케치로 시작하는지 아니면 높은 충실도의 와이어 프레임을 작업하는지 여부에 따라 포함된 요소의 상세도가 결정됩니다.

예를 들어, 스케치나 레이아웃 설계 단계에서는
박스를 사용하여 페이지를 분할하고 헤드라인과 본문 사본의 위치를 나타내는 선을 사용합니다.
박스에 음영을 넣거나 X 표시로 그림이나 사진을 나타낼 수 있습니다.

높은 충실도의 모의 실행에서는 Lorem Ipsum 텍스트를 포함시켜서
실제로 타이포그래피의 크기와 위치를 표시할 수 있습니다.

다양한 회색 음영을 사용하여 다양한 유형의 콘텐츠를 표시할 수 있으며
특정 요소를 강조 표시하는데 도움이 되는 색을 하나 추가할 수 있습니다.

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://uxplanet.org/getting-started-with-wireframing-8bf5eedd2d30

20가지 여백 디자인이
웹 사이트의 콘텐츠를 어떻게 형성하고 영감을 주는지 예제를 통해 알아보세요.

물리적 콘텐츠와 가상 콘텐츠로 가득 찬 세상에서 우리는 종종 공간의 중요한 역할을 잊어 버립니다.

일반적으로 내거티브 공간으로 알려진 여백은 웹 사이트의 UI 레이아웃에서 중요합니다.

웹 사이트의 중요한 콘텐츠를 돋보이게 만들기 위해 여백을 조작하는 방법에 대한 20가지 영감을 주는 예시를 살펴봅니다.

또한 nothingness를 최대한 활용하는 방법에 대한 몇 가지 모범 사례를 살펴보도록 하겠습니다.

.

[1] 웹 사이트에서 공백 디자인이 왜 중요할까요?

1. 여백 디자인은

   UI에 더 높은 수준의 정교함과 명성을 제공하는 것 외에도 사용자 기반 이점도 있습니다. 사용자에게 미리 이해할 수 있는 양의 콘텐츠를 제공하여 먼저 표시 할 콘텐츠의 우선 순위를 지정하고 강조할 콘텐츠의 양을 지정하면 도움이 됩니다.

2. 여백 디자인은

   웹 사이트의 가독성과 스캔 가능성을 향상시킵니다. 또한 읽기 이해력을 20% 향상시킵니다.

3. 여백 디자인은

   불필요한 세부 정보를 제거하고 정보를 쉽게 이해할 수있는 덩어리로 나누어 사용자의 눈에 쉽게 콘텐츠를 렌더링합니다. 즉, 사용자에게 부과되는 인지 부하의 양을 줄여 이탈률을 낮춥니다.

.

어떤 방식으로 적용해도 공백 디자인 고려할 가치가 있는 기술입니다.

공간을 비워 두는 것이 쉽지 않다면 웹 디자인의 모든 것과 마찬가지로 연습 없이는 어려울 것입니다. 여백 디자인에서 최고의 위치를 정할 수 있는 몇가지 권장 사항 입니다.

.

[2] 웹 사이트에 여백 디자인 사용 (모범 사례)

1. 여백 디자인을 위한 와이어 프레임 만들기

디자인에서 최적의 여백 공간 사용을 결정하려면 먼저 웹 사이트 디자인을 와이어 프레임으로 연결하는 것을 잊지 마세요.

웹 사이트 와이어 프레임을 사용하면 여백 디자인을 정돈하고 각 요소 주변의 정확한 간격과 패딩의 정확한 양을 결정할 수 있습니다.

웹 사이트 디자인의 신뢰성이 더 높아지기 전에 다른 간격을 시도할 수 있는 매개 변수를 사용하면 웹 사이트 디자인의 신뢰도를 높일 수 있습니다.

.

2. 사용자의 눈을 안내

여백 디자인을 사용하여 사용자의 눈을 안내하세요.

페이지의 콘텐츠를 페이지에서 15개 이하로 구성하면 됩니다. 이제 해당 15개 포인트 에 대한 우선 순위를 정하기 만하면 됩니다.

예를 들어 1번 포인트는 로고, 2번은 내비게이션 바, 3번은 히어로 이미지, 4번은 텍스트 단락 등이 될 수 있습니다.

다음으로 이 콘텐츠를 배치 할 때 매크로 공백이 있을 위치를 결정해야 합니다. 즉, 화면에서 각 콘텐츠 또는 요소 그룹을 배치하는 위치입니다.

매크로 공백은 각 요소 또는 요소 그룹을 둘러싼 공간입니다. 반면, 마이크로 공백은 그룹의 다른 요소를 둘러싸는 공간 또는 텍스트의 단락, 선과 문자 사이의 간격입니다.

.

3. 근접성의 게슈탈트 원리

Gestalt 근접성 원칙은 사용자가 밀접하게 관련된 요소를 유사한 속성을 갖도록 연관시킨다는 것을 유지합니다. 이 원칙을 잘 적용하려면 관련 요소를 긴밀하게 그룹화 해야합니다.

양식 디자인을 예로 들어보겠습니다. 예를 들어 이름과 주소와 같은 개인 정보를 하나의 그룹으로 그룹화하고 약간 더 여백으로 구분한 다음 신용 카드 세부 정보 아래에 다른 필드 그룹으로 이어질 수 있습니다.

.

4. 공백 디자인의 텍스트

단락의 컬럼 너비와 마진이 너무 넓지 않은지 확인합니다. 즉, UI의 양쪽에 충분한 양의 가로 공간을 포함해야 합니다. 이렇게 하면 단락의 가독성이 향상되고 텍스트가 눈에 더 편해집니다. 마진 크기를 줄이려면 단락 당 하나의 아이디어를 포함해보세요.

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://www.justinmind.com/blog/white-space-design/

전세계 디자이너들은 COVID 이후의 삶에 대한 희망을 주기 위해 새롭고 혁신적인 모바일 상호 작용 설계를 제작하기 위한 기술을 사용하고 있습니다.

창의력을 발휘할 수 있는 다섯 가지 흥미로운 디자인을 모았습니다.

.

[1] 렌터카 모바일 앱

Alex는 액체 움직임과 회전하는 이미지를 통해 경험을 한 차원 더 끌어 올렸습니다.

시작 화면에는 차량, 렌트 기간 및 비용이 표시된 카드를 쉽게 볼 수 있는 최소한의 정보가 제공됩니다.

그 아래에는 픽업 장소를 알려주는 지도가 있습니다.

화면 상단에서 아래로 드래그하면 자동차 이미지가 회전하고 상단 토글이 만들어져 자동차 사양과 사용자 프로필 사이를 전환합니다.

이런 액체 움직임이 매우 신선한 영향을 줍니다.

.

[2] 애완동물 입양 앱

이 앱을 통해 고양이를 입양하는 과정을 더욱 쉽게 만들어줍니다.

먼저 사용자가 자신의 위치를 입력합니다. 그런 다음 근처에 고양이가 등장하는 카드가 제공됩니다.

그들은 자신의 지역에있는 고양이를 스와이프하거나 탭하여 특정 고양이 정보에 대해 더 많이 읽거나

또는 계속 아래로 스크롤하여 고양이 액세서리를 구경할 수 있습니다.

고양이를 탭하면 사진, 나이, 체중, 번식, 주인과 대화 할 수있는 기능이 포함 된 전체 화면이 > 표시됩니다.

아직 고양이를 키울 준비가되지 않은 경우에도 이 모바일 상호 작용 디자인은 앞으로 데려올 고양이를 보는 재미있는 방법이 될 수 있습니다.

.

[3] 3D 전환 카드

운동을 추적하는 것은 피트니스 요법을 일관성있게 유지하는 좋은 방법입니다. 이 앱 개념은 체중 목표, 완료해야하는 운동, 운동량과 기간에 대해 매우 세분화합니다.

이 모바일 상호 작용 설계는 모든 필수 건강 정보를 한 곳에 저장하는데 효과적입니다.

디자인 장인 정신에 관해서는 팝업 섹션을 가장 높이 평가하고 있습니다.

예를 들어 오른쪽 상단 모서리에있는 화재 아이콘을 누르면 최근 운동 메뉴가 겹쳐서 스크롤됩니다.

레이어는 이 피트니스 앱에서 콘텐츠, 옵션 및 메트릭의 여러 섹션에 접근하는 새로운 방법입니다.

. . 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://protoio.medium.com/top-5-mobile-interaction-designs-of-april-2021-83c3f5e43581

이 세상은 아이디어로 가득 차 있습니다. 그들 중 일부는 훌륭하고 일부는 그렇지 않습니다. 추구할 가치가 있는 아이디어와 그러한 아이디어의 실행 가능성을 확인하는 것이 이 기사에 대한 내용입니다.

.

[1] 프로토타이핑이란 무엇입니까?

프로토타입은 몇 가지 의미와 함축성이 있는 단어입니다. 하지만, 이 단어의 사용 맥락은 종종 비슷합니다.

전체 디자인 프로세스의 관점에서 볼 때 프로토타이핑은 해결하려는 문제에 대한 솔루션을 검증하기 위한 디자인적 사고의 네 번째 단계입니다.

디자인적 사고는 기본적으로 문제를 식별하고 이에 대한 최상의 솔루션을 찾는 반복적인 프로세스입니다. 디자인 사고는 종종 혁신을위한 프레임워크로 설명되기도 합니다.

.

[2] 왜 프로토타입인가요?

프로토타입은 개념이나 프로세스를 테스트하기 위해 만들어진 것의 초기 버전입니다.

프로토타이핑의 가치는 빠르고, 저렴하며, 코딩이 필요하지 않다는 것입니다. 또한 이러한 방식으로 가정을 검증하고 사용자가 편리하게 사용할 수 있는 솔루션으로 솔루션을 세분화할 수 있습니다. 프로토타이핑은 거의 항상 사용 편의성이 떨어지고 흐름이 혼란스러우며 숙련된 설계자가 매우 싫어합니다.

프로토타이핑의 또 다른 적용 분야는 잠재 고객이나 투자자에게 제시할 수 있는 > 실질적인 결과물을 개발하는 것입니다. 이렇게 하면 초기 제품 설계 및 사용자 > 흐름을 통해 비전을 보다 잘 표현하고 프레젠테이션 자료를 향상시킬 수 있습니다.

.

[3] 프로토타이핑의 종류

프로토타입은 대개 여러 번 반복해서 개선되므로 리소스를 불량 솔루션에 투자하지 않습니다. 만약 여러분의 솔루션이 형편없다는 것을 깨닫는다면, 세련된 디자인보다는 거친 낙서의 단계에서 그것이 일어난다면 더 좋을 것입니다. 그것은 디자인 사고 과정에 널리 퍼져 있는 철학입니다.

.

[4] Low-fidelity 프로토타입

Low-fidelity 프로토타이핑은 높은 수준의 디자인 비전을 유형적이고 테스트 가능한 것으로 전환하는 방법입니다.

그것은 흑백일 가능성이 높고 브랜딩 요소도 없습니다. 많은 입력 필드가 lorem ipsum 같이 더미 텍스트로 채워집니다.

그러나 Low-fidelity 상관없이 모든 프로토타입의 주요 특성은 상호 작용성 입니다.

.

[5] High-fi 프로토타입

대략적인 프로토타입이 정밀 검사와 초기 피드백을 거친다면 이제 더 구체화해야 > 할 때입니다. UI&UX 프로세스 측면에서 볼 때, 낮은 충실도에서 높은 충실도의 > 진화는 다음과 같습니다.

와이어 프레임은 종종 프로토타입의 구성 요소이기 때문에 여러분에게 유용 할 것이라고 생각했습니다.

Low-fidelity 프로토타입과 달리 High-fi는 상세하고 사실적인 인터페이스 요소를 특징으로 합니다.

모든 콘텐츠는 실제 콘텐츠이거나 실행 버전에 표시될 콘텐츠와 유사합니다. 또한, 상호 작용과 애니메이션은 코딩된 앱에 매우 가깝습니다.

.

[6] Figma에서 만든 인터랙티브 프로토타입

이제 프로토타입이 무엇인지, 어떤 종류의 프로토타입이 있는지에 대한 아이디어를 얻었으니, 프로토타입을 만드는 과정을 살펴보겠습니다.

여러 화면을 연결하여 프로토타입을 만들기 전에 분명히 몇 가지 설계가 필요합니다. 이것들은 다듬을 필요가 없습니다.

초기 단계에는 대충 스케치해도 충분합니다. 그러나 설계의 픽셀 하나를 배치하기 전에 먼저 전체 환경을 매핑해야 합니다. 가장 좋은 방법 중 하나는 정보 아키텍처를 고안하는 것입니다.

.
. 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://adamfard.com/blog/prototyping

UX 디자이너가 킥오프 미팅에서 질문해야 할 26가지 질문이 있습니다.
다음 질문을 사용하여 올바른 방향으로 다음 프로젝트를 시작하십시오.

Product Designers 툴킷의 비밀 무기는 질문입니다.

특히 프로젝트의 시작점에서 중요한 부분은
주어진 과제와 현재를 완전히 이해하고 사용성에 대해 고려하는 것이 중요합니다.

사람들은 종종 프로젝트 시작 미팅 중에 질문을 하지 않으려고 합니다.
잘못된 질문이거나 충분한 질문이 되지 않을까 두려워서 그랬다는 것을 알고 있습니다.

팀이 올바른 사람들로 구성되어 있다면 서열에 관계없이 어리석은 질문은 없습니다.

저는 그 질문을 카테고리로 구성했습니다. 어떤 질문이 어떤 순간에 가장 적절한지 판단하시면 됩니다.

.

[1] 목적 및 목표

가장 분명하게 물어봐야 할 질문은 프로젝트의 목적과 목표에 관한 것입니다.

이를 통해 팀은 프로젝트와 사용 가능한 시간을 이해할 수 있지만 설계자로서 함정, 선호하는 결과 및 이전의 시도 또는 관련 연구를 이해하는 것도 중요합니다.

• 목적은 무엇입니까?
• 왜 우리는 그것에 집중하고 있나요?
• 프로젝트 또는 작업의 목적은 무엇입니까?
• 그 결과를 가지고 어떤 결정을 내리려고 하시나요?
• 이 도전이 시도된 적이 있습니까?
• 이 프로젝트가 실패하는 원인은 무엇입니까?
• 우리에게 시간이 얼마나 있어요?

.

[2] 성공을 측정

팀에게 목표를 부여하고 프로젝트가 진행되었는지 여부를 확인하는 것은
팀, 프로세스 및 궁극적으로는 프로젝트의 성공을 이해하는데 중요합니다.

디자이너가 이러한 질문을 하는 것은
그들이 연구와 탐험에 더 잘 집중할 수 있도록 도와줄 것입니다.

예를 들어 A/B 테스트에 대한 목표를 제공하고
솔루션이 진행을 활성화하거나 방해하는지 파악합니다.

• 성공을 어떻게 정의할 건가요?
• 당신에게 이상적인 결과는 무엇입니까?
• 어떤 KPI에 영향을 미치기를 원합니까?
• 우리는 무엇을 성취하고자 하는 것일까요?
• KPI의 현재 평균은 얼마입니까?

.

[3] 고객

디자이너로서 비즈니스 목표와 사용자 간의 균형을 맞추는 것이 우리의 일입니다. 사용자를 옹호하고 공감과 연구를 통해 최고의 제품 경험을 제공합니다.

사용자 및 사용자 문제에 대한 팀의 가정을 파악함으로써 프로젝트를 보다 효과적으로 추진할 수 있습니다.

또한 디자인은 우수한 접근성, 사용성 및 사용자 요구를 통해 사용자에게 더 나은 서비스를 제공할 수 있습니다.

• 사용자/고객은 누구입니까?
• 우리는 어떤 문제를 해결하고 있나요?
• 신규 고객을 찾고 있습니까, 기존 고객을 찾고 있습니까? 혹은 둘 다 입니까?
• 우리는 여러 문화를 고려해야 하나요?

. . 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://uxdesign.cc/26-questions-ux-designers-need-to-ask-during-a-kick-off-meeting-e4095e5febaa

UI/UX 마이크로 팁
UI/UX 디자인을 즉시 개선하는데 도움이 되는 유용한 팁 3가지

효율적이고 액세스 가능하며 아름다운 UI를 만들 때
최소한의 조정만으로 디자인을 개선 할 수 있습니다.

자세히 살펴 보겠습니다.

.

[1] 좀 더 비공식적인 어조로 말하고 싶으면 모두 소문자로 바꿔보세요.

1. 하나는 더 무거운 글꼴 두께와 대문자를 사용하는 텍스트이고
2. 다른 하나는 더 가벼운 글꼴 두께를 사용하고 대문자는 사용하지 않습니다.

글꼴 두께를 두껍게 사용한 대문자는 너무 형식적으로 나타날 수 있습니다.
글꼴 두께를 얇게 선택하고 모두 소문자로 작성해보세요.

이렇게 하면 특정 프로젝트를 수행할 때 보다
비공식적이고 접근하기 쉬운 메시지를 제공 할 수 있습니다.

.

[2] 무게, 크기 및 색상을 사용하여 유형 내 계층을 나타냅니다.

하나는 일치하지 않는 텍스트 스타일이고
다른 하나는 정확한 두께, 색상 및 크기를 가진 텍스트 스타일입니다.

활자로 작업 할 때 요소들을 모두 강조시킬 필요는 없습니다.
하지만, 그들은 균형 잡힌 계층구조를 갖추어야 합니다.

두께, 크기 및 색상을 사용하여 미세하게 조정하기만 하면 됩니다.
이를 통해 사용자는 가장 중요한 요소를 스캔하고 찾을 수 있으므로
프로세스에서 혼란을 방지할 수 있습니다.

.

[3] 어두운 텍스트에 밝은 텍스트는 가독성을 높이기 위해 글꼴을 두껍게 설정합니다.

하나는 밝은 글꼴 두께로 어두운 배경에 흰색 텍스트 블록이 있고
다른 하나는 글꼴 두께가 약간 더 두껍습니다.

밝은 배경에 어두운 텍스트를 설정할 때
때로는 더 얇은 글꼴 두께를 선택할 수 있습니다.
그 반대의 경우는 밝은 텍스트 > 어두운 배경 으로 선택 가능합니다.

특히 긴 형식의 사본의 경우 글꼴 두께를 약간 늘려야 합니다.
최고의 가독성을 목표로 하고 사용자의 눈에 무리가 가지 않도록 합니다.

. . 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://uxdesign.cc/ui-ux-micro-tips-volume-three-d12709017d20

전자 상거래 UI 디자인은

제품 판매라는 하나의 특정 목표를 지향하기 때문에 특정한 문제를 제기합니다. 방문자를 해당 목적지로 유도하는 것은 간단한 랜딩 페이지보다 더 복잡합니다.

고객은 다양한 방식으로 검색 엔진에서 직접 또는 제품 카테고리,
탐색 메뉴, 관련 제품 또는 필터 기능을 통해 제품 페이지에 도착할 수 있습니다.

또한 필요한 단계 (색상, 크기 등)에 맞게
제품을 맞춤 설정하는 것부터 결제하기 (장바구니를 버리지 않은 경우),
결제 정보를 입력하고 확인 페이지에 도달하는 것까지 더 많은 단계가 포함됩니다.

이 게시물에서는 고객이 최상의 경험을 보유하고 판매를 완료할 수 있도록 > E-Commerce UI 설계의 모범 사례와 이를 최대한 활용할 수 있는 방법을 > 살펴봅니다.

.

[1] 사이트 탐색을 최적화 합니다.

탐색 메뉴는 모든 웹 사이트에서 가장 중심적인 디자인 요소 중 하나입니다.
사용자가 사이트를 둘러보기 위해 이 사이트에 의존 할 가능성이 높으며
다양한 방법으로 사용자 정의 할 수 있습니다.

.

[2] 가장 중요한 질문에 대답

사이트 탐색에 대한 방문자의 몇 가지 기본 요구 사항이 있습니다.
방문자가 생각할 가장 중요한 몇 가지 질문을 한눈에 볼수 있도록 대답해줘야 합니다.

• 어떤 브랜드 또는 회사와 교류하고 있습니까?
• 이 가게는 무엇을 파나요?
• 사이트를 어떻게 탐색 할 수 있습니까?
• 현재 어느 페이지에 있습니까?
• 찾고있는 제품을 어떻게 찾습니까?

고객이 잘 알지 못하더라도 고객은 의식적으로 또는 무의식적으로
이러한 질문 중 하나 이상을 대답하려고 할 것입니다.

따라서 첫 번째 단계는 방문자에게 필요한 것이 무엇인지,
사이트 탐색이 이를 해결하는데 어떻게 도움이 되는지 생각하는 것입니다.

.

[3] 탐색 메뉴 계층 구조를 간단하게 유지

사람들에게 온라인 상점의 내비게이션 메뉴를 제공 할 때
가능한 한 빨리 목적지에 도착할 수 있는지 확인하십시오.

너무 많은 하위 메뉴와 하위 메뉴를 피해주세요. 명확한 표지판을 설치하고 가장 중요한 카테고리에 직접 액세스하여
이동 중에 클릭하는 시간과 노력을 줄여주세요.

• 평면 탐색 계층 예 다양한 색상, 이미지, 글꼴 변형 등으로
  판매, 선물 또는 신상품과 같은 특정 메뉴 항목은 고객이 적극적으로 찾는 것이기에 강조해도 좋습니다.

미국 쇼핑객의 92%는 구매하기 전에 상품을 검색하므로
상품을 찾을 수 있는 곳을 알려 주면 많은 도움이 될 것입니다.

웹과 마찬가지로 모바일 메뉴에도 적용됩니다.

. . 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://torquemag.io/2021/05/ecommere-ui-design/

1. ​​아토믹 디자인 및 모듈식 사고

아토믹 디자인의 개념은
디지털 화면을위한 간단한 모듈식 디자인 시스템 입니다.

단일 요소 (원자)를 사용하여 전체 화면(인터랙티브 화면)을 구성합니다.
이 시스템은 화학에서 차용되었습니다.

• 화학에서 원자는

  다른 원자와 결합하여 분자를 형성 한 다음 결합하여
  유기체를 형성하는 가장 작은 단위 입니다.
  각 원자는 그 속성에 의해 형성된 특정 모양을 가지고 있습니다.

• UI에서 단일 원자는

  정사각형 직사각형, 원, 삼각형 또는
  둥근 모서리 직사각형과 같은 고유 한 벡터 모양 요소입니다.

• UI 디자인에서 우리는

  한 번에 하나의 원자를 가져와 버튼, 레이블,
  텍스트 필드 등과 같은 고유 한 속성을 할당합니다.

• 하나의 원자 = 하나의 UI 요소 = 하나의 빌딩 블록

  이것은 하나의 UI 기능을 수행하는 하나의 원자 기호를 보여줍니다.
  특정 기호는 모든 UI 기능에 할당 할 수 있습니다.

• 단일 요소를 사용하여 처음부터 인터페이스를 생성하면

  설계 프로세스 초기에 세부 사항을 검증 할 수 있습니다. 결합 된 요소 또는 원자 구조는 단순하게 유지할 수 있습니다.

• 화학에서 원자는 결합하여 분자를 형성합니다.

  분자를 형성하려면 원자는 더 큰 목적을 위해 단결해야 합니다. 이것은 화면 요소에 대해서도 마찬가지 입니다.
  따라서 요소가 결합되어 명확한 UI 단위 기능을 형성합니다.

• 모듈식 설계 프로세스에서는

  요소가 결합되어 명확한 UI 단위 기능을 형성합니다.

• UI 단위는 세 가지 요소로 명확하게 정의됩니다.

  사용되는 원자 / 원소의 수는 분자 / UI 단위의 기능

• 분자에서 유기체로

  원자 (단일 요소)가 결합하여 분자 (UI 단위)를 형성 한 다음
  유기체 (인터페이스 패턴)로 진화합니다.

• 유기체는

  화면의 특정 부분을 차지하는 단일 요소 / 원자와 UI 단위를 결합하여 형성됩니다.

• UI 단위의 조합은

  사용자의 상호 작용 또는 화면에서의 상호 작용 의도를 공식화 합니다.

  UI 단위는 요소 (원자)로 구성되므로
  유기체는 반복 패턴 또는 고유 한 단일 공식으로 많은 개별 요소를 포함 할 수 있습니다.

• 반복 패턴의 유기체

  하나의 UI 단위의 반복 패턴의 예입니다.
  이 유기체는 9개의 UI 단위로 구성된 반복 패턴으로 구성됩니다.
  사용자는 인터페이스 기능을 쉽게 이해할 수 있습니다 (숫자 터치).

• 패턴에서 템플릿까지

  특정 분자 구조를 가진 유기체가 확립 되었으므로 템플릿 디자인은 다음과 같습니다.

  왼쪽에는 반복되는 패턴으로 유기체에서 결합되는 분자의 원자 구조가 있습니다.
  오른쪽에는 작업이 구현되는 동안 사용자 인터페이스가 표시됩니다.
  반복 패턴은 깔끔하고 구조화 된 템플릿을 허용합니다.

  고유한 구성 유기체가 이 화면 인터페이스의 템플릿을 형성합니다.
  10 자리 숫자 표시와 같은 특정 기준이 충족 될 때까지 사용자 경로 전체에서 일관성을 유지합니다.
  그래서 우리는 UI 단위와 요소를 기반으로 명확한 유기체 구조의 인터랙티브 스크린을 만들었습니다.

. . 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://evaschicker2012.medium.com/atomic-design-and-its-modular-application-in-ux-ui-design-7d9712741e73

마이크로 인터랙션을 사용하여 UI / UX를 개선하는 방법 

간단한 마이크로 인터랙션은 디지털 상호 작용과 활동에서 계속해서 중요한 역할을 합니다.
마이크로 인터랙션이 없다면 앱의 정교한 사용자 경험은 이제 불가능해 보입니다.

마이크로 인터랙션은 앱 개발자와 디지털 전략가에게 날이 갈수록 중요해지고 있습니다.

마이크로 인터랙션의 중요성과
디자인 요소의 체계에서 효과적으로 사용하는 방법을 설명하기 전에
먼저 핵심 개념과 구성 요소를 설명하는 것으로 시작하겠습니다.

.

1. 마이크로 인터랙션의 정의 및 유형

마이크로 인터랙션은 디자인 요소와 사용자 간의 상호 작용을 촉진하는 짧은 시간을 의미합니다.

잘 디자인된 마이크로 인터랙션은
디자인 중심의 혁신과 창의적인 요소를 통해 사용자 경험을 향상시키는 데 도움이 됩니다.

반면에 잘못 디자인된 마이크로 인터랙션은 사용자 경험을 훼손하고 손상시킬 뿐입니다.
마이크로 인터랙션에 대한 또 다른 잘 알려진 정의는 이를 적절한 관점에 둡니다.

이에 따르면 마이크로 인터랙션은 사용자 경험을 개선하는 데 결정적인 역할을 하지만
별도로 알아차리지 못하는 상호 작용 유형입니다.

소셜 플랫폼의 ‘좋아요' 버튼부터 페이지 새로 고침을 위한 일반적인 당김 버튼까지
모두 무의식적인 디자인 요소로 남아 있지만 더 나은 사용자 경험을 제공하는 데 실패하지 않는 것 같습니다.

좋아요, 댓글, 공유 버튼이 없는 Facebook 게시물을 생각해보세요.

우리는 그것이 없을때에 비로소 그들의 가치를 의식하고
마이크로 인터랙션의 중요성을 즉시 깨닫게 됩니다.

.

2. 마이크로 인터랙션에는 아래에 언급된 4가지가 있습니다.

• 트리거 :
  트리거는 마이크로 인터랙션을 시작합니다.
  마이크로 인터랙션 트리거는 시스템 또는 사용자가 시작할 수 있습니다.
  첫 번째의 경우 소프트웨어 앱은 특정 상호 작용과 매개 변수를 기반으로 작업을 시작합니다.
  두 번째의 경우 사용자는 소프트웨어 앱과의 상호 작용으로 이어지는 조치를 취합니다.
• 규칙 :
  리 설정된 기준과 매개 변수를 기준으로 마이크로 인터랙션의 트리거를 결정하는 규칙이 있어야 합니다.
• 피드백 : 마이크로 인터랙션이 발생할 때 특정 피드백을 통해
  사용자에게 어떤 일이 일어나고 있는지 알려주는 것은 시스템의 책임입니다.
• 루프 및 모드 :
  루프 및 모드는 사전 설정된 교호작용의 후유증과 편차를 결정합니다.
  예를 들어 "새로 고침"버튼을 사용하면 페이지가 다시 로드됩니다.

로드에 실패하면 사용자는
'네트워크 오류' 혹은 '느린 연결' 등 대체 메시지를 볼 수 있습니다.

. . 

👇더 자세한 내용은 아래 원문에서 확인해주세요.
https://capturly.medium.com/how-to-use-micro-interactions-to-improve-the-ui-ux-d11a553cb347

제안서를 보내는 방법부터 필수적인 관계 구축 전략에 이르기까지
더 많은 프리랜서 고객을 확보 할 수있는 방법은 많이 있습니다. 보다 일관된 작업을 수행하는데 도움이 되는 8가지 강력한 전략 소개하겠습니다.

1. 자신의 가치를 명확히 하세요.
2. 추천을 요청하세요.
3. 포트폴리오가 최상의 상태인지 확인합니다.
4. 가치있는 콘텐츠를 만듭니다.
5. 상황을 최신 상태로 유지합니다.
6. 네트워크, 네트워크, 네트워크 입니다.
7. 사회적 증거를 사용하세요.
8. 후속 조치의 힘을 과소평가하지 마십시오.

.

1. 자신의 가치를 명확히 하세요.

잠재 고객에 대한 귀하의 가치는 경쟁 업체와 차별화되는 요소입니다. 제공하는 가치를 명확하게 전달할 수 있으면 더 많은 프리랜서 고객을 확보 할 수있는 가능성이 높아집니다.

자신에게 가장 먼저 물어볼 것은 당신의 가치가 실제로 무엇인지 입니다. 다음 질문으로 시작하십시오.

과거 고객이 고객을 위해 한 프로젝트에서 어떤 결과를 얻었습니까? 나에게 독특한 경험이 있습니까? 다른 그래픽 디자이너가 제공하지 않는 것은 무엇입니까? 예를 들어 특정 산업 (예 : 의료, 핀 테크, 라이프 스타일 등)에서 일한 경험이 있는 경우 해당 산업의 고객에게 더 많은 가치를 부여 할 수 있습니다. 고객의 요구를 더 잘 이해할 수 있기 때문입니다.

귀하의 가치가 무엇인지 고려한 다음 가장 명확하게 전달할 수있는 방법을 결정하십시오.

이는 과거 프로젝트의 특정 결과를 포함하여 디자인 포트폴리오에 상을 표시하거나 프레젠테이션 및 제안에서 경험을 활용하는 것입니다.

.

2. 추천을 요청하세요.

행복한 고객이 있으면 추천이나 추천을 요청하십시오. 항상 새로운 고객과 대화 할 수 있다는 점을 알리고 그들의 추천에 감사를 표합니다.

당신이 제공하는 정확한 서비스에 따라
공식 추천 프로그램이나 제휴 프로그램을 설정할 수도 있습니다.

처음에는 고객이 잠재적 경쟁 업체를 추천하고 싶어하지 않는 것처럼 보일 수 있지만 대부분의 기업은 모든 종류의 공급 업체 및 기타 조직과 협력 관계를 맺고 있다는 점을 기억하세요.

경쟁 업체에 귀하의 서비스를 사용하라고 지시하지는 않지만 공급 업체 또는 기타 비즈니스 연락처를 귀하에게 추천 할 수 있습니다.

비즈니스 관계를 개발할 때 좋은 추천을 제공하는 것은 가치가 있습니다. “처음에 일자리를 찾는 것은 어렵지만 일단 찾으면 눈덩이 효과가 발생합니다.

당신의 고객은 놀라운 일을하는 다른 사람들과 친구입니다. 당신이 그들을 올바르게 대하고, 좋은 일을하고, 그들에게 당신을 추천 해달라고 요청한다면 그들은 보통 그렇게 할 것입니다.

.

3. 포트폴리오가 최상의 상태인지 확인합니다.

그래픽 디자인 포트폴리오는 신규 고객 유치에있어 가장 귀중한 자산 중 하나입니다.

최고의 작품을 보여주고 각 프로젝트를 설명하는 시간을 가지십시오. 프로젝트에서 귀하의 역할이 무엇인지, 디자인 문제가 무엇인지, 어떻게 해결했는지 이야기 하십시오.

귀하의 포트폴리오를 광범위하게 공유하십시오. 새 프로젝트를 정기적으로 추가합니다. (하지만 작업하는 모든 프로젝트를 추가 할 필요는 없으며 가장 좋은 예 일 뿐입니다).

포트폴리오에 소비하는 시간은 잠재 고객과의 신뢰 구축에 큰 도움이 됩니다.

. .

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://dribbble.com/stories/2021/04/14/win-more-freelance-graphic-design-clients

프로세스에 접근성 테스트 레이어를 적용하는 방법

접근성 전문가인 Kate Kalcevich와 Mike Gifford는
디지털 제품 라이프사이클의 다양한 단계에서 다양한 도구와
접근 방식을 사용하여 접근성 문제를 조기에 해결하는
"계층화 된 접근성 테스트"를 소개합니다.

.

웹 사이트 또는 앱을 만들 때 액세스 가능성 테스트는
빌드한 내용이 모든 사용자에게 작동하는지 확인하는 데 매우 중요합니다.

여기에는 장애가 있는 사용자 및 일시적이고 상황적인 제한이 있는 사용자도 포함됩니다.

디지털 제품 라이프사이클의 여러 단계에서 다양한 툴과 접근 방식을 사용하여
접근성 테스트를 "계층화"하는 방법을 공유하여 접근성 문제를 조기에 해결할 수 있습니다.

또한 접근성을 테스트하기 위해 레이어드 방식으로 접근하면
사이트의 사용성이 향상되어 고객 기반이 향상되고 고객 서비스 문의가 줄어듭니다.

.

Mike는 개발 초기 기술 각도에서 접근성 테스트를 살펴보고
라이브 사이트에서 규정 준수 여부를 검사하는 반면

Kate는 사용자 경험에 초점을 맞춥니다.
우리 둘 다 제품 개발 수명 주기 동안 여러 유형의 접근성 테스트를 결합하는 것이
전반적인 제품 접근성을 향상시키는 강력한 방법이라는 것을 깨달았습니다.

우리가 배운 몇 가지를 공유하겠습니다.

.

대부분의 조직은 세 가지 주요 방법으로 접근성을 접근합니다.

1. 코드 및/또는 사용자 인터페이스를 확인하는 도구를 실행합니다.
소프트웨어를 사용하여 여러 접근성 문제를 한 번에 자동으로 테스트하기 때문에
이를 "자동 테스트"라고 합니다.

2. 평소와 다른 방식으로 컴퓨터를 사용합니다.
예를 들어 마우스를 사용하지 않거나
브라우저를 200%로 확대/축소하거나
Windows 고대비 모드로 전환하여 사용할 수 있습니다.

흰색, 노란색, 녹색 및 파란색의 고대비 색상이 어떻게 변하는지 보여주는 Microsoft의 이미지 입니다.
고대비 모드에서는 고대비 색상을 사용자 지정할 특정 색 사각형을 선택해야 합니다.

3. 보조 기술과 장애가있는 사용자를 사용하여 사용성 문제를 확인합니다.
사람이 접근성 문제를 평가해야하기 때문에 이를 종종 "수동 테스트" 라고 합니다.

너무 많은 조직들이 사이트를 검증하기 위해
단일 접근성 솔루션에 전적으로 의존하고 있습니다.

어떤 도구나 프로세스도 조직에서 가능한 한
많은 수의 사람들의 요구를 실제로 충족시키고 있다는 확신을 줄 수 없습니다.

. .

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://www.smashingmagazine.com/2021/04/bake-layers-accessibility-testing-process/

Google의 디자인 시스템 문서의 UI 및 UX 권장 사항입니다.

Google은 기술 분야에서 가장 크고 가장 영향력있는 업체 중 하나이므로
그들의 디자인 시스템이 디지털 제품 디자인 방식에 엄청난 영향을 미치는 이유는 당연합니다.

머티리얼 디자인 가이드 라인은
모든 디자이너가 iOS 또는 Android 용으로 디자인하든 관계없이
따라야 할 가치있는 원칙을 설명합니다.

이 글에서는 머티리얼의 가이드 라인을 검토하면서 찾은 주요 내용을 공유하고
그 규칙과 방법을 가장 잘 실행하는 방법에 대해 설명하겠습니다.

머티리얼 가이드 라인에 나와있는 모범 사례를 검토하고
제품에 적용 할 때 모범 사례에 대한 저의 경험과 팁을 공유하겠습니다.

.

[1] 머티리얼 제스처 지침

1. 제스처를 전달하기 위한 기호 및 애니메이션

1-1 다른 조건이 없는 경우 아이콘은 제스처를 수행할 수 있음을 명확하게 나타냅니다.

The Design of Everyday Things에서 인간 중심 디자인의 아버지로 알려진 Don Norman은
일상 디자인에서 어떤 행동이 가능하고 어떻게 해야 하는지 나타내는 모든 것으로 기호를 정의합니다.

디지털 제품을 디자인 할 때 우리는 항상 기호를 명시 적으로 표현할 필요는 없으며
"더 보기 위해 좌회전"과 같은 것들을 말할 필요가 없습니다.

아이콘, 높은 용기 또는 색상과 같은 간단한 요소는
다양한 제스처와 동작을 지시하는 표시자 역할을 할 수 있습니다.

1-2 사용자가 제스처를 제안하기 위해 상호 작용하기 전에 요소에 애니메이션을 적용합니다.

미니멀리스트적 외모를 갖추려면
애니메이션을 사용하여 사용자가 수행할 수 있는 작업을 나타낼 수 있습니다.

빠른 애니메이션을 표시하여 요소와 상호 작용하는 방법을 보여줄 수 있습니다.
이 방법은 계산된 방식으로 사용해야 하지만
적절하게 사용하면 인터페이스를 크게 간소화하고 경험도 개선할 수 있습니다.

.

2. 애니메이션 아이콘

애니메이션은 아이콘이 수행하는 작업을
세련미와 즐거움을 더하는 방식으로 반영합니다.

2-1 전환은 두 가지 시각적 상태간에 애니메이션 아이콘을 연결합니다.
두 아이콘 사이의 전환은 서로 연결되어 있음을 나타냅니다.
아이콘 전환 추가는 두 작업 간의 관계를 나타냅니다.

예제 1) 재생 / 일시 중지 버튼 애니메이션입니다.

재생을 클릭하면 아이콘이 일시 중지 버튼으로 바뀌고 그 반대의 경우도 마찬가지 입니다.
이 변경은 두 작업 간의 관계를 미묘하지만 직관적인 방식으로 나타냅니다.

예제 2) 장바구니에 담기 상호 작용이나 기능이 비활성화되어 있음을 표시하는 것과 같은
더 복잡한 경험에 미묘한 애니메이션을 어떻게 사용할 수 있는지 상상해보십시오.

아이콘 간에 애니메이션을 만드는 데 너무 많은 시간이 소요될 필요도 없습니다.
Adobe XD에서는 자동 애니메이트 및 페이드 아이콘의
불투명도를 안팎으로 사용하여 유사한 효과를 얻을 수 있습니다.

애니메이션 아이콘 전환은 선호하는 강조 수준에 따라 단순하거나 복잡한 모션을 사용할 수 있습니다.
눈에 띄지 않는 아이콘은 단순한 공유 모션을 사용합니다.

2-2 앱의 중요한 부분인 아이콘은 복잡한 모션으로 강조 할 수 있습니다.

요소와 아이콘이 지속적으로 애니메이션되는 경우 사용자를 압도 할 위험이 있습니다.
애니메이션 남용은 강조를 약화시키므로 복잡한 애니메이션을 조금 더 적게 사용해야 합니다.

.

3. 머티리얼 컬러 팔레트 생성기

머터리얼 팔레트 생성기는
입력한 모든 색상에 대한 팔레트를 생성하는 데 사용할 수 있습니다.

색조, 채도 및 밝기는 사용 가능하고
심미적으로 만족스러운 팔레트를 만드는 알고리즘에 의해 조정됩니다.

처음부터 색상 팔레트를 만드는 것은
Material 's Palette Generator (페이지 하단 근처에 위치)와 같은 도구를 사용하는 것보다 지루하고
값을 직접 계산해야하기 때문에 덜 효과적일 수 있습니다.

생성된 색상은 이미 접근성 표준을 충족하므로
WCAG 지침에 따라 팔레트를 확인해야하는 번거로움이 없습니다.

그래도 Stark와 같은 플러그인으로 디자인을 다시 확인해야 합니다.

. .

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://uxdesign.cc/10-key-takeaways-from-googles-material-design-guidelines-3b0867f0465a

2020년에는 지금까지보다 더 많은 사람들이 원격으로 작업하면서
디자이너의 작업 방식을 크게 변화시켰습니다.

2021년에 성공적인 웹 디자이너가 되기 위해 필요한 기술이 많이 있습니다.

웹 디자인 직업을 찾거나 웹 디자인 분야에서 경력을 쌓고 싶으면
필요한 스킬의 체크리스트를 아래에서 찾을 수 있습니다.

1. UI 및 비주얼 디자인
2. 디자인 원칙(원리)
3. 기본 HTML 및 CSS 기술
4. UX 지식
5. 반응 형 디자인
6. 컨텐츠 관리 시스템 (CMS)
7. 디자인 소프트웨어
8. 온라인 마케팅
9. 색상 이론
10. 타이포그래피
11. 프로젝트 관리
12. 시간 관리
13. 창의적 사고
14. 커뮤니케이션 및 협업

.

웹 디자이너는

다양한 웹 사이트와 웹 페이지를 만들고 때로는 코딩 할 책임이 있습니다.
주요 역할은 색상, 타이포그래피, 레이아웃, 그래픽 및 시각적 계층과 같은 요소를 결합하여
웹 사이트의 시각적 모양을 결정하는 일을 합니다.

종종 서로 다른 클라이언트 및 브랜드와 협력해서 만들고
그들이 원하는 메시지를 전달하기 위해 다른 고객들과 브랜드들과 협력할 것입니다.

.

1. UI 및 시각 디자인

웹 디자이너가 2021 년에 성공하기 위해 필요한 가장 기본적인 기술은
강력한 사용자 인터페이스 (UI)와 시각적 디자인 기술입니다.

"좋은"디자인을 만드는 기본 사항을 배우는 것이 중요하지만
연습, 시행 착오, 다른 디자인 분석을 통해 가장 많이 배울 수 있습니다.

.

2. 디자인 원칙

디자인의 원칙은 시각적으로 매력적인 디자인을 만드는 데 중요한 열쇠입니다.
일반적으로 조화, 균형, 반복, 강조, 정렬, 대비, 비율, 움직임 및 부정적인 공간을 포함합니다.

이러한 원칙이 상호 작용하는 방식과 사용자에게 미치는 영향을 이해하는 것은
사용자가 사용하기 좋아하는 디자인을 만드는 데 중요합니다.

또한 디자이너에게 요소를 시작하고 결합하는 방법을 안내하여
디자인 프로세스를 단순화하고 간소화 할 수 있기 때문에 중요합니다.

.

3. 기본 HTML 및 CSS 기술

모든 디자이너가 HTML 및 CSS로 직접 작업하는 것은 아니지만
작동 방식을 잘 이해하는 것이 중요합니다.

HTML과 CSS를 사용하는 방법을 안다면
그들이 할 수있는 것의 한계를 이해하고 실제로 작동하고 존재하도록
적절하게 코딩 할 수있는 웹 디자인을 만들수 있을 것입니다.

.

4. UX 지식

사용자 경험 (UX)은 특별하고 효과적인 웹 사이트를 디자인하는데 있어 가장 중요한 부분 중 하나입니다.
대규모 프로젝트에는 전담 UX 전문가 (디자이너이든 연구원이든)가있을 수 있지만
소규모 프로젝트에서는 웹 디자이너가 UX 디자이너 역할도 할 수 있습니다.

.

5. 반응 형 디자인

전 세계 대다수의 사람들이 이제 모바일 장치에서 인터넷에 액세스하기 때문에
반응형 디자인이 그 어느 때보다 중요합니다.

다양한 화면 크기에 맞게 디자인하는 방법을 이해하는 것이 중요합니다.
별도의 데스크톱 및 모바일 버전의 사이트를 만드는 것이 옵션이지만

반응 형 디자인은 소형 스마트 폰에서 태블릿, 노트북 및 데스크톱 화면에 이르기까지
시장에 나와있는 다양한 화면 크기를보다 쉽게 보완 할 수 있습니다.

.

6. 콘텐츠 관리 시스템 (CMS)

대부분의 최신 웹 사이트는 콘텐츠 관리 시스템 (CMS) 위에 구축됩니다.
WordPress가 가장 인기가 있지만 수백 개의 CMS가 있습니다.

그것들을 모두 사용하는 방법을 배울 필요는 없지만
작동 방식과 기능에 대한 기본 사항을 배우고
가장 인기있는 것을 능숙하게 익히는 것이 좋은 출발점 입니다.

. . 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://dribbble.com/stories/2021/04/06/web-designer-skills

저는 현재 Microsoft에서 Fluent Design System 및 Teams Component Library에서 일하고 있습니다.
이전에 저는 EagleView에서 일했고 그들의 첫 디자인 시스템을 디자인하는 것을 도왔습니다.

저는 항상 글로벌 스타일, 규칙 및 지침을 사용하여
체계적으로 디자인에 접근하는 것을 좋아했습니다.

다음은 디자인 시스템에서의 저의 여정과 경력에 대한 간략한 설명입니다.
디자인 과정에서 내 경험이 유용하게 사용되기를 바랍니다.

.

첫 디자인 시스템을 만들때 이야기 입니다.

그들은 다양한 단계와, 다양한 플랫폼(네이티브 및 웹)에
각각 다른 디지털 제품 20개 이상인 제품을 가지고 있었습니다.

리더십, 디자인 및 엔지니어링 팀은 다음과 같은 문제를 식별하기 위해
디자인 시스템이 필요하다는데 합의했습니다.

디자이너들은 신제품을 위한 일회성 UI를 만드는데 수 많은 시간을 보냈습니다.
엔지니어링 스프린트는 동일한 구성 요소를 반복적으로 개발하여 정체되었습니다.

사용자는 플랫폼(네이티브 및 웹)과 애플리케이션 전반에 걸쳐
응집력이 부족하여 불편하고 혼란스러운 경험을 하게 되었습니다.

상황을 어떻게 보는지에 따라 좀 더 어려운 상황을 만들기 위해
디자인 시스템이 React로 구축되어야 한다는 요구 사항이 하나만 주어졌습니다. 

.

‍1. 모르는 것부터 시작

저는 실전 문제 해결을 통해 가장 잘 배웁니다.
저는 디자인 시스템에 대해 단순히 제가 알지 못하는 많은 것들이 있다는 것을 깨달았습니다.
하지만 어떻게 해결할 수 있을지는 분명하지 않았습니다.

그래서 저는 유튜브에 "디자인 시스템"을 검색하고
흥미로워 보이는 첫 번째 비디오를 클릭했습니다.

저는 열린 마음으로 제 연구에 접근했고
스펀지처럼 최대한 많은 지식을 흡수했습니다.

. ‍ 2. 원칙과 우선 순위를 먼저 정의

디자인 시스템 전문가이자 아토믹 디자인 방법론의 창안자인 브래드 프로스트는

새로운 디자인 시스템을 어떤 아토믹이 팀과 회사에 가장 중요한지를 정의하는 것이
얼마나 중요한지에 대해 말했습니다.
주요 이해 관계자와 몇 가지 원칙과 우선 순위에 합의하는 것이 중요합니다.

.

3. 성공 지표를 정의

디자인 시스템의 성공을 측정하는 방법에는 여러 가지가 있습니다.

EagleView에서는 총체적으로 스프린트 속도를 50% 이상 높이고
디자인, 엔지니어링 및 제품 간의 공유 언어를 구축하여 설계 시간을 최대한 단축하고
협업 생산성을 향상하고자 했습니다.

마지막 두 가지 메트릭은 다소 모호하며 KPI에 대해 보다 세분화하려는 경우
다음 두 가지 문서를 참조하는 것이 좋습니다. ‍

1. 디자인 시스템을 사용하여 35시간을 절약하는 방법 | Marcin Fuja
2. 당신은 버튼이 쉽다고 생각했다. | Nathan Curtis ‍ "Design System을 사용하면
   설계, 개발 및 테스트에 필요한 시간의 50% 이상을 제거할 수 있을 뿐 아니라
   일관성을 보장하고 팀에게 중요한 것, 즉 품질과 혁신에 집중할 수 있는 더 많은 시간을 제공할 수 있습니다.

. . 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://www.designsystemsforfigma.com/blog/how-to-start-on-design-systems

Wish 디자인 시스템 색상 이야기

2021 년 겨울, 저는 Wish에서 제품 디자인 인턴이 될 기회를 가졌습니다.
이것은 Wish 디자인 컬러 시스템의 이야기입니다.

Wish에는 고유하지만 관련 제품에 초점을 맞춘 여러 멋진 팀이 있습니다.
핵심 애플리케이션 팀이 있고, 판매자 애플리케이션인
Wish Local 및 Wish Wholesale 팀도 있습니다.

각 팀에서 자체 색상 팔레트를 사용하고 있음을 발견했습니다.
Figma 파일에는 매우 유사한 수백 개의 연결되지 않은 색상이 있습니다.

일관성 있고 일관된 시스템을 만들기 위해
디자인 시스템의 모든 색상을 통합하려면 어떻게 해야 할까요?

.

1 단계 : 검토

1-1

우리가 가장 먼저 한 일은 모든 색상을 검토하는 것이 었습니다.
우리는 Figma 파일을 살펴보고 우리가 사용하고있는 색상을 가져와 한 곳에 두었습니다.

1-2

또한 여러 화면에서 색상을 사용하는 방법도 살펴 보았습니다.
여기에는 밝은 색상과 어두운 색상의 비율과 색조 수가 포함되었습니다.

.

2 단계 : 설계 원칙

시작하기 전에 디자인 선택을 안내하는 3가지 디자인 원칙을 생각해 냈습니다.
우리가 목표를 달성 할 수 있도록 목표를 이해하는 것이 중요했습니다.

2-1 접근성

접근성에 대한 지침이 있고 이러한 색상의 텍스트에 대한 권장 사항이
WCAG에서 제공하는 최소 4.5 대비를 따르는 지 확인합니다.

2-2 쉬운 채택

채택 과정을 최대한 매끄럽게 만들기 위해
현재 존재하는 것과 거의 일치하지만 약간의 조정이있는 색상을 제안하고자합니다.

2-3 체계적

우리는 모호함을 줄이기 위해
완전히 객관적인 색상을 사용하는 방법에 대한 시스템을 만들고 싶습니다.

.

3 단계 : 유사점 찾기

3-1 여기에서 이러한 색상의 색상 매트릭스를 만들어서

어떻게 다른지 그리고 어떻게 일관된 색상 스케일을 만들 수 있는지 이해했습니다.
또한 올바른 색상을 선택하는데 도움이 되었습니다.

3-2 각 시스템의 색상을 비교하여 일치하는 방식을 찾았습니다.

Wish 소비자의 Dark Orange는 Orange 4와 비슷했고
판매자 시스템의 Dark Orange는 Orange 2와 동일했습니다.

이것은 색상을 너무 다르게 만들지 않고
모든 앱에서 사용할 수있는 일관된 스케일을 만드는 데 도움이 되었습니다.

. . 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://bootcamp.uxdesign.cc/a-wish-design-system-color-story-ef2c38de97e

전환하는 랜딩 페이지의 10가지 요소

랜딩 페이지는 성공적인 마케팅 캠페인의 중심이며
특정 문제에 대한 특정 솔루션을 가진 특정 고객을 대상으로 할 수 있습니다.

사용자가 여러 페이지에 방문하기 때문에 랜딩 페이지가 무엇인지 혼동하기 쉽습니다.
랜딩 페이지는 특정 유형의 고객에게만 제공되는 페이지를 의미합니다.

실제로 개별 사용자별로 고유 한 랜딩 페이지를 만들 수 있다면 멋질 것입니다. 홈페이지가 랜딩 페이지라고 생각할 수 있지만, 그렇지 않습니다.

.

사용자는 직접 검색 또는 백링크를 통해
다양한 방법으로 랜딩 페이지에 도달합니다.

1. 이메일 링크
2. 소셜 미디어
3. PPC(Pay Per Click 클릭당 지불) 광고를 통해 액세스하는 경우가 대부분입니다.

.

다음은 성공적으로 변환된 것으로 입증된 랜딩 페이지의 10가지 요소입니다.

.

1. 단일 클릭 유도

   제품 또는 서비스를 발전시키는 방법을 알고 있어야 합니다. 무료 체험판을 신청하는 건가요? 그들이 당신의 뉴스레터를 구독하고 있나요? 그들은 제품을 사고 있나요? 그들이 당신에게 연락하고 있나요? 당신이 그들이 원하는 것이 무엇이든, 분명히 하세요.

   UX의 Hick-Hyman 법칙에 따르면
   사용자에게 더 많은 선택권을 줄수록 선택의 가능성은 낮아집니다. 반대로 선택의 폭이 줄어들수록 앞으로 나아갈 가능성도 커집니다.

   사용자에게 한 가지 선택권을 부여해주세요.

.

2. 양식을 단순하게 유지합니다.

   랜딩 페이지에 잠재 고객의 정보가 필요한 경우가 많습니다.
   계정을 만들거나 평가판을 만들거나 뉴스레터에 가입하는 것일 수 있습니다.

   잠재 고객이 평가판에 등록하는 경우 반드시 전자 메일 주소를 요청하십시오.
   (휴대폰 번호, 어머니의 이름, 주소, 생일 등 불필요한 요소들은 필요하지 않습니다.)

   목적이 무엇이든 형태를 매우 단순하게 유지하십시오. 이것은 가능한 한 적은 수의 필드를 의미합니다.

   불필요한 요소들을 정말로 원한다면
   사용자가 이미 적응한 상태에서 온 보딩 프로세스의 일부로
   나중에 입력 할 수있는 옵션을 제공하면 됩니다.

   방문 페이지에는 표시하지 않습니다.

.

3. 헤드라인을 장식하세요.

   잠재 고객이 랜딩 페이지에서 가장 먼저 보는 것은 헤드 라인이므로 중요하게 생각하십시오.

   보통 6개의 단어만 있으면 충분합니다.
   당신의 목표는 잠재 고객이 헤드 라인을 읽도록 충분히 짧게 유지하는 것입니다.

   더 많은 정보를 사용하여 설명을 명확히해야하는 경우가 많습니다.
   먼저 그들의 주의를 끌어서 관심을 사로 잡은 후 부제목으로 설명해주세요.

   헤드 라인의 목표는 2 ~ 3 초 내에 제품 또는 서비스를 설명하는 것입니다.

.

4. 가치 제안을 중심으로 컨텐츠를 집중시키십시오.

   귀사의 제품 또는 서비스가 돋보이는 이유는 무엇입니까?
   경쟁사보다 더 나은 점은 무엇일까요?
   확실하지 않다면 해당 분야의 회사를 점검해주세요.

   잠재적 고객의 입장에서 생각해야 하기 때문에 가치 제안을 만드는 것은
   비즈니스가 직면 한 가장 어려운 과제 중 하나 일 수 있습니다.

   하지만 당신이 이것을 제대로 이해한다면 그것은 당신의 마케팅을 책임질 것입니다. 기능이 아닌 제품 또는 서비스 내에서 이점을 찾아야합니다.

   가치 제안은 사실에 근거해 뒷받침될 때 가장 좋습니다.

. . 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://www.webdesignerdepot.com/2021/04/10-elements-of-landing-pages-that-convert/

UX 설계자를 위한 정보 아키텍처 기본 문서화 및 더 나은 설계에 대한 가이드

디자인 팀이 제품 전체 아키텍처를 생각하지 않으면
많은 프로젝트가, 제대로 진행되지 않고, 이해 관계자의 승인을 받지 못하며,
사용자도 제품을 이해하지 못합니다.

이것은 여러분이 무언가를 만들기 시작하기 전에
수개월을 IA 문서작성에 소비해야 한다는 것이 아니라

1. 그것이 어떻게 작용할지
2. 콘텐츠가 어떻게 연결될 것인지
3. 모든 것이 어디에 적합한지에 대한
   기본적인 생각을 갖는 것 입니다.

.

정보 아키텍처의 정의는

1. 연구, 이해 및 문서화를 위해 수행하는 모든 것
2. 제품 컨텐츠가 서로 연결되는 방식
3. 사용자가 탐색하는 방법 입니다.

대규모 웹사이트나 특히 정부 프로젝트에서 문제를 자주 접하게 되는데
많은 전문가가 필요할 만큼 큰 문제가 발생합니다.
하지만 전문가를 고용할 수 있는 프로젝트가 진행되기를 기다릴 필요는 없습니다.

IA 전문가가 아니더라도 UX Designer가
작성할 수 있는 다양한 IA 문서가 있습니다.

IA 문서작성은 문제 공간을 파악한 후
화면 설계를 시작하기 전에 IA를 문서화해야 합니다.

사용자 중심 설계 프로세스의 예는

1. "정의" 단계에서 IA를 찾는 화살표가 있습니다.
2. "이해" 단계에서 요구사항을 수집하는데 도움되는 자료로 사용했지만

모든 IA 문서의 최종 버전은 화면이 생성되기 전에 IA 문서의 최종 버전에 동의해야 합니다.

그 이유를 알아보려면 계속 읽어보십시오.

. . 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://blog.prototypr.io/information-architecture-for-ux-designers-da38008234fd

1. 포괄적인 웹 사이트 경험을 만들기위한 7가지 팁

디지털 환경을 위한 설계에서 접근성은 점점 중요해지고 있습니다.
웹 사이트가 접근성 기준에 맞지 않으면 기업이 소송을 제기할 수 있다는 사실을 알고 계셨습니까.

만약 디자인을 처음 접했다면, 여러분이 상상할 수 있는 어떤 곳에서든
웹사이트를 디자인하고 만들 수 있다고 생각할지도 모릅니다.

기술적으로는 그렇습니다만, 사용자 경험처럼 고려해야 할 중요한 요소가 있습니다.
가장 중요한 것은 접근성을 염두에 두고 설계하는것 입니다.

접근성을 위한 디자인이란 정확히 무엇을 의미할까요?
이 문서에서는 웹 접근성이 무엇인지와
ADA 준수 규칙을 따르고 있는지 확인하는데 도움이 되는 몇 가지 유용한 도구와
처음부터 접근성을 염두에두고 디자인하는 방법에 대해 자세히 알아보겠습니다.

.

2. 웹 접근성이란 무엇입니까?

웹 접근성이란(Web accessibility) 시각, 운동, 청각, 언어 또는 인지 장애가있는 개인을 포함하여
다양한 사람들이 사용할 수있는 웹 사이트, 도구 및 기술을 설계하고 개발하는 것을 말합니다.

특히, 이는 사람들이 장애와 상관없이 웹 사이트를 이해하고 탐색하고
상호 작용할 수있는 방식으로 웹 사이트를 설계하는 것을 의미합니다.

웹 사이트가 올바르게 설계되고 개발되면
모든 사용자는 동일한 동일한 정보 및 기능에 액세스할 수 있습니다.

웹 사이트를 액세스 가능하게 만드는 것은
모든 장애를 고려하고 있다는 것을 의미합니다.

웹 접근성은 장애가 없는 사람들에게도 도움이 됩니다.

예를 들어

• 화면이 작은 스마트 폰을 사용하는 사람들
• 노화로 인해 시력이 떨어지기 시작하는 노인
• 팔이 부러진 것과 같은 일시적인 장애가있는 사람들
• 느린 인터넷 연결을 사용하거나 대역폭에 대한 액세스가 제한된 사람들입니다.

우리가 더 나은 접근성을 위해 웹 사이트를 디자인하면
전 세계 모든 사람이 우리 사이트에서 공유하는 정보에 더 쉽게 접근 할 수 있습니다.

3. ADA 란 무엇입니까?

ADA는 미국 장애인 법 (Americans with Disabilities Act)을 의미합니다.
웹 접근성과 관련하여 ADA의 가장 관련성이 높은 섹션은 Title II 및 Title III입니다.

• Title II는
  주 및 지방 정부와 정부 기관이 자격을 갖춘 장애인에게 프로그램, 서비스 또는
  활동에 대한 동등한 접근 권한을 제공하기 위해 연방 기금을 받도록 요구하고 있습니다.

• Title III는
  “음식점, 호텔, 영화관, 박물관, 병원과 같은 공공 편의 시설의 장애 기반 차별”을 금지합니다.

ADA가 웹 접근성을 명확하게 다루지는 않지만
웹 사이트와 앱은 종종 비즈니스의 일부로 간주되기 때문에
비즈니스 웹 사이트가 접근성을 통과하지 못하면 소송이 발생할 수 있습니다.

4. 웹 사이트를 어떻게 접근 가능하게 만드나요?

ADA 웹 사이트 준수는 기본적으로 웹 사이트가 WCAG 2.1 AA 표준을 준수하는지 확인하는 것입니다.

• ADA는 귀하가 장애인을 차별하지 않도록 법적 측면을 다룹니다.

• WCAG는 웹 콘텐츠 접근성 지침을 나타냅니다.
  지침은 WAI (Web Accessibility Initiative)에 따라 W3C (World Wide Web Consortium)에서 게시합니다.

간단히 말해서 W3C는 웹을 보다 균일하게 하고 더 잘 실행하기위한 표준을 작성합니다.
우리 모두가 동일한 접근성 지침을 사용한다면, 모든 사람이 인터넷을 더 쉽게 사용할 수 있습니다.

WCAG에는 다양한 버전 (1.0, 2.0, 2.1)과 적합성 수준 (A, AA, AAA)이 있습니다. 

다음은 각 규정 준수 수준에 필요한 사항입니다.

. . 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://uxplanet.org/designing-with-accessibility-in-mind-f25a3f70b8c0

UX 디자인에서 정량적 연구를 한다는건
수치와 통계에 익숙하지 않다면 심오한 내용처럼 보일 수 있습니다.

여러분의 디자인이 더 나아지기 위해서는 어떻게 그것들을 사용할 수 있고,
사용자를 볼 수 있는지 가장 좋은 점을 생각해 보세요.

지난 12개월 동안 숫자와 그래프는 우리 삶의 큰 부분이 되었습니다.

여러분의 지역에는 얼마나 많은 코로나19 환자가 있습니까? 백신의 효능은 무엇입니까?
우리가 "정상"으로 돌아가기 전에 예방접종을 해야 하는 인구는 몇 퍼센트가 있습니까?

역학자와 의료 산업의 다른 연구원들은 오랫동안 질병의 확산, 발생 가능한 원인 및
위험 요인을 식별하기 위해 인구로부터 수집된 데이터를 사용해 왔으며,
의료 발전을 위한 대체 치료 과정을 테스트했습니다.

본문 상단의 이미지는 통계 및 데이터 시각화의 초기 사용법 중 하나를 나타냅니다.

플로렌스 나이팅게일은 병사들의 사망률을 줄이는데 도움이 되는
'병원의 더 나은 위생 상태'를 주장하기 위해 Rose Diagram이라 불리는 그림을 그렸습니다.

UX 디자이너도 데이터를 활용하여
사용자 행동을 연구하고, 패턴을 식별하며, 문제를 진단하고,
대체 솔루션을 테스트하여 최종 사용자의 경험을 개선할 수 있습니다.

디지털 애플리케이션으로 시간을 보내는 시간이 늘어남에 따라
우리 생활의 거의 모든 측면을 윤리적으로, 즉 허가를 받아 추적 할 수 있게 되었습니다.

설정을 활성화했거나 특정 애플리케이션을 휴대폰에 설치한 경우, 사용자가 생성할 수 있는
데이터 양, 즉 몇 단계를 수행한 시간, 화면을 살펴본 시간 및 사용한 앱 등
하루 중 대부분을 사용한 애플리케이션 등을 이미 알고 있습니다.

데이터는 어디에나 있습니다. 데이터 작업을 막 시작한 경우
Google Analytics를 처음 열면 복잡해 보일 수 있습니다.

인앱 분석은 하나의 데이터 소스일 뿐입니다.
디자인 프로세스에 도움이 되는 다양한 정량적 연구 방법을 마음대로 사용할 수 있습니다.

정량적 연구란 무엇이며, 어떻게 하면 더 나은 디자인에 도움이 될 수 있을까요?

정량적 연구는 연구자들이 사람들의 태도와 행동에 대한 이론을
수치와 통계적 증거를 기반으로 사람들의 태도와 행동에 대한
이론을 탐색하고 테스트하는데 사용하는 방법론 입니다.

인터뷰와 같은 UX 연구 방법을 사용하면 5-10명의 참가자와 각각 몇 분씩 대화를 나눈 다음
데이터를 분석하는데 더 많은 시간을 할애할 수 있습니다.

정량적 조사를 통해 최대 30명의 참가자로 시작하여
수백 명 또는 수천 명의 참가자의 표본 크기로 작업할 수 있습니다.
이렇게 큰 표본 크기는 편향 가능성을 줄이는 데 도움이 됩니다.

정량적 연구는 대개 온라인에서 이루어지기 때문에
실행, 복제, 데이터 수집 및 분석을 하는 것이 오프라인보다 더 빠릅니다.

설문 조사, 트리 테스트, 첫 클릭 테스트 및 A/B 테스트는
설계 프로세스에 정보를 제공하기 위해
구체적인 수치적 통찰력을 얻을 수 있는 정량적 연구 기술 중 일부입니다.

다음과 같은 작업을 수행하여 사용자 행동을 분석하여 개선의 기회를 식별합니다.

예제)

1.

대부분의 사용자가 로그인 직후
다른 화면으로 이동하는 것으로 분석될 경우 이를 시작점으로 사용하여 더 나은 랜딩 페이지를 설계하여
사용자가 작업을 더 효율적으로 완료할 수 있습니다.
설계 결정에 대한 신뢰도가 높아지도록 가정을 검증(또는 무효화)합니다.

2.

관련 기능을 탐색할 수 없기 때문에
앱에서 작업을 완료하는 데 어려움을 겪는다고 가정해 보겠습니다. 트리 테스트를 수행하여 가정을 검증하고
새 탐색 구조가 사용자에게 더 쉬운지 여부를 결정할 수 있습니다. 질적 연구 결과를 지원하여 비즈니스 이해 관계자가 설계 결정에 투자하도록 설득합니다.

3.

사용적합성 연구를 수행한 결과,
어떤 가격 계획이 자신에게 가장 적합한지 결정하기 위해
사람들이 고군분투하고 있다는 사실을 상상해 보십시오. 데이터를 사용하여
다양한 가격 모델 및 레이아웃을 테스트하고 결과를 지원할 수 있습니다.
가격 페이지의 도움말 아이콘을 통해
고객 지원에 보낸 전자 메일의 수 또는 가격 페이지에 도착한 후
조치를 취하지 않는 사람의 수를 확인하여 의견을 뒷받침할 수 있습니다.

4.

사용자가 새 기능을 사용하는지 여부 또는 새 기능으로 인해
다른 기능을 사용하는 방법이 변경되었는지 혹은
어떻게 변경되었는지를 분석할 수 있습니다.

. . 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://uxplanet.org/how-to-make-the-most-of-quantitative-research-in-ux-design-5a116f4261

시각적 디자인에서 데이터 분석 및 사용자 연구에 이르기까지
디자인 기술의 범위가 점점 증가하고 있습니다.
그리고 디자인 포트폴리오와 포트폴리오 사례 연구도 증가하고 있습니다.

동일한 사례 연구가 있는 포트폴리오 수천 개가 만들어지면서
더 많은 디자이너에게 눈에 덜 띄는 방법을 가르치기 위해 부트캠프가 등장합니다.

부트캠프는 여러분의 기술로 개성을 나타나게 하는 것이 불가능하기 때문에
포트폴리오를 작업하는 분들에게는 좋은 방법이 아닙니다.
고용주 또한 동일한 포트폴리오를 구별하는 것이 어렵기 때문에 좋지 않습니다.

후보자가 특정 기술을 보유하고 있는지 여부에 대한 답변에
도움이 되지 않는 포트폴리오를 만들고 검토하는 데 몇 시간이 낭비됩니다.

.

우리는 왜 이런 포트폴리오들이 존재하는지 잊어버리고
완성만을 최종 목표로 여기기 시작합니다.

고용관리자들은 그들이 그것을 요구해야 한다고 생각하고
후보자들은 그것을 보여줘야 한다고 믿습니다.

이러한 악순환에서 벗어나기 위해서는
현재의 일반적인 사례 연구 내용을 살펴보고

프로젝트에 참여한 기술과 전문 지식을
더 잘 제시할 수 있는 방법을 마련해야 합니다.

다음은 일반적인 사례 연구와 여러분이 누구인지와
여러분의 독특한 기술을 보여주는 방법을 보여줍니다.

.

[1] 저의 과정입니다.

1-1 무엇을 보여주어야 하나요?
여러분은 책을 많이 읽고 디자인 과정이 종이 위에서
"어떻게" 보여야 하는지 알고 있을 것입니다.
1-2 고유한 맥락에서 작업을 어떻게 계획했습니까?
사용자에 대해 배우고, 사용자의 요구와 미션을 수행하는 과정에서
다양한 장애물을 어떻게 극복했는지 들려주세요.
1-3 어떻게 하면 더 나아질까요?
모두 생략하거나 자신의 이야기를 해주세요.

.

[2] 창문에 포스트잇이 붙여있다면

2-1 그건 무엇을 보여주는 것일까요?
특정 솔루션에 뛰어들기 전에 광범위한 아이디어를 파악하고 고려할 수 있습니다.
프로세스에 팀 및 이해 관계자를 참여시킬 수 있는 능력입니다.
2-2 어떻게 하면 더 나아질까요?
위 사항에 대해 이야기를 해주세요.

.

[3] 페르소나

3-1 대부분의 경우
두세명의 사용자와 대화한 후 일반화할 수 있으며
성별과 같은 제품 특성과는 무관하게 합성할 수 있습니다.
3-2 이게 뭘 보여줄까요?
사용자를 배려하고 사용자, 수행해야 할 작업 및 요구 사항에 대해 배웠습니다.
팀에서도 사용자를 배려하도록 만들 수 있었습니다.
그리고 위의 모든 것이 제품 결정에 어떻게 영향을 미쳤는지 어떻게 알수 있을까요.
3-3 어떻게 하면 더 나아질까요?
사용자를 이해하는 과정은 페르소나를 만드는 것으로 제한될 필요가 없으며
수행해야 할 작업에 대한 이해나 행동 원형을 만드는 것과 같은 많은 다른 접근 방식들이 있습니다.
만약 당신이 당신의 업무와 성별, 관계 상태 그리고 나이와 같은 속성들을
당신의 제품과 당신의 사용자의 행동을 예측할 수 있다면 좋습니다. 그렇지 않은 경우엔
사용한 방법, 배운 내용 및 설계에 어떤 영향을 미쳤는지 보여줍니다.

. . 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://bootcamp.uxdesign.cc/how-to-make-your-portfolio-stand-out-5a044bc4c091

모든 엔터프라이즈 앱의 중심에는 테이블이 있습니다.
사람들이 Excel, Google Sheets에서 만드는 모든 "대시 보드"를 생각해보십시오.
하나의 큰 테이블입니다. 테이블은 모든 제품 또는 플랫폼에서 매우 중요한 부분입니다.
그러나 모든 테이블이 동일하게 생성되는 것은 아닙니다.

1. 좋은 테이블(표)를 사용하면 정보를 쉽게 정렬하고 요약 할 수 있습니다.

1-1 가장 중요한 작업은
쉽게 액세스 할 수 있지만 화면을 복잡하게 만들지 않는 작업입니다.
데이터를 정말 쉽게 조작 할 수 있기 때문에, 사용자는 복잡한 작업을 수행 할 수 있습니다.

1-2 잘못된 테이블은
가능한 모든 데이터와 작업을 미리 보여 주려고합니다.
열과 행을 해석하려면 집중해야하고 사용자에게 제공되는 엄청난 양으로 인해 테이블의 정보가 함께 흐려지기 시작합니다.
아무도 나쁜 테이블을 설계하려고하지 않았습니다만 제작 과정에서 너무 많은 절충안이 만들어졌고, 상호 작용이 간과되었습니다.

2. 먼저, 잠재적인 '문제'를 식별하는 방법은

2-1 제품 소유자 또는 주요 이해 관계자와 함께 자리를 잡고
2-2 테이블 사용과 관련된 요구 사항과 컨텍스트를 파악하는 것입니다.

3. 작업중인 테이블에 대해 답변 할 수있는 몇 가지 주요 질문은 다음과 같습니다.

3-1 우리는 어떤 유형의 데이터를 다루고 있습니까?
정보가 날짜 및 금액과 같은 짧은 숫자 문자열과 텍스트, 링크 및 파일의 단락과 같은
보다 복잡한 데이터 인 경우 선택하는 상호 작용 및 디자인은 다양합니다.

3-2 이 테이블로해야 할 일은 무엇입니까?
예를 들어, 사용자가 중요한 정보를 빠르게 스캔 할 수 있는지 또는
값을 비교하는지 여부를 아는 것도 디자인 결정에 영향을줍니다.

3-3 이 테이블은 정보제공용입니까 아니면 실행 가능한가요?
예를 들어, 데이터 해석이 우선이라면 '보기 옵션'이 매우 강조됩니다.
반면에 행동을 취하는 것이 우선이라면
실행 가능한 필드를 정렬하고 상호 작용을 강조하는 것이 강조됩니다.

3-4 테이블을 보는 모든 이해 관계자는 누구입니까?
사람마다보기 요구 사항이 다르며 정보의 우선 순위를 다르게 지정할 수도 있습니다.
결국에는 어떤 디자인, 스타일 및 상호 작용을 선택해야하는지 결정하고
훨씬 쉽게 디자인 결정을 내릴 수있는 허용 기준이 있습니다.

4. 다섯가지 모범 사례

저는 디자이너로 일하면서 많은 테이블을 디자인했으며
저와 제가 함께 작업하는 개발자에게
놀라운 결과를 제공하는데 도움이되는 몇 가지 검증 된 원칙이 있습니다.

4-1 좋은 디자인은 단순한 UI가 아니라 사용자 편의에 관한 것입니다.
본질적으로 많은 두뇌 능력이 필요한 기능을 다룰 때 다음 모범 사례가 실제로 도움이 될 수 있습니다.

4-2 인터페이스 자체만큼이나 테이블에서 일어나는 일에주의를 기울이십시오
표의 텍스트 및 숫자 정렬 문제를 해결함으로써 얻을 수있는 빠른 성과에 놀랄 것입니다.
사람들이 텍스트 값과 숫자 값을 스캔하는 방법을 이해하면
테이블에 들어가는 내용이 훌륭한 디자인과 구현을 방해하지 않는지 확인할 수 있습니다.

4-3 텍스트 정렬은 표에서 까다로울 수 있지만 매우 가능합니다.
예를 들어 경험상 텍스트는 왼쪽으로 정렬해야하고
(왼쪽에서 오른쪽으로 이동하는 언어를 읽는 사람들에게 가장 편안함)
양적 숫자 값은 오른쪽으로 정렬해야합니다.
(날짜 등은 왼쪽 정렬 할 수 있습니다.  표의 첫 번째 열)

. . 

👇 더 자세한 내용은 아래 원문에서 확인해주세요.
https://bootcamp.uxdesign.cc/making-tables-work-how-good-ux-helps-users-make-complex-decisions-f8694600d571