🔖 2021년 11월 1주 TOP3

🔖 2021년 11월 1주 TOP3

디자인 씽킹 과정의 단계

디자인 씽킹이란 UX 팀에서 사용자의 문제를 식별하고 디지털 프로덕트로 해결하는 기본 프로세스입니다.  디자인 씽킹은 협업과 인간 중심의 디자인을 장려하고 있습니다.
디자인 씽킹 프로세스의 5단계는 다음과 같습니다.

물론 이를 꼭 순차적으로 따라야 한다는 규칙은 없습니다. UX 팀은 종종 아이디어를 공유하면서 정의 단계에서부터 프로토타입을 만들고 테스트합니다.  또는 사용성 테스트 중에 참가자의 공감을 얻기도 합니다.

디자인 씽킹은 UX 팀이 지속적으로 5단계를 거쳐 디자인을 테스트하고 수정하는 반복적인 프로세스입니다.
디자인 씽킹 5단계의 목적은 UX 팀이 추측과 가정에 기반한 디자인을 하지 않고 사용자 중심의 사고방식을 갖도록 하여 사용자 연구를 기반으로 하는 도구와 기능을 활용해서 프로덕트를 구축하도록 하는 것에 목적을 두고 있습니다.

UX 디자이너는 단순한 와이어프레임에서 복잡한 고품질 프로토타입에 이르기까지 디자인 프로세스의 모든 단계에서 UXPin을 사용합니다. 디자이너들은 UXPin의 댓글 기능을 사용하여 협업하고 아이디어를 개발하며 사용자의 문제를 해결합니다.  14일 무료 평가판에 등록해서 사용자가 좋아할 프로덕트를 만들어보세요!

인간 중심 디자인이란 무엇인가요?
디자인 사고의 5단계는 디자이너가 프로덕트와 서비스를 만드는 사람들에 초점을 맞추는 것입니다. 이를 인간 중심 디자인이라고도 말합니다.

인간 중심 디자인은 일부 디자이너들이 단절을 만든다고 주장하는 사용자 중심 디자인이라는 용어를 대체하고 있습니다.  디자이너들은 사용자의 관점에 더 집중함으로써 데이터와 분석에서 감을 잃는 경향이 있으며, 인간의 문제를 해결하려고 하는 사실을 망각하고 있습니다.

만약 인간 중심의 접근 방식이 없다면 UX 팀은 디자인 기능을 잃어버리거나, 불필요하거나 사용가치가 없는 프로덕트들을 만들게 될 것입니다. 디자인 사고가 필수적인 이유가 이런 것 때문입니다. 디자인 사고는 사용자를 더 잘 이해할 수 있습니다.

혁신적인 해결책은 혁신적인 기술을 디자인하는 데서 나오는 것이 아니라 어려운 인간의 문제에 대한 가능한 해결책을 찾는 데서 나옵니다.. 

..

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

UI 디자인의 7가지 기본 버튼 유형

모든 디자이너는 잘 짜여진 웹사이트나 앱의 필수 요소를 알고 있어야 합니다! 눈에 띄는 제목, 양질의 콘텐츠, 관련 정보로 가득 찬 그래픽, 매력적인 모습이 바로 그것입니다.

그렇습니다. 이것이 효과적인 웹 페이지와 사용자와의 성공적인 커뮤니케이션을 위해 필요한 것입니다. 그러나 의사 소통과 상호 작용의 가장 큰 부분은 페이지의 가장 작은 부분인 다양한 용도의 버튼이라는 것을 알고 계셨습니까?

UI 디자인의 여기, 저기, 어디에나 있습니다. 그리고, 이유가 있습니다! 버튼은 일반적으로 콜투액션(CTA, call-to-action)으로 가장 눈길을 끄는 요소이기 때문입니다!‍

이러한 작은 요소는 링크와 유사한 목적을 가지고 있습니다. 즉, 사용자를 어딘가로 데려가거나, 일부 작업을 시작 또는 완료하거나, 결정을 내리도록 하는 것입니다. 두말할 필요도 없이, 이것은 웹에서 가장 중요한 것입니다. 왜냐하면 당신은 사이트에 소중한 콘텐츠를 추가할 때 당신이 제공한 정보로 누군가가 무언가를 해주기를 원하기 때문입니다.

