🔖 2021년 4월 4주 TOP3

🔖 2021년 4월 4주 TOP3

KPI 중심의 디자인

HCD (Human-Centered Design)는 1980 년대부터 이미 사용된 용어이지만 여전히 디지털 및 전자 상거래 산업에서 뜨거운 관심사로 간주되고 있습니다.

2018 년 'McKinsey'의 분기 별 보고서 'The Business Value of Design'에 따르면 업계 벤치마크와 비교했을 때 '사용자 경험(UX)'과 '지속적인 반복'을 성과가 높은 기업의 4대 핵심 역량 중 2가지로 파악했습니다. 그럼에도 불구하고, 이 보고서는 많은 기업들이 HCD 프로세스를 처음부터 제대로 고려하지 않거나 효과적으로 구현하지 못하고 있음을 보여줍니다.

이 기사에서는 필자는 후자의 특정 형태에 대해 자세하게 살펴보고자 합니다. 즉, 사람들은 사용자 중심적으로 일하고 있다고 생각하고 있지만 요점을 놓치고 있는 것이지요.

저는 2012년부터 전자 상거래에 참여했고, 그동안 미국의 한 대학에서 창업과 연구를 해왔습니다. 이는 거의 10년 동안 콘퍼런스, 세미나, 라운드테이블, 미팅 및 (대부분 말로 표현할 수 없는) '네트워킹 이벤트'에 참석하였고 HCD와 UX에 대해 논의를 한 것도 있지만 더 나아가 '전환율 최적화(CRP)'와 다른 많은 참가자들과의 '그로스 마케팅' 같은 주제도 논의했다는 것을 의미합니다. 그 10년의 과정에서, 두 가지의 것들이 지금까지도 계속 저를 자극하고 있습니다.

이론적 : 인간 중심의 디자인 (HCD)

'적절한 HCD 프로세스'에 대해 말을 할 때, 이는 정확히 무엇을 의미하는 것일까요? 저는 'Don Norman'의 저서 'The Design of Everyday Things'를 참고하고자 합니다. 이 책은 HCD 과정을 더블 다이아몬드 형태로 설명하고 있는데, 이는 'British Design Council'의 작업을 통해 유명세를 치르게 되었습니다.

이 두 다이아몬드의 이면에 있는 아이디어는 두 단계의 프로세스에서 하나가 먼저 발산한 다음 다시 수렴하여 디자인 문제를 식별한 후 다음 사용자에게 가능한 최대한의 이점을 제공하여 해결한다는 것을 보여줍니다. 이 과정을 하는 동안 많은 정성적 및 정량적 연구 방법들이 사용자의 개인적 태도('태도적')와 실제 행동('행동적') 모두를 조사하기 위해 적용될 수 있습니다.

프로세스의 왼쪽 부분 ( "발견 및 정의")에서는 일반적으로 다소 개방적인 방법을 통해 사용자의 일상생활이나 제품 사용(다양성) 중 많은 문제를 발견하여 특히 해결(수렴)이 유망한 '단일 문제 X'에 후속적으로 합의하는 것이 목표입니다. 아마도 실제 사용자 문제를 발견하는 가장 효과적이고 유효한 방법은 민족지학적 현장 연구 또는 하이테크 인류학일 것입니다.

'Rich Sheridan'은 그의 저서 'Joy, Inc.'에 쓰여있는 디지털 제품의 맥락에서 그것을 언급합니다. 이 방법은 비용이 많이 들고 자원 집약적이기 때문에(특히 많은 시간과 인내심이 필요함.) 업계에서는 상대적으로 거의 사용되지 않습니다. 대신 연구원들은 종종 카드 분류, 설문 주사, 사용자 인터뷰와 같은 방법에 의존하게 되는데, 이것은 비용이 훨씬 덜 들지만 사용자들이 '자연스러운 환경'에 관찰될 수 없기 때문에 효율성이 떨어집니다.