당신은 사용자가 구매를 하거나, 소유자에게 연락을 시도하거나, 관련성이 있고 유용한 것을 찾기를 원합니다. 그리고 사용자를 그러한 행동으로 이끄는 요소는 바로 버튼입니다. 다양한 종류의 버튼이 있습니다. 

그만큼 중요한 역할을 하기 때문에 우리 Broworks(크리에이티브 스튜디오)의 닌자들은 얼마나 많은 종류의 버튼이 존재하는지, 그리고 사람들이 어떻게 사용하는지에 대해 약간의 리서치를 했습니다.

우리는 디자인에서 단순한 모양의 힘이 어디에 있는지 알고 싶었고, 여러분도 그러기를 바랍니다. 다음은 UI 디자인의 7가지 기본 버튼 유형 목록입니다.

출동할 준비가 되었습니까?

1. 플로팅 액션 버튼(Floating action buttons)

플로팅 액션 버튼(FAB, Floating action buttons)은 어떻게 든 기본 정보의 전달자입니다.  이 FAB(Floating action buttons) 버튼은 페이지의 전체 콘텐츠 위에 배치됩니다. 그들은 기본적으로 콘텐츠 위에 떠 있고 방문자의 관심을 끕니다. 

여러분은 그들을 놓칠 수 없습니다! 그것은 매력적인 디자인을 가지고 있고 페이지의 모든 레이어 위에 나타나기 때문입니다. 때때로 그들은 심지어 당신을 따라다니기도 합니다! 

그렇다면, 이런 지속적인 작은 디자인 요소를 사용하는 방법은 무엇일까요? 사용자가 가장 눈에 잘 띄기 때문에 사용자에게 가장 중요한 정보를 전달해야 함은 자명합니다!

따라서 FAB(Floating action buttons)버튼은 웹사이트 또는 앱과 가장 관련성이 높은 작업을 트리거(trigger)해야 합니다. 즉, FAB(Floating action buttons)는 인터페이스에서 가장 기대되는 동작을 나타내는 데 사용됩니다. 사이트 또는 앱의 목적이 무엇인지에 따라 어디로 연결되어야 합니까? 

그리고, 예를 들어 FAB(Floating action buttons)는 다음을 나타내는 버튼이 될 수 있습니다.

일부 기본 작업을 호출하지만 텍스트를 포함하는 경우는 거의 없습니다. 이러한 중요한 버튼은 일반적으로 단순한 디자인의 아이콘이 있는 원형 모양으로 제공됩니다.

2. 채워진 버튼(Filed buttons)

가장 효과적인 콜투액션(CTA, call-to-action) 버튼입니다. 그러나 모든 버튼이 원하는 작업을 트리거(trigger)해야 합니까? 물론입니다. 채워진 버튼(Filled buttons)은 콘텐츠에서 쉽게 확인할 수 있는 과감한 디자인으로 눈에 띕니다. 

사용자가 최대한 빨리 알아차리고 클릭해야 하기 때문에 색상으로 채워져서 강조 표시가됩니다. 이 버튼의 채워진 디자인은 핵심 CTA(call-to-action)버튼이 되며, 이것이 사용자가 주로 버튼과 상호 작용하는 이유입니다. 그래서, 그것은 모두 강조에 관한 것입니다.

주의해야 할 점은 채워진 버튼(Filled buttons)이 시선을 끌고 계속 유지한다는 것입니다. 따라서 그들은 어떤 중요한 행동을 촉구하는 데 사용해야 합니다! 

그들은 대부분 직사각형 모양을 가지고 있으며 디자인에 다이렉트 메시지가 포함된 텍스트가 포함되어 있기 때문에 FAB(Floating action buttons)와 다릅니다. 목적 면에서 채워진 버튼(Filled buttons)이 항상 일반적이거나 예상되는 작업을 호출하는 것은 아닙니다.

어쨌든 이러한 핵심 CTA(call-to-action)뒤에는 웹사이트나 애플리케이션에 항상 중요한 것이 있습니다!

3. 고스트 버튼(Ghost buttons)

고스트 버튼(Ghost buttons)은 벌거벗음 또는 비어 있음이라고도 합니다. 수줍은 표정과 섬세한 색상을 가진 텍스트 또는 아이콘이 있는 윤곽선 버튼처럼 보이기 때문입니다.