이후 프로세스의 오른쪽 부분에서는 먼저 식별된 문제 X(분산)에 대해 여러 가지 가능한 솔루션(종종 간단한 프로토타입)을 설계한 다음 사용자 테스트(융합)로 검증된 솔루션을 사용하는 것이 포함됩니다.

이 단계에서 사용된 방법은 측정 가능한 사용자 행동과 잠재적 솔루션의 비교 가능성에 더 중점을 두기 때문에 덜 개방적이고 더 정량적인 방법입니다.

마지막으로 최상의 솔루션이 구현되고 추가 검증되며, 종종 추가 반복('측정 및 학습')이 발생합니다. 따라서 HCD 프로세스는 실제로는 완료되지 않고 'McKinsey'가 핵심 역량으로 식별한 지속적인 반복에서 절정에 이릅니다.

..

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

효과적인 랜딩 페이지를 디자인하는 방법

전환율을 높이기 위한 4가지의 필수 요소를 알아보자.

많은 사람들이 랜딩 페이지와 웹 사이트의 홈페이지를 혼동하곤 합니다. 주요 큰 차이점은 모든 랜딩 페이지가 '전환'이라는 강력한 의도를 가지고 있다는 것입니다. 보는 유저를 구매자로 전환하거나, 아니면 단도직입적으로 말해서 트래픽을 수익으로 전환합니다. 랜딩 페이지는 마케팅 캠페인을 위해 만들어진 독립형 페이지입니다. 이러한 특성 때문에, 랜딩 페이지는 다른 종류의 웹사이트 페이지들에 비해 정보를 더욱 효과적으로 전달하고 보는 유저들의 관심을 더 효율적으로 끌어야 합니다. 그렇다면 어떻게 해야 더 전환율이 높은 랜딩 페이지를 디자인할 수 있을까요?

랜딩 페이지의 4가지 필수 요소입니다.

1. 강력한 CTA

말할 필요도 없이 CTA(Call To Action)은 랜딩 페이지에서 가장 중요한 요소입니다. CTA는 일반적으로 연결된 텍스트 또는 클릭 가능한 버튼 형태로 사용자에게 액션을 수행하도록 권장합니다. CTA의 디자인은 랜딩 페이지의 전환율과 이탈률에 큰 영향을 미칩니다. 어떻게 하면 CTA를 더 설득력 있게 만들 수 있을까요?

첫 번째로, CTA가 말하고자 하는 것은 매우 중요합니다. 그것은 청중들이 행동을 취할 수 있는 강한 욕구를 만들어야 합니다. 최대 전환을 달성하려면 텍스트가 비즈니스 목표와 일치해야 합니다.

예를 들어, '지금 구매' 또는 '지금 주문'은 전자 상거래 또는 온라인 상점에서 매우 일반적인데, 이는 최종 단계인 전환 퍼널로 직접 연결되기 때문입니다. 반면 서비스 기반 기업은 '지금 예약', '연락' 또는 '가입'을 사용하여 사용자의 참여를 유도합니다.

이는 때때로 잠재 고객이 더 많은 정보를 요청하는 더 빠른 방법을 원하기 때문입니다. 'Shopify', 'Bluehost' 또는 'Webflow'와 같은 일부 디지털 서비스는 사용자를 유인하기 위해 '시작하기' 또는 '무료 사용'을 사용합니다.

일반적으로 몇 가지 기본 원칙이 있습니다. 1) "지금"을 사용하여 긴박감을 만듭니다. 2) 다음 단계로 넘어가는 마찰을 완화하기 위해 텍스트를 간결하고 명확하게 합니다.

두 번째로, CTA를 디자인하는 방법이 매우 중요할까요? 대비를 사용하여 눈에 띄게 만듭니다. 단순히 다른 색상을 사용하여 단어를 표시하면 클릭할 수 있음을 나타내는 시각적 신호만 생성됩니다. 색상 외에도, 그것들은 대비를 강조하는 다른 방법입니다.

예를 들어 배경 불투명도를 낮추거나 버튼에 그림자를 적용합니다. 이렇게 하면 CTA가 페이지의 맨 앞 레이어에 있는 것처럼 보입니다. 또 다른 예는 대문자를 사용하는 것입니다. 대문자는 매우 강력합니다. 우리가 메시지를 읽는 경험을 느낄 때, 대문자는 우리에게 소리치는 것과 같습니다.

사실 이 이면에는 더 많은 심리학적인 트릭이 있습니다. 여기 우리가 심리학을 사용하여 더 매력적인 CTA를 만드는 방법에 대한 기사가 있습니다. 'CTA 심리학' (원문에서 링크 참고.)

2. 공백 (White Space)

저는 공백을 두 번째 필수 요소로 꼽았습니다. 왜냐하면 공백은 정말로 필수적이기 때문입니다. 공백 또는 음의 공간은 기본적으로 내용이 표시되지 않는 랜딩 페이지의 영역을 나타냅니다. 비록 그것들이 검은색으로 보일지라도, 우리는 여전히 그것을 공백(White Space)라고 부릅니다. 어떤 사람들은 그것이 웹사이트의 부동산 낭비라고 생각하기 때문에 이런 것을 만듭니다. 하지만 TBH는 어디서부터 찾아야 하는지 아십니까?

보편적인 디자인 원칙 중 하나는 KISS('keep it simple, stupid')입니다. 더 많은 공백을 도입하면 시각적 혼란이 현저하게 줄어들고 시각적 선명도가 향상됩니다. 너무 많은 정보가 제공되면 각 정보가 경쟁하여 시청자의 관심을 끌게 됩니다. 사용자가 텍스트, 링크, 단추 및 이미지로 과부하가 걸리면 중요한 메시지를 받을 가능성이 훨씬 줄어듭니다.

이것은 우리에게 네거티브 공간의 두 번째 이점을 가져다줍니다. 공백은 자연스럽게 배경 레이어에 포함되기 때문에 시각적 계층 구조를 만듭니다. 따라서, 사용자들의 관심은 최상위 계층에 떠있는 것처럼 보이는 CTA에 이끌립니다. 그리고 당신은 CTA를 대중화하는 것의 중요성을 알고 있습니다.

그런 다음 더 많은 공백을 만들고 최소한의 랜딩 페이지를 디자인하는 방법에 대해 이야기해 보겠습니다. 기존 콘텐츠를 삭제하는 것이 새 콘텐츠를 추가하는 것보다 더 어려운 경우도 있기 때문에 말처럼 쉽지 않습니다.

첫째, 필수 정보만 포함되도록 합니다. '필수적'이란 고객의 불만 사항을 해결하는 솔루션을 효과적으로 제공하거나 고객에게 제공되는 비즈니스 가치를 입증하는 것을 의미합니다. 보관 또는 삭제 여부를 결정하기 어려울 때는 KISS 원칙을 다시 참고하세요. 청중이 이해하기 쉽고 명료한지 고려해보세요.

둘째, 페이지 하단의 일부 요소를 제거하여 네거티브 공간을 늘릴 수 있습니다. 예를 들어 필수가 아닌 링크를 바닥글에 넣을 수 있습니다. 아래 이미지에서 볼 수 있듯이 Airbnb 랜딩 페이지는 공백 측면에서 큰 성과를 거뒀습니다. 'Airbnb의 랜딩 페이지 디자인 - UX 분석으로 사용자의 행동을 유도하는 방법'이라는 기사는 놀라운 설명을 제공합니다.

..

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

UI를 실제로 테스트하는 방법.

리딩 엔지니어링 팀이 주로 사용하는 테스트 기술내용입니다.

UI 테스트는 어색합니다. 사용자는 기능으로 꽉 찬 잦은 릴리스를 기대합니다. 그러나 새로운 기능이 나올 때마다 테스트해야 하는 UI와 새로운 상태들이 더 많이 나타나게 됩니다. 모든 테스트 도구는 "쉽고, 흐트러지지 않고, 빠르다"라고 약속하지만, 세밀한 부분에서는 절충안(trade-offs)이 있습니다.