이제 그들이 어떻게 생겼는지 말씀드렸으니, 누가 이러한 흐릿한 디자인 요소를 필요로하는지 궁금하실 겁니다. 우리를 믿으세요. 매우 유용합니다! 

고스트 버튼(Ghost buttons)은 몇 가지 보조 정보를 제공합니다. 이미 말했듯이, 채워진 버튼(Filled buttons)은 주요 작업을 호출하는 데 사용됩니다. 고스트 버튼(Ghost buttons)은 종종 그들과 함께 가서 부수적인 행동을 요구합니다. 겉으로 드러내고 싶지 않지만, 어느 정도 강조하고 싶은 것입니다 고스트 버튼(Ghost buttons)은 보조 콘텐츠에 적합합니다.

고스트 버튼(Ghost buttons)의 디자인은 우아하고 눈에 거슬리지 않습니다. 사람들은 먼저 채워진 대담한 CTA(call-to-action)를 보게 될 것이고, 그 다음에는 결국 몇 가지 부차적인 정보와 함께 유령 동반자(ghost companion)를 보게 될 것입니다. 고스트 버튼(Ghost buttons)은 일반적으로 다른 선택과 더 많은 옵션을 제공합니다. 그래서 우리가 볼 수 있듯이, 계층 구조는 버튼과 같은 요소와 함께 중요합니다!‍

..

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

멋진 UX 디자인 카피를 위한 숙련된 작가의 15가지 팁

이 기사를 읽으면, 프로덕트의 UX x10의 효율성을 높일 수 있습니다.  

완벽한 UX 카피의 모습
그렇다면, 하이 엔드 마이크로카피를 구별하는 것은 무엇입니까?

#1 — 간단하고 직관적인 언어
사용자는 어디로 이동해야 하는지 또는 무엇을 해야 하는지 궁금해하는 데 5초 이상을 소비하지 않아야 합니다.  단순함은 디자인과 글쓰기의 모든 것입니다.

 ‍#2 — 대화 어조(스스럼 없는 말씨)
정중하고 일반적인 문구를 사용하여 글을 인간답게 만들고 감정으로 채워줍니다.  "와우", "앗", "굉장해"와 같은 캐주얼한 단어를 사용해 봅니다.  이 문구가 얼마나 가벼운지 확인해 봅니다.

 #3 — 간결함과 간결함
마이크로카피는 이유없이 그렇게 명명되었습니다.  긴 문장과 욕설 사용을 피합니다.

 #4 — 브랜드 문구의 사용
마케팅 광고나 당신만의 은어에서 아이디어가 있습니까?  마케팅 부서와 논의하고 UX에 무엇을 추가할 수 있는지 확인합니다!‍

 #5 —  스캐너빌리티 카피
(Scannability, 스캔해서 인식할 수 있는 가독성)
 아무도 끝까지 글자와 단어의 빽빽한 캔버스를 읽지 않을 것입니다.  글머리 기호가 있는 제목과 목록을 추가합니다(이 기사에서 했던 것처럼)!

* 참고 기사: 마이크로카피 VS 일반 카피라이팅, UX 카피의 예, UX 라이팅의 5C
What's the Point of UX Writing – FlowMapp

 #6 — 요소의 일관성
목록에 여러 요소가 있는 경우, 동일한 질문에 답하는지 확인합니다.  최종 버전을 승인하기 전에 몇 가지 질문을 생성하고 다른 옵션을 시도해 봅니다.  동질성(Homogeneity)을 통해 사용자는 자신이 무엇을 선택해야 하는지 빠르게 이해할 수 있도록 합니다.

 #7 — 이미지와 버튼
•    사용자가 작업을 수행해야 하는 경우 타이틀(heading)과 버튼을 강조합니다.  이러한 요소는 눈으로 먼저 감지됩니다.

•    오류 페이지와 기타 요소의 경우 이미지를 추가하여 사용자 경험에 큰 불편을 주지 않도록 할 수 있습니다.  구글(Google)은 T-Rex의 작은 게임을 '접속 없음' 페이지(찾을 수 없습니다404 페이지)에 추가하여 이를 구현했습니다. 그 외 많은 사이트에서는 재미있는 이미지만 사용합니다.

. .  

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

🎄from.designer 

🗓️ 행사 일정 & UXUI 자료 

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

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

🎥 유튜브 UXUI 공개 영상  

🔖 이메일 

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