리딩 프런트-엔드 팀은 어떻게 따라가고 있을까요? 과연 그들의 테스트 전략은 무엇이며, 어떤 방법을 사용할까요? 저는 'Storybook' 커뮤니티에서 Twilio, Adobe, Peloton, Shopify 등의 10개 팀을 조사하였고  그들에게서 무엇이 효과가 있는지를 깨달았습니다.

이 게시물에서는 확장된 엔지니어링 팀이 사용하는 UI 테스트 기술을 중점적으로 다룹니다. 이렇게 하면 적용 범위, 설정 및 유지 보수의 균형을 유지하는 실용적인 테스트 전략을 만들 수 있습니다. 그 과정에서 우리들은 피해야 할 함정을 지적할 것입니다.

우리가 테스트하는 것은 무엇일까요?

모든 주요 JavaScript 프레임 워크는 구성 요소의 핵심입니다. 즉, UI가 상향식(bottom-up)으로 작성되며, 원자 구성 요소부터 시작하여 페이지로 점진적으로 구성된다는 의미입니다.

모든 UI의 부분이 구성 요소(*컴포넌트) 임을 기억하세요. 이제 모든 UI가 구성 요소임을 기억하십시오. 맞습니다, 페이지를 포함해서 말이죠. 페이지와 버튼의 유일한 차이점은 데이터 소비하는 방법입니다.

그러므로, 테스트 UI는 테스트 구성 요소와 동의어가 됩니다.

구성 요소에 대해서는 서로 다른 테스트 방법 간의 차이가 모호할 수 있습니다. 용어에 초점을 맞는 대신에, UI의 어떤 특성들이 테스트를 필요로 하는지 생각해 보겠습니다.

어디에 초점을 맞춰야 할까요?

종합적인 UI 테스트 전략은 노력과 가치의 균형을 유지합니다. 하지만 테스트하는 방법은 너무 많아서 어떤 상황에서 적합하게 할 수 있는지 알아내는 것도 어려울 수 있습니다. 그렇기 때문에 많은 팀들이 아래 기준을 사용하여 서로 다른 테스트 기술을 평가하는 것입니다.

💰 유지 보수 비용: 테스트 작성 및 유지 관리에  필요한 시간과 노력을 들입니다.
⏱️ 반복 속도: 변경점과 결과값 사이의 피드백 순환이 얼마나 빠른지 알 수 있습니다.
🖼 현실적인 환경: 실제 브라우저 또는 JSDOM과 같은 시뮬레이션 환경에서 테스트를 실행할 수 있습니다.
🔍 실패 분리: 테스트가 실패하고, 그 실패 원인을 얼마나 빨리 식별할 수 있을까요?
🤒 테스트 플레이크: 잘못된 긍정/부정은 테스트의 목적이 깨질 수 있습니다.

예를 들어, 종단 간 테스트(end-to-end)는 "실제"사용자 흐름을 시뮬레이션하지만 모든 곳에 적용하기에는 실용적이지 않습니다. 웹 브라우저 테스트의 주요 장점도 또한 단점이 될 수 있습니다. 테스트를 실행하는 데 시간이 오래 걸리고 실패 지점이 더 많기 때문이지요 (와지끈!).

자아, 이제 테스트할 UI 특성과 각 테스트 방법을 평가하는 기준에 대해 살펴보았으니, 팀이 테스트 전략을 어떻게 설계하는지 살펴볼 것입니다.

"테스트는 자동화된 종속성 업데이트에 대해 완벽하게 확신을 줍니다. 만약 테스트가 통과되면 우리는 그것들을 병합(merge) 할 것입니다."

..

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

🎄from.designer 

🗓️ 행사 일정 & UXUI 자료 

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

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

🎥 유튜브 UXUI 자료 영상  

🔖 이메일 

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