Table
Search
Name
요약
태그
🧑🏻⚕️ 요약자
공유 날짜
is_오픈채팅
is_커리어리
is_HOLIX
타겟 오디언스
“이번 분기에 구독 갱신율을 15% 늘립시다.”
비즈니스가 생존하려면 이과 같은 비즈니스 목표가 필요합니다. 그러면 디자인 팀은 "우리가 갱신을 위한 디자인을 변경하여 기존 보험 계약자의 갱신이 15% 증가했습니다.” 라고 보고할 수 있습니다. 그러나 디자이너로서 이것을 목표로 보아야 할까요?
비즈니스 결과는 훌륭한 성과를 가져오지만 훌륭한 목표는 아닙니다.
디자인 리더가 범하는 실수는 비즈니스 결과를 디자인 목표로 세우는 것입니다. 비즈니스 결과를 얻는 가장 쉬운 방법은 비즈니스 결과에 영향을 미치는 직접적인 요소에 집중하는 것입니다.
“더 많은 구독자를 갱신하기 위해 리마인더 알림을 개선합시다.”
이것은 효과적이지만 사용자의 진정한 목표를 놓치고 있습니다. 오늘 아침에 아무도 구독을 갱신할 수 있게 되어 기뻐하지 않았습니다. 또한, 팀이 이러한 목표에 집중하면 의도치 않게 사용자 경험이 악화할 수 있습니다. 조직은 다크 패턴을 사용하여 사용자가 의도하지 않게 가입하거나 구독을 갱신 하도록 속이는 방법을 찾기도 합니다. 이처럼 갱신율 증가는 서비스를 더 좋게 만들었는지 나쁘게 만들었는지 알 수 없습니다.
UX 결과 는 비즈니스 결과와 다릅니다.
UX 결과에 도달하기 위해 디자인 리더는 다음 질문에 답해야 합니다.
“우리의 제품 갱신을 통해 고객의 삶을 어떻게 개선할 수 있습니까?“
이러한 방식으로 갱신에 관해 묻는 것은 단순히 거래를 완료하는 행위를 넘어섭니다. 거래를 완료하는 데 초점을 맞추면서도 고객에게 타사 제품과 다른 긍정적인 차이를 만드는 방식입니다.
예를 들어 자동차 보험 회사라면, 부모 보험 계약자들의 삶을 개선 할 수 있습니다. 사용자 조사로 자녀가 초보 운전자가 되면 부모는 자녀의 안전에 대해 걱정하는 것을 알아냅니다. 이 인사이트를 통해 디자인팀은 앱으로 자녀 운전자가 타이어 펑크와 같은 일이 발생했을 때 부모에게 도움을 요청할 수 있도록 개선합니다. 또한 긴급출동 지원 요청의 상태를 부모에게 알릴 수 있는 기능을 만듭니다. 이런 방향은 부모인 고객이 앱이 있을 때 자녀가 안전하다고 느낄 것입니다. 그리고 갱신 시점에 부모 보험 계약자에게 자녀 운전자를 보호하는 데 앱이 어떻게 도움이 되었는지 요약하여 보여줍니다.
결과적으로 디자인팀은 목표를 비즈니스 결과(청소년 운전자에 대한 갱신율 증가) 대신 UX 결과(청소년 운전자의 부모에게 보안 의식 향상)로 명시할 수 있습니다.
비즈니스 결과를 위해 거꾸로 작업해야 합니다.
비즈니스 결과는 여전히 도움이 되지만 팀이 UX 결과를 달성한 후에만 가능합니다. 디자인 팀이 일을 잘하면 갱신율이 높아집니다. 또한 부모가 다른 부모에게 입에서 입으로 추천해 새로운 보험 가입이 증가할 수도 있습니다.
디자인 팀은 사용자 리서치 데이터와 밀접하게 일하기 때문에, 특정 비즈니스 결과가 UX 결과와 밀접한 연관이 있다는 것을 쉽게 찾아낼 수 있습니다. 이는 디자인 팀 리더가 고위 경영진에게 보고할 때 개선된 사용자 경험과 중요한 비즈니스 결과 달성 사이의 점을 연결할수 있습니다. 결과적으로 UX 결과는 잘 설계된 제품과 서비스를 제공하는 비즈니스 가치를 보여주는 필수 도구입니다.프로덕트 전략
비즈니스 전략
UX
2022/06/28
주니어
중니어
<B2B UX가 불편한 이유>
UX나 UI디자인을 모르는 엔지니어들로만 구성된 팀이 구축한 경우
- 그들의 주요 관심사는 사용성이나 모범사례가 아닌 많은 기능
- 범위가 크고 전면적인 재설계하는건 높은 위험
특정 앱 동작에 익숙해진 고객을 화나게 할 가능성도 있음
- 변경 사항에 대해 불평할 가능성이 큼
- Twitter, Gmail도 조정할 때마다 항상 난리가 남
구매자가 최종 사용자가 아닌 것도 큰 이유
- 일반적으로 IT 및 조달 부서가 대신 소프트웨어를 구매함
- IT스코어카드로 평가하는데 '사용성'은 직접적인 영향을 주는 요소가 아니라서 제외됨
<더 나은 B2B 애플리케이션 설계>
앱을 구축하고 설계하는 회사의 관점에서 접근
- UI를 한번에 교체하는건 매우 위험
- 경영진 입장에서 대규모 투자에 비해 매력도가 낮음
- "시간에 따라 구축"하는 접근이 필요
- UX팀은 UX로드맵을 구성해야함
- 일반적으로 컴포넌트 라이브러리와 디자인 시스템은 일관된 작업을 위한 첫번째 단계.
- B2B 조직에는 사용자 인터페이스에 대해 강한 의견을 가진 이해관계자가 많다.
- 최종 사용자에 다가가는건 어렵지만, 이런 사용자와 개방형 인터뷰를 수행해야함.
- 선호도 맵과 고객 여정지도, 사용자가 불편을 겪고있는 것을 데이터로 보여주는 등의 과정을 거쳐 설득 필요.
UI를 개선하는 가장 좋은 방법은 오늘날의 공통 표준을 따르는것
- 머터리얼 디자인인은 훌륭한 시작
- 그 외에 기타 인기 소프트웨어를 연구하고, 가능한 경우 유사한 요소를 통합하세요
<엔터프라이즈 UX의 성공 측정하기>
- A/B테스트로 설계 작업이 원하는 지표를 개선하고 ROI를 제공하는지 증명 가능
- 두 세그먼트를 비교할 메트릭을 설정
- 작업 완료 시간, 성공적으로 작업한 사용자의 비율 또는 작업 포기율의 감소 등이 대표적.
사용자와 B2B 소프트웨어 테스트
- 베타 프로그램도 좋은 방법
- UX팀은 사용자와 직접 상호작용하여 구두 피드백을 얻을 수도 있음
<B2B 소프트웨어 구매를 위한 사용성 스코어카드>
구매자의 입장
- "기술의 혜택을 받는 사람이 작업을 수행하는 사람이 아닐 때 기술은 실패하거나 전복될 가능성이 높습니다."
- 회사가 구매할 때, 최종 사용자 직원도 스코어 카드에 표시되야함
- 최종 사용자는 해당 소프트웨어가 잘 쓰일지 견해를 줄 수 있음.
<B2B ux의 더 밝은 미래>
- 구매자 측의 솔루션은 간단. 구매 결정에 실제 최종 사용자를 포함하면 됨.
- 공급자 측은 점진적 접근 방식이 더 안전하고 현실적. 고객 조사를 기반으로 단계별 로드맵을 마련해야함.
- 신생 기업이 기존 플레이어를 방해하고 매끄러운 UI를 가져오고 있음.
- 세일즈포스와 같이 오래된 회사들도 UX에 상당한 노력을 기울이기 시작함.
- 페이스북, 구글, 애플 기기 사용자가 많아짐에 따라, 향상된 경험에 대한 수요가 증가함.
마인드셋
UX
2022/06/21
기획자
SaaS 제품 담당자
디자이너는 사람들이 개인의 선호도와 우선순위에 맞는 방식으로 인터페이스를 사용하도록 도와야 합니다.
사용자에게 선택의 자율성을 보장하는 것은 매우 중요합니다. 여기서 자율성은 개인의 선호도 및 우선순위에 맞게 인터페이스, 제품을 사용할 수 있는 것을 의미합니다.
커스터마이징
커스터마이징 기능을 제공하여 사용자에게 자율성을 부여할 수 있습니다. 커스터마이징을 적용한 사용자는 프로덕트에 애정을 갖게 됩니다. 한가지 주의해야 할 점은 브랜드 일관성과 표준을 유지하는 것입니다.
∙Facebook Messenger 는 사용자가 원한다면 각 대화의 테마를 변경할 수 있습니다.
∙Google Drive 는 파일 표시 옵션을 변경할 수 있습니다(목록으로 보기와 아이콘으로 보기). 이 옵션은 각각 다른 유형의 파일을 볼 때 최적의 방식을 선택할 수 있기 때문에 유용하게 사용되며, 옵션간 전환도 쉽게 가능하기 때문에 편리합니다.
∙Chrome 에서는 페이지의 콘텐츠 배율을 Zoom in/out 으로 조정할 수 있습니다.
∙Apple Mac의 Shortcuts 기능을 사용하면 사용자가 단축키를 지정할 수 있습니다. 많은 사용자가 사용하는 기능은 아니지만, 기능을 사용하는 사용자의 업무 속도를 매우 높일 수 있습니다.
스캐닝
사용자는 웹에서 콘텐츠를 꼼꼼히 읽지 않습니다. 다양한 Eyetracking 연구를 보면 사용자는 ‘읽을만한 가치가 있는 콘텐츠인지'를 확인하기 위해 쓱 훑어보는 경향이 있습니다. 사용자의 정보 스캐닝을 어렵게 만드는 것은 사용자에게 ‘꼼꼼히 읽기'를 강요하는 것이기 때문에 자율성을 제한합니다.
∙제목과 부제목을 적절히 사용하여 사용자가 자세히 읽기 원하는 콘텐츠를 빠르게 파악하는데 도움을 줄 수 있습니다.
∙또한 적절한 이모지를 사용하여 추가적인 Visual Signal을 제공할 수 있습니다.
타이밍과 순서
사용자는 콘텐츠를 확인할 시기와 순서를 선택하고싶어합니다. 어떤 사용자는 인터페이스에 이미 익숙하고 바로 사용하기 원하지만, 다른 사용자는 초반에 제공되는 가이드를 선호합니다. 한가지 방법이나 순서가 모든 선호와 우선순위를 충족시킬 수 없기 때문에 다양한 Support 방법을 제공하는 것이 중요합니다.
∙Grammarly.com 에서는 사용자가 개인화 선택을 연기할 수 있습니다. Grammarly 가 각 사용자의 정보를 수집해서 사용자의 경험을 향상시킬 수 있지만, 이 단계를 완료하도록 강요하지 않음으로써 사용자의 자율성을 존중합니다.
∙Khan Academy(게임 형식으로 제공되는 교육 앱) 은 사용자가 수강 코스와 코스 내 주제의 순서를 선택하여 구성할 수 있습니다. 이정도의 자율성은 사용자가 주도적으로 강의를 듣는 경험을 제공하게 됩니다.
Tips
자율성이 너무 과도해져서 사용자를 압도하지 않도록, 균형을 찾는데 도움이 되는 두가지 팁을 제안합니다.
∙옵션의 개수를 결정할 때 작업기억을 고려하세요. 선택지가 없으면 자율성이 제한되고, 의미 있는 몇 가지 옵션을 제공하면 사용자가 통제할 수 있지만, 너무 많은 선택지를 제공하면 사용자가 압도됩니다.
∙사용자에게 도움이 되는 기본값을 제공하세요. 모든 값을 사용자가 정의하도록 맡겨버리면 사용자의 작업 속도가 현저하게 떨어집니다.
커스터마이징
커스터마이징 기능을 제공하여 사용자에게 자율성을 부여할 수 있습니다. 커스터마이징을 적용한 사용자는 프로덕트에 애정을 갖게 됩니다. 한가지 주의해야 할 점은 브랜드 일관성과 표준을 유지하는 것입니다.
∙Facebook Messenger 는 사용자가 원한다면 각 대화의 테마를 변경할 수 있습니다.
∙Google Drive 는 파일 표시 옵션을 변경할 수 있습니다(목록으로 보기와 아이콘으로 보기). 이 옵션은 각각 다른 유형의 파일을 볼 때 최적의 방식을 선택할 수 있기 때문에 유용하게 사용되며, 옵션간 전환도 쉽게 가능하기 때문에 편리합니다.
∙Chrome 에서는 페이지의 콘텐츠 배율을 Zoom in/out 으로 조정할 수 있습니다.
∙Apple Mac의 Shortcuts 기능을 사용하면 사용자가 단축키를 지정할 수 있습니다. 많은 사용자가 사용하는 기능은 아니지만, 기능을 사용하는 사용자의 업무 속도를 매우 높일 수 있습니다.
스캐닝
사용자는 웹에서 콘텐츠를 꼼꼼히 읽지 않습니다. 다양한 Eyetracking 연구를 보면 사용자는 ‘읽을만한 가치가 있는 콘텐츠인지'를 확인하기 위해 쓱 훑어보는 경향이 있습니다. 사용자의 정보 스캐닝을 어렵게 만드는 것은 사용자에게 ‘꼼꼼히 읽기'를 강요하는 것이기 때문에 자율성을 제한합니다.
∙제목과 부제목을 적절히 사용하여 사용자가 자세히 읽기 원하는 콘텐츠를 빠르게 파악하는데 도움을 줄 수 있습니다.
∙또한 적절한 이모지를 사용하여 추가적인 Visual Signal을 제공할 수 있습니다.
타이밍과 순서
사용자는 콘텐츠를 확인할 시기와 순서를 선택하고싶어합니다. 어떤 사용자는 인터페이스에 이미 익숙하고 바로 사용하기 원하지만, 다른 사용자는 초반에 제공되는 가이드를 선호합니다. 한가지 방법이나 순서가 모든 선호와 우선순위를 충족시킬 수 없기 때문에 다양한 Support 방법을 제공하는 것이 중요합니다.
∙Grammarly.com 에서는 사용자가 개인화 선택을 연기할 수 있습니다. Grammarly 가 각 사용자의 정보를 수집해서 사용자의 경험을 향상시킬 수 있지만, 이 단계를 완료하도록 강요하지 않음으로써 사용자의 자율성을 존중합니다.
∙Khan Academy(게임 형식으로 제공되는 교육 앱) 은 사용자가 수강 코스와 코스 내 주제의 순서를 선택하여 구성할 수 있습니다. 이정도의 자율성은 사용자가 주도적으로 강의를 듣는 경험을 제공하게 됩니다.
Tips
자율성이 너무 과도해져서 사용자를 압도하지 않도록, 균형을 찾는데 도움이 되는 두가지 팁을 제안합니다.
∙옵션의 개수를 결정할 때 작업기억을 고려하세요. 선택지가 없으면 자율성이 제한되고, 의미 있는 몇 가지 옵션을 제공하면 사용자가 통제할 수 있지만, 너무 많은 선택지를 제공하면 사용자가 압도됩니다.
∙사용자에게 도움이 되는 기본값을 제공하세요. 모든 값을 사용자가 정의하도록 맡겨버리면 사용자의 작업 속도가 현저하게 떨어집니다.UX
리서치
2022/06/16
주니어
중니어
B2B 프로덕트는 많은 양의 데이터를 한 번에 보여주기 위해 테이블을 사용하는 경우가 많습니다. 테이블을 사용할 때 어떤 점을 고려해서 디자인 해야할까요?
테이블의 특징과 장점 (특히 카드 UI와 비교했을 때)
1. 확장성
• 데이터가 변경되었을 때 행 방향, 열 방향으로 쉽게 확장할 수 있습니다
2. 비교 용이성
• 두 인접한 데이터들을 눈을 많이 움직이거나 머릿속에 정보를 기억해둘 필요가 없이 편리하게 비교할 수 있습니다
테이블에서 수행되는 4가지 핵심 사용자 태스크
• 특정 레코드 검색
• 데이터 비교
• 한 행의 데이터를 확인하고, 편집하고, 추가하기
• 레코드 관리 작업
1) 특정 레코드 검색
사용자의 검색 행동은 이미 알고있는 특정 항목을 찾거나, 어떤 기준을 충족하는 여러 항목을 찾는 행동입니다.
이를 위해 필터링, 정렬, 검색, 눈으로 스캔할 수 있습니다. 하지만 어떤 방식을 취할지 예측하기 어렵고, 사용자가 생각하는 가장 쉬운 방법에 대한 기대를 바탕으로 결정하게 됩니다.
Key Point
• 첫 번째 열은 읽을 수 있는 식별자를 제공해야 합니다
• 각 열은 데이터의 중요성과 각 열 간의 관련성에 따라 배치해야 합니다
• 필터는 발견하기 쉽고 빠르게 사용할 수 있어야 합니다. 또한 데이터를 확인할 때 필터링된 데이터를 보고있다는 것을 쉽게 인지할 수 있어야 합니다.
2) 데이터 비교
복잡하고 큰 테이블에서 비교 작업할 때 아래 문제들을 경험할 수 있습니다.
• 많은 양의 데이터 중 각 셀이 무엇을 나타내며, 어떤 레코드에 속하는지 알기 어렵습니다
• 비교하려는 열 혹은 행이 서로 멀리 떨어진 경우 비교하기 쉽지 않습니다
이를 해결하기 위해 아래 방법을 사용할 수 있습니다.
2-1) 찾는 정보를 쉽게 확인할 수 있게 하기
• 화면보다 큰 테이블일 경우 헤더 행과 헤더 열을 고정하기
• 행과 열 사이로 움직일 때 위치를 유지할 수 있도록 보더, 지브라 스타일, 호버 스타일을 제공하기
2-2) 비교할 정보를 가까이 위치할 수 있게 하기
• 행, 열을 숨기거나 행, 열 순서를 변경할 수 있도록 하기 (숨긴 경우 숨겨져있는 표시가 있어야 합니다!)
3) 한 행의 데이터를 확인하고, 편집하고, 추가하기
한 레코드에 대한 위 세가지 액션을 하기에는 테이블 형식이 적절하지 않을 수 있습니다
• 테이블에서 직접 수정 : 좁은 테이블에서 가능한 방식입니다. 읽기 모드와 수정 모드는 시각적으로 구분해 실수로 편집되는 경우를 방지해야 합니다.
• 모달 팝업 : 하나의 레코드만 확인할 수 있기 때문에 인접하거나 유사한 레코드의 데이터를 참조하거나 복사할 수 없는 단점이 있습니다.
• 비모달 팝업, 개별 윈도우 : 테이블의 일부에 접근할 수 있도록 하는 옵션입니다.
• 아코디언으로 행 확장 : 편집 중인 경우 인접 레코드를 참조하는데 어려울 수 있고, 시각적으로 어수선하게 될 수 있습니다.
4) 레코드 관리 작업
레코드 내용을 편집하는것 외에도 하나 혹은 그 이상의 레코드에 대한 관리 작업이 있을 수 있습니다.
4-1) 단일 액션
액션이 1개, 2개인 경우 행 내 인라인으로 배치할 수 있습니다. 그 이상인 경우엔 보통
• 공간이 없어 레이블을 생략하게 되면서 버튼을 식별하고 클릭하기 어렵게 됩니다
• 액션 버튼이 호버 혹은 Action 메뉴 아래에 숨겨져 발견하기 어렵게됩니다.
4-2) 배치 액션
여러 레코드에 대한 동시 액션을 위해서는 보통 레코드를 선택하는 과정이나 메뉴가 포함됩니다. 공간 효율적으로 옵션을 배치할 수 있습니다.
테이블의 특징과 장점 (특히 카드 UI와 비교했을 때)
1. 확장성
• 데이터가 변경되었을 때 행 방향, 열 방향으로 쉽게 확장할 수 있습니다
2. 비교 용이성
• 두 인접한 데이터들을 눈을 많이 움직이거나 머릿속에 정보를 기억해둘 필요가 없이 편리하게 비교할 수 있습니다
테이블에서 수행되는 4가지 핵심 사용자 태스크
• 특정 레코드 검색
• 데이터 비교
• 한 행의 데이터를 확인하고, 편집하고, 추가하기
• 레코드 관리 작업
1) 특정 레코드 검색
사용자의 검색 행동은 이미 알고있는 특정 항목을 찾거나, 어떤 기준을 충족하는 여러 항목을 찾는 행동입니다.
이를 위해 필터링, 정렬, 검색, 눈으로 스캔할 수 있습니다. 하지만 어떤 방식을 취할지 예측하기 어렵고, 사용자가 생각하는 가장 쉬운 방법에 대한 기대를 바탕으로 결정하게 됩니다.
Key Point
• 첫 번째 열은 읽을 수 있는 식별자를 제공해야 합니다
• 각 열은 데이터의 중요성과 각 열 간의 관련성에 따라 배치해야 합니다
• 필터는 발견하기 쉽고 빠르게 사용할 수 있어야 합니다. 또한 데이터를 확인할 때 필터링된 데이터를 보고있다는 것을 쉽게 인지할 수 있어야 합니다.
2) 데이터 비교
복잡하고 큰 테이블에서 비교 작업할 때 아래 문제들을 경험할 수 있습니다.
• 많은 양의 데이터 중 각 셀이 무엇을 나타내며, 어떤 레코드에 속하는지 알기 어렵습니다
• 비교하려는 열 혹은 행이 서로 멀리 떨어진 경우 비교하기 쉽지 않습니다
이를 해결하기 위해 아래 방법을 사용할 수 있습니다.
2-1) 찾는 정보를 쉽게 확인할 수 있게 하기
• 화면보다 큰 테이블일 경우 헤더 행과 헤더 열을 고정하기
• 행과 열 사이로 움직일 때 위치를 유지할 수 있도록 보더, 지브라 스타일, 호버 스타일을 제공하기
2-2) 비교할 정보를 가까이 위치할 수 있게 하기
• 행, 열을 숨기거나 행, 열 순서를 변경할 수 있도록 하기 (숨긴 경우 숨겨져있는 표시가 있어야 합니다!)
3) 한 행의 데이터를 확인하고, 편집하고, 추가하기
한 레코드에 대한 위 세가지 액션을 하기에는 테이블 형식이 적절하지 않을 수 있습니다
• 테이블에서 직접 수정 : 좁은 테이블에서 가능한 방식입니다. 읽기 모드와 수정 모드는 시각적으로 구분해 실수로 편집되는 경우를 방지해야 합니다.
• 모달 팝업 : 하나의 레코드만 확인할 수 있기 때문에 인접하거나 유사한 레코드의 데이터를 참조하거나 복사할 수 없는 단점이 있습니다.
• 비모달 팝업, 개별 윈도우 : 테이블의 일부에 접근할 수 있도록 하는 옵션입니다.
• 아코디언으로 행 확장 : 편집 중인 경우 인접 레코드를 참조하는데 어려울 수 있고, 시각적으로 어수선하게 될 수 있습니다.
4) 레코드 관리 작업
레코드 내용을 편집하는것 외에도 하나 혹은 그 이상의 레코드에 대한 관리 작업이 있을 수 있습니다.
4-1) 단일 액션
액션이 1개, 2개인 경우 행 내 인라인으로 배치할 수 있습니다. 그 이상인 경우엔 보통
• 공간이 없어 레이블을 생략하게 되면서 버튼을 식별하고 클릭하기 어렵게 됩니다
• 액션 버튼이 호버 혹은 Action 메뉴 아래에 숨겨져 발견하기 어렵게됩니다.
4-2) 배치 액션
여러 레코드에 대한 동시 액션을 위해서는 보통 레코드를 선택하는 과정이나 메뉴가 포함됩니다. 공간 효율적으로 옵션을 배치할 수 있습니다.UI 컴포넌트
2022/06/15
중니어
시니어
사용자 인터뷰의 질을 높이기 위해 피해야할 4가지 흔한 질문들
이 앱/웹 사이트/제품을 어디에 사용하시겠습니까?
이 질문이 구린 이유 : 인터뷰이의 잘못된 판단으로 인해 제품에 대한 낙관적인 편견에 빠질 수 있습니다. 또한 인터뷰이가 사회적 압력에 의해 본심을 숨기고 있을 수도 있습니다.
이렇게 해보세요 : 인터뷰이에게 가설을 질문하는 대신, (1) 그들의 과거 행동을 분석하거나 (2) 문제 상황의 원인에 대해 물어보세요. 인간은 습관의 동물이기에 이후에도 같은 행동을 보일 가능성이 높습니다.
이 기능이 유용하다고 생각하세요?
이 질문이 구린 이유 : 모든 기능은 '유용'합니다. 다만 그 기능이 당면한 문제를 해결할 수 있는지 따져보는 것이 중요할 뿐이죠.
이렇게 해보세요 : (1) 작업 기반의 사용 적합성 테스트를 통해 사용자가 직접 기능을 찾고 사용하는지 확인하거나, (2) A/B 테스트를 통해 사용자가 새로운 기능에 어떻게 반응하는지 관찰해보세요.
이 디자인이 좋으신가요?
이 질문이 구린 이유 : 대부분의 사람들은 디자인에 전문적인 식견이 없습니다. 브랜드의 일관성이나 시각적 계층 구조 등에 대해 고려될 수 없음은 물론이다.
이렇게 해보세요 : 다른 질문들을 통해 인터뷰이에게서 브랜드나 시각 효과에 대한 피드백을 받을 수 있다. 그리고 그것을 해석하는 통찰력은 전문가가 가지고 있다.
당신의 어머니/자녀/친구가 이것을 사용할까요?
이 질문이 구린 이유 : 이미 에서 사람들이 자기 자신의 행동을 판단하는데도 서툴다고 말한 바 있다. 그들이 타인의 행동에 대해 정확히 판단하리라고 기대할 수 있을까?
이렇게 해보세요 : 인터뷰이 선정에 까다로울 필요가 있다. 정말 '당면 사용자'를 인터뷰이로 섭외해라.
진정한 혁신은 사용자의 의견 경청과 무시 사이의 적절한 배합에서 나옵니다.리서치
2022/05/26
주니어
디자인은 Product Manager가 결정을 내릴 때 최우선으로 생각해야 할 요소 중 하나입니다.
모든 Product Manager가 숙지해야 하는 7가지 제품 디자인 원칙이 있습니다. 특히 디자이너 출신의 PM이 아니라면, 이 7원칙을 이해하고 내면화 하는 것이 중요합니다.
1. 유저의 생각을 가이드하세요
유저가 어디에 초점을 맞춰야 할지를 알려주세요. 우선순위가 높은 사용자 요구사항에 집중해야 합니다. 다른 기능을 숨기거나 우선순위를 낮춤으로써 사용자가 ‘가장 중요하게 생각할 것'을 보여주세요.
예 : Google Flight는 주요 사용자 요구사항에 집중하기 위해 1) 직항편을 가장 먼저 보여주고 2) 가격 정보를 두드러지게 제공합니다. 여전히 다양한 정보를 제공하지만 주요하지 않은 정보는 회색으로 표시하고, 필터도 두드러지지 않습니다.
2. 유저가 생각하지 않게 하세요
사용자 경험이 단순해야 한다는 것은 가장 기본적인 개념이지만 쉽게 간과될 수 있습니다. 어수선한 것을 잘라내고 인지 부하를 최소화하세요. 유저가 정보에 압도되는 것을 막을 수 있습니다.
3. 핵심 액션이 클릭 3번으로 달성되게 하세요
포인트는 단일 핵심 액션 이 3번의 클릭 안에서 달성할 수 있어야 한다는 것입니다. 3클릭 사고방식이 모든 서비스에 적용되는 것은 아니지만, 이것은 우리의 서비스가 얼마나 고객 친화적인지를 판단할 수 있는 기준이 됩니다.
4. ‘되돌릴 수 있는’ 디자인을 하세요
우리는 모두 실수를 합니다. 그리고 실수를 되돌릴 수 없을 때 화가납니다. 여기서 말하는 리버시블 디자인은 단순히 ‘실행 취소' 버튼만을 말하는 것이 아닙니다.
예 :
- Trello 혹은 Notion의 갤러리 ui에서는 유저가 카드를 A열에서 B열로 옮겼다가 다시 A열의 원래 위치로 끌어올 수 있습니다.
- Intercom의 필터 ui에서는 유저가 필터를 추가했다가 삭제할 수 있는 작은 x 버튼이 있습니다.
- Google Drive ui에서는 유저가 파일을 삭제 했을 때 다시 undo 할 수 있는 토스트팝업을 제공합니다.
5. 액션의 컨텍스트를 알려주세요
모호한 용어는 인지 부하를 증가시킵니다. 유저가 올바른 조치를 취하고 있는지 확신을 주세요. 유저의 판단 소요 시간이 더 줄어듭니다.
- 버튼에 컬러를 사용하여 프로세스의 컨텍스트를 알려주세요. (예 : 메시지 삭제 팝업에서 [네, 이 메시지를 삭제할래요] 버튼에 컬러를 사용하여 강조)
- 컨텍스트에 맞고 모호하지 않은 버튼 문구를 사용하세요. (예 : [삭제] 버튼 대신 [네, 이 메시지를 삭제할래요] 버튼으로 제공)
6. 여백을 잘 사용하세요
여백을 잘 사용하면 투박한 디자인을 매끄럽게 끌어올릴 수 있습니다.
Wordpress의 경우 좌측에서는 세팅에 대한 다양한 메뉴를 제공하고 우측에서는 블로깅 프로세스에 필요한 기능들을 제공합니다. 하지만 실제로 블로그를 작성할 때, 즉 이 서비스의 핵심 액션을 수행할 때 이런 ui 구성은 매우 방해가 됩니다. Wordpresss는 ‘Distraction-free writing mode’를 제공하여 문제를 해결했습니다. 이 ‘방해 없이 쓰기 모드’에서는 모든 사이드바를 숨기고 쓰기 공간을 페이지의 중심 초점으로 제공합니다.
7. MVP 대신 MSP(Minimum Salable Product)
MSP가 MVP와 다른 점은 기능적인 면 뿐 아니라 유저가 느끼는 감정도 제품의 필수적 요소로 생각한다는 것입니다. 제품의 디자인은 사용자의 첫 인상을 결정합니다. Geoffrey Moore는 제품이 성공하려면 ‘얼리어답터'와 ‘대다수의 사람들' 사이에 존재하는 틈(chasm)을 잘 넘어야 제품이 확산된다고 말합니다. 사람들은 디자인이 좋으면 제품의 초기 결함을 슬쩍 넘겨버립니다.
디자인은 PM의 비밀무기입니다. 디자인을 디자이너에게만 맡겨두지 마세요. 제품 전략의 최전선에 디자인을 두고 시간을 내어 사용자가 서비스를 어떻게 느끼는지 확인하세요.
PM/PO
UX
프로덕트 전략
2022/05/19
주니어
중니어
데이터가 디자인을 결정하는 중요한 요소 중 하나가 되면서 디자이너에게도 데이터를 해석하는 능력이 요구되고 있습니다.
특히 제품에서 중요한 요소였던 ‘사용성’이 상향 표준화된 상황에서 더 나은 제품을 위해 디자이너의 데이터에 대한 이해는 불가피합니다. 또 처음부터 완벽한 제품이 아닌 출시를 빠르게 해서 계속해서 업데이트해가는 전략이 보편화된 상황이라면 데이터는 디자인에 큰 영향을 미치게 됩니다.
하지만 디자이너는 데이터를 보고 분석하는 일을 주로 하는 직무가 아닙니다.
그렇기에 디자이너는 문제를 해결하기 위해 어떤 데이터를 요청하고 데이터가 나타내는 숫자의 변화가 어떤 의미를 가지는지 파악하는 능력이 필요합니다. 즉, 데이터가 나타내는 추세를 파악하는 힘을 길러야 하는 것이죠.
그렇다면 디자이너가 웹사이트에서 파악해야 할 8가지 데이터에는 어떤 것들이 있을까요?
1. 페이지뷰: 페이지가 열람된 횟수
2. 순방문자 수: 특정 기간 동안 실제로 방문한 유저 수
3. 페이지뷰와 순방문자 수 증감 추세: 특정 기간에 페이지뷰가 늘었다면 순방문자도 같이 늘었는지 확인하여 어떤 원인이 있었는지 분석해 보기
- 여러 정보를 동시에 확인하고 그 연관성을 찾는 것도 중요
4. 세션: 웹사이트를 방문해서 이탈하기까지 사이트 내에서 페이지를 열람 또는 이동이 일어나지 않는 이벤트가 발생한 것을 의미
- 페이지뷰 당 세션 수: 사용자가 한 번 사이트에 방문할 때 몇 페이지나 열람하는지 확인
- 순방문자 수 당 세션 수: 사이트를 방문한 사용자의 사이트 이용 빈도를 비교할 수 있음
5. 전환율: 사이트에서 특정 행위(구매, 장바구니 담기 등)를 한 유저 비율
6. 이탈률: 한 페이지만 보고 벗어난 세션(방문) 행위 비율
7. 종료율: 모든 페이지 기준 1개 이상의 페이지를 보고 화면을 종료한 세션(방문) 행동 비율
- 종료율이 높다고 부정적인 신호인 것은 아님
- 회원가입 후 종료했다면 회원가입이라는 목표는 달성한 것이기 때문
8. 유입 경로: 페이지에 유입된 경로
1. 직접 유입: 직접 url 입력, 즐겨찾기로 이동
2. 추천 유입: 다른 사이트를 통해 유입, 초대 코드를 활용하기도 함
3. 검색 유입: 검색엔진을 통해 검색한 후 유입되는 경우
4. 소셜 유입: SNS를 통해 유입된 경우
하지만 이런 정량적인 데이터뿐만 아니라 정성적인 데이터를 함께 고려할 필요도 있습니다. 디자인은 경험에 대한 인지와 이해를 바탕으로 하기 때문이죠.
휴리스틱 개념
시간이나 정보가 불충분해서 합리적인 판단을 할 수 없거나, 굳이 체계적이고 합리적인 판단을 할 필요가 없다고 판단한 상황 속에서 신속하게 훑어보며 어림짐작하는 기술입니다.
[4가지 평가 방식]
제이콥 닐슨의 10가지 사용성 휴리스틱
아비 코버트의 10가지 IA 휴리스틱
웨인쉨크의 20가지 휴리스틱 분류
게르하르트-포월스의 10가지 인지 엔지니어링 원칙
[7가지 평가 기준]
#가시성 # 자연스러움 #통제성 #일관성 #적확성 #회복성 #가시성
5WHYS
5차례로 사용자에게 왜 그렇게 생각하는지 물으면서 사용성 문제의 원인을 파악하는 방법으로 사용성에 불편을 겪는 본질적 이유를 알아내면 디자인을 빠르게 개선할 수 있을 것입니다.
하지만 디자이너는 데이터를 보고 분석하는 일을 주로 하는 직무가 아닙니다.
그렇기에 디자이너는 문제를 해결하기 위해 어떤 데이터를 요청하고 데이터가 나타내는 숫자의 변화가 어떤 의미를 가지는지 파악하는 능력이 필요합니다. 즉, 데이터가 나타내는 추세를 파악하는 힘을 길러야 하는 것이죠.
그렇다면 디자이너가 웹사이트에서 파악해야 할 8가지 데이터에는 어떤 것들이 있을까요?
1. 페이지뷰: 페이지가 열람된 횟수
2. 순방문자 수: 특정 기간 동안 실제로 방문한 유저 수
3. 페이지뷰와 순방문자 수 증감 추세: 특정 기간에 페이지뷰가 늘었다면 순방문자도 같이 늘었는지 확인하여 어떤 원인이 있었는지 분석해 보기
- 여러 정보를 동시에 확인하고 그 연관성을 찾는 것도 중요
4. 세션: 웹사이트를 방문해서 이탈하기까지 사이트 내에서 페이지를 열람 또는 이동이 일어나지 않는 이벤트가 발생한 것을 의미
- 페이지뷰 당 세션 수: 사용자가 한 번 사이트에 방문할 때 몇 페이지나 열람하는지 확인
- 순방문자 수 당 세션 수: 사이트를 방문한 사용자의 사이트 이용 빈도를 비교할 수 있음
5. 전환율: 사이트에서 특정 행위(구매, 장바구니 담기 등)를 한 유저 비율
6. 이탈률: 한 페이지만 보고 벗어난 세션(방문) 행위 비율
7. 종료율: 모든 페이지 기준 1개 이상의 페이지를 보고 화면을 종료한 세션(방문) 행동 비율
- 종료율이 높다고 부정적인 신호인 것은 아님
- 회원가입 후 종료했다면 회원가입이라는 목표는 달성한 것이기 때문
8. 유입 경로: 페이지에 유입된 경로
1. 직접 유입: 직접 url 입력, 즐겨찾기로 이동
2. 추천 유입: 다른 사이트를 통해 유입, 초대 코드를 활용하기도 함
3. 검색 유입: 검색엔진을 통해 검색한 후 유입되는 경우
4. 소셜 유입: SNS를 통해 유입된 경우
하지만 이런 정량적인 데이터뿐만 아니라 정성적인 데이터를 함께 고려할 필요도 있습니다. 디자인은 경험에 대한 인지와 이해를 바탕으로 하기 때문이죠.
휴리스틱 개념
시간이나 정보가 불충분해서 합리적인 판단을 할 수 없거나, 굳이 체계적이고 합리적인 판단을 할 필요가 없다고 판단한 상황 속에서 신속하게 훑어보며 어림짐작하는 기술입니다.
[4가지 평가 방식]
제이콥 닐슨의 10가지 사용성 휴리스틱
아비 코버트의 10가지 IA 휴리스틱
웨인쉨크의 20가지 휴리스틱 분류
게르하르트-포월스의 10가지 인지 엔지니어링 원칙
[7가지 평가 기준]
#가시성 # 자연스러움 #통제성 #일관성 #적확성 #회복성 #가시성
5WHYS
5차례로 사용자에게 왜 그렇게 생각하는지 물으면서 사용성 문제의 원인을 파악하는 방법으로 사용성에 불편을 겪는 본질적 이유를 알아내면 디자인을 빠르게 개선할 수 있을 것입니다.UX
리서치
데이터 분석
지표
2022/05/17
주니어
사실 한국어 UX writing의 역사는 짧지 않습니다. 적어도 13년 전부터 초창기 네이버의 훌륭한 테크니컬 라이터 분들이 네이버의 스타일을 정리하셨고, 삼성과 LG휴대폰의 UX 조직에 규모 있는 UX writing팀이 있어 왔습니다.
UX writer, Contents designer들의 고요한 성정 때문인지 몰라도 UX, UI, CX에 대한 글에 비해 한국어 UX writing에 대한 글이나 책도 많지 않았습니다. 책 역시 참고할만한 것이 무척 적은 상황인데,
『웹 기획자가 알아야할 서비스 글쓰기의 모든 것』 (2016)
외에는 한국어 UX writing에 대한 레퍼런스가 될만한 책은 사실 없었어요.
Facebook, Instagram, Google 같은 글로벌 서비스를 매일 쓰지만 묘하게 그들의 텍스트가 우리의 언어 감각과는 안 맞는 것 같은 불편한 느낌, 느끼신 적 있나요? 또한 해외 사례를 한국에 도입하려해도 언어 특성상 어려운 지점이 분명 있습니다.
이런 한국어 UX writing 상황에 대해 하고 싶은 말, 나누고 싶은 경험들을 일단 글로 써서 지식을 나누며, 나름의 의견을 내고자 이 시리즈를 작성합니다.
매거진의 목차는 대략 이렇습니다.
일단 UX writing의 주요 원칙에 대해서 살펴보고, UI 텍스트와 각 컴포넌트별 레이블 작성법에 대해서도 간단히 이야기합니다. 실무에서 designer와 writer가 뭘로 투닥투닥하는지, 어떤 이슈가 우리들을 힘들게 하는지도 알아봅시다.
우리에겐 한국어 writing 사례가 필요하므로 마지막에는 제가 이용하고 있는 서비스들의 UI 텍스트들도 중간중간 분석하는 가벼운 챕터도 준비하고 있습니다.
-----------------------
매거진 본문 중 특히 흥미로운 글을 B2B 디자이너 커뮤니티에 소개합니다.
UI 텍스트 쓸 때 종종 등장하는 '-하기' 어미에 대해 어떻게 생각하시나요? 글쓴이는 먼저 '-하기'를 자제하자는 요지의 글을 올렸었는데, 일부 특정한 환경에서는 필요에 따라 '-하기'를 써도 좋겠다는 후속 글을 올렸습니다.
잘 정리된 글이지만 작성자 개인의 의견이므로, 이 글을 읽으시는 분들께서 여러 의견을 표출한다면 한국어 UX writing 발전에 도움이 되지 않을까 싶습니다.
'-하기'를 그만하기
https://brunch.co.kr/@joojun/101
'-하기'형, 버튼이 왜 이래 (서비스의 욕망이 살그머니 드러나는 지점)
https://brunch.co.kr/@joojun/113
[통합 요약]
- 서술형 명사 2음절만으로도 충분한데도 '-하기'를 붙여서 억지로 명사를 만들어 쓸 필요가 없다. '-하기'를 반복해서 쓰면 텍스트 간결성, 가독성, 의미변별성이 모두 나빠진다.
- 4음절 선호는 그저 익숙함 때문이다. 긴 버튼에서의 양쪽 여백이 신경쓰인다면 톤 앤 보이스를 살려서 문장형 버튼을 적용하는게 차라리 낫다.
- 필요한 순간, 쓰고 싶은 순간에는 '-하기'를 써라. 다만 모든 버튼을 '-하기', '-기'로 끝내려 하지는 말자.
- '-하기'는 '-음'이나 서술형 명사보다 사용자 스스로가 해당 액션을 다짐하는 듯한 인상을 주기 때문에 앱 제작자는 CTA에 적용하고 싶어지는 느낌이 들 수도 있다.
- 마켓컬리 앱은 1) 컨트롤러로써 동작하는 기능적인 버튼에서는 명사 형태로 쓰고, 2) 사용자의 액션을 강력하게 끌어와야 하는 버튼에 '-하기'를 쓴다.
- '-하기'는 워낙 은근한 장치이기 때문에 사용자의 선택에 결정적인 영향을 미치는 일은 없다고 본다.
- 다만 가능하면 구매, 구독, 결제와 같이 서비스 입장에서 중요한 버튼에만 드물게 '-하기'를 붙이면 좋겠다.
『웹 기획자가 알아야할 서비스 글쓰기의 모든 것』 (2016)
외에는 한국어 UX writing에 대한 레퍼런스가 될만한 책은 사실 없었어요.
Facebook, Instagram, Google 같은 글로벌 서비스를 매일 쓰지만 묘하게 그들의 텍스트가 우리의 언어 감각과는 안 맞는 것 같은 불편한 느낌, 느끼신 적 있나요? 또한 해외 사례를 한국에 도입하려해도 언어 특성상 어려운 지점이 분명 있습니다.
이런 한국어 UX writing 상황에 대해 하고 싶은 말, 나누고 싶은 경험들을 일단 글로 써서 지식을 나누며, 나름의 의견을 내고자 이 시리즈를 작성합니다.
매거진의 목차는 대략 이렇습니다.
일단 UX writing의 주요 원칙에 대해서 살펴보고, UI 텍스트와 각 컴포넌트별 레이블 작성법에 대해서도 간단히 이야기합니다. 실무에서 designer와 writer가 뭘로 투닥투닥하는지, 어떤 이슈가 우리들을 힘들게 하는지도 알아봅시다.
우리에겐 한국어 writing 사례가 필요하므로 마지막에는 제가 이용하고 있는 서비스들의 UI 텍스트들도 중간중간 분석하는 가벼운 챕터도 준비하고 있습니다.
-----------------------
매거진 본문 중 특히 흥미로운 글을 B2B 디자이너 커뮤니티에 소개합니다.
UI 텍스트 쓸 때 종종 등장하는 '-하기' 어미에 대해 어떻게 생각하시나요? 글쓴이는 먼저 '-하기'를 자제하자는 요지의 글을 올렸었는데, 일부 특정한 환경에서는 필요에 따라 '-하기'를 써도 좋겠다는 후속 글을 올렸습니다.
잘 정리된 글이지만 작성자 개인의 의견이므로, 이 글을 읽으시는 분들께서 여러 의견을 표출한다면 한국어 UX writing 발전에 도움이 되지 않을까 싶습니다.
'-하기'를 그만하기
https://brunch.co.kr/@joojun/101
'-하기'형, 버튼이 왜 이래 (서비스의 욕망이 살그머니 드러나는 지점)
https://brunch.co.kr/@joojun/113
[통합 요약]
- 서술형 명사 2음절만으로도 충분한데도 '-하기'를 붙여서 억지로 명사를 만들어 쓸 필요가 없다. '-하기'를 반복해서 쓰면 텍스트 간결성, 가독성, 의미변별성이 모두 나빠진다.
- 4음절 선호는 그저 익숙함 때문이다. 긴 버튼에서의 양쪽 여백이 신경쓰인다면 톤 앤 보이스를 살려서 문장형 버튼을 적용하는게 차라리 낫다.
- 필요한 순간, 쓰고 싶은 순간에는 '-하기'를 써라. 다만 모든 버튼을 '-하기', '-기'로 끝내려 하지는 말자.
- '-하기'는 '-음'이나 서술형 명사보다 사용자 스스로가 해당 액션을 다짐하는 듯한 인상을 주기 때문에 앱 제작자는 CTA에 적용하고 싶어지는 느낌이 들 수도 있다.
- 마켓컬리 앱은 1) 컨트롤러로써 동작하는 기능적인 버튼에서는 명사 형태로 쓰고, 2) 사용자의 액션을 강력하게 끌어와야 하는 버튼에 '-하기'를 쓴다.
- '-하기'는 워낙 은근한 장치이기 때문에 사용자의 선택에 결정적인 영향을 미치는 일은 없다고 본다.
- 다만 가능하면 구매, 구독, 결제와 같이 서비스 입장에서 중요한 버튼에만 드물게 '-하기'를 붙이면 좋겠다.
UX Writing
2022/05/12
신입
주니어
접근성은 디자이너의 책임이다
시력과 청력에 지장이 없고 쉽게 읽고 쓸 수 있는 사람이 인구의 약 50% 정도 밖에 안된다는 걸 알고 있었나요? 디자인 단계에서 몇 가지 간단한 원칙을 지키는 것 만으로도 전반적인 UX를 개선할 수 있습니다. 이것을 '인클루시브 디자인(Inclusivie Design)' 이라고 합니다.
인클루시브 디자인이란?
- 가능한 한 많은 사람들의 니즈와 능력을 고려하는 디자인. 문제가 생기기 전 해결하여 좋은 프로덕트의 기준을 높이고 바꾸는걸 목표로함
- POUR (Percivable Operable Understandable Robust)을 참조
-- Percivable: 디지털 콘텐츠를 쉽게 다양한 방식으로 해석하거나 처리할 수 있는지?
-- Operable: 프로덕트를 복잡하지 않게 쉽게 작동하고 제어할 수 있는지?
-- Understandable: UI의 기능과 정보를 이해할 수 있는지?
-- Robust: 프로덕트가 다양한 보조 기술과 장치와 호환이 되는지?
디자이너가 어떻게 접근성을 향상 시킬 수 있을까? (원문 링크에 각 항목에 대한 적절한 예시와 설명이 자세히 나와있으니 꼭 한번 확인해보세요!)
1, 시각적 경험: 모양, 컬러, 대비, 텍스트 스타일 등의 모든 그래픽 요소
- 명암비: AAA (접근성 최고 수준)을 달성하려면 7:1의 명암비가 필요함
- 명도: 밝은 색상일 수록 빛을 반사하여 정보를 읽고 처리하는 능력을 방해함. Yellow 가 50% 이상 표함된 색상은 더많은 빛을 반사함.
- 색맹: coolors.co (지정한 팔레트가 색맹에게 어떻게 보이는지 보여주는 사이트)
* 색상을 중요한 메세지를 전달하는 유일한 방법으로 쓰지 말 것.
- 타이포 그라피: 14px 아래로 사용하지 않을 것. 줄 간격은 2.0을 초과하지 말 것.
2. 청각적 경험: 제품 인터렉션 시 생기는 소리, 볼륨 및 선명도
3. 인지적 경험: 인터페이스를 해석하는데 소비하는 시간
- 인식: 사람들의 인식은 연령, 접근성, 멘탈모델, 문화에 따라 다를 수 있으므로 실제 사용자와 함께 효율성을 테스트 하여 디자인을 결정하는 것이 중요함.
- 시각적 계층 구조: 사용자가 쉽게 콘텐츠를 탐색하고 발견할 수 있도록 배열
- 상호작용: 너무 많은 옵션을 제공하지 않고 (최대 5개) 의사 결정 속도를 줄이기. 애니메이션 및 gif는 꼭 필요한 경우에만 사용하기. 피드백을 통해 사용자에게 확실성과 통제감을 주기.
4. 모터 경험 향상: 프로덕트와 상호작용하는 데 필요한 모든 동작과 움직임
- 피츠의 법칙: 사용자와 대상 사이의 거리를 줄이고 크기를 늘리기
- 공백: 사용자와 UI간의 명확한 인터렉션에 도움이됨.UX
접근성
2022/05/10
주니어
중니어
더 나은 알림 디자인을 통한 더 나은 사용성
알림은 제품 사용성에 주요한 기능입니다.
'시스템 상태의 가시성' 은 Nielsen Norman Group의 "사용자 인터페이스 디자인을 위한 10가지 사용성 휴리스틱" 목록에서 첫번째 항목 입니다. 이 규칙은 "시스템은 적절한 시간 내에 적절한 피드백을 통해 사용자에게 무슨 일이 일어나고 있는지에 대한 정보를 항상 제공해야 한다."라고 말합니다.
알림 시스템은 디지털 제품 UX의 많은 부분을 차지하므로, 알림 시스템이 없으면 제품은 마치 무언가가 빠진 것처럼 느껴질 것입니다. '시스템 상태의 가시성'과 피드백이 없다면 대시보드 없이 자동차를 운전하는 것과 같습니다.
모든 유형의 알림은 디지털 제품에서 없어서는 안될 부분입니다.
유용한 알림 프레임워크 구축하기
알림 디자인을 나중에 생각하지 마세요
우리는 작지만 중요한 UX개선사항을 마지막으로 생각하는 경향이 있습니다. 경고, 오류메시지, 확인, 공지 등의 알림 디자인은 나중에 생각하는 경우가 많습니다. 이러한 접근방식은 UX를 손상시키는 조잡한 프랑켄슈타인과 같은 결과물을 만들기도 합니다.
이러한 상황을 피하려면 알림 디자인에 대한 통합 접근 방식을 사용해 제품 디자인 프로세스의 초기에서 부터 사용자 경험을 향상시켜야합니다.
'주의 수준'으로 알림을 분류하세요
알림 프레임워크를 잘 설계하려면 알림을 '주의 수준' 측면에서 생각하는 것이 도움이 될 수 있습니다. 예를 들어 테스크를 수행하는데에 큰 방해가되는 문제에는 "강력한 알림"이 필요하고, 그렇지 않은 경우에는 "조용한 알림"이 필요합니다.
알림 디자인에 대한 초기 접근 방식은 [높음, 중간, 낮음]의 세가지 수준으로 분류해보세요. 그 다음 경고, 확인, 오류, 성공메시지 등 특정 속성 내에서 추가로 유형을 정의할 수 있습니다.
높은 주의
Alerts 즉각적인 주의 필요
Errors 즉시 조치 필요
Exceptions 시스템 이상으로 무언가 작동하지 않음
Confirmations 진행하려면 사용자 확인이 필요해 잠재적인 주의요인
중간 주의
Warnings 즉각적인 조치가 필요하지 않음
Acknowledgments 사용자 작업에 대한 피드백
Success messages 성공 메시지
낮은 주의
Informational messages 볼 수 있게 준비된 항목
Badges 일반적으로 아이콘 위에 노출되며 마지막 상호작용 이후 새로운 것을 표시함
Status indicators 시스템 피드백
알림 유형에 맞는 디자인 시스템을 설계하세요
알림 목록이 준비되면 다음 단계는 원하는 주의 수준과 속성에 따라 알림을 분류하는 것입니다. 알림은 방해가 되어서는 안 되므로 신중하게 수행해야 합니다. 아래 질문에 따라 알림을 유형화하고 이에 맞는 색상코드, 아이콘, 위치, 동작 등 상세한 UX와 알림 디자인 시스템을 설계하세요. 이 과정에서 디자이너는 알림이 표시되는 모든 상황과 예외케이스들을 고려할 수 있어야합니다.
알림을 트리거하는 것은 무엇입니까?
어떤 유형의 피드백이 전달되고 있습니까?
알림은 어디에 어떻게 표시됩니까?
즉각적인 상호 작용이 필요한 알림은 무엇입니까?
알림이 지속적입니까 아니면 비지속적입니까?
사람들에게 적절한 양의 알림을 보내는것은 균형을 유지하는 작업이며, 이를 과도하게 사용되면 위험이 따릅니다.
과도한 알림이 사용되는 경우 제품에 대해 부정적인 피드백을 받을 수도 있고 최악의 경우 제품을 포기하는데에도 영향을 미칠 수 있습니다.
알림을 사용하는 시기와 방법을 이해하는 것은 뛰어난 사용성을 제공하고 제품 메시지의 일관성을 구축하는 데 필수적입니다. 적절한 순간에 표시되어야 하는 주변 메시지를 신중하게 평가함으로써 디자이너는 제품의 효율성을 높이고 UX를 향상시킬 수 있습니다.UX
프로덕트 전략
2022/05/09
주니어
중니어
기획자
B2B 앱이 해결하려는 문제가 복잡할 수는 있지만 솔루션이 복잡할 필요는 없습니다. 사용자는 프로덕트 팀이 마주하는 문제에 관심이 없습니다. 단지 앱이 단순한지, 그것이 문제 해결을 더 쉽게 만들어주는지를 알고자 합니다.
B2C 앱 디자인에 널리 사용되는 행동 경제학 및 마케팅 심리학을 사용하여 앱을 간소화하고 관여도를 높일 수 있습니다.
default 값 정의를 신중하게 하자
'넛지'라는 책은 사람들이 비합리적이라고 이야기합니다. B2B 앱 제작자는 사용자가 풍부한 복잡성을 뚫고 모든 일을 처리할 거라 가정하지만, '넛지'는 너무 많은 선택이 장애가 될 수 있다고 합니다. 책 저자들의 연구에 따르면 너무 많은 옵션이 제시되면 사람들은 선택을 시스템에게 맡깁니다.
프로덕트 팀은 기본 옵션을 변경하여 원하는 방향으로 "넛지"할 수 있습니다. 이것을 "선택 아키텍처"라고 합니다. 사용자 선택을 줄이며 결정하기까지 길을 안내하도록 인터페이스를 설계합니다.
게임 메커니즘 사용하기. Gamification
사람들이 비용을 지불하고 쌓아둔 마일리지의 대부분은 사용되지 않습니다. 기업은 사람들이 마일리지를 쌓는 성취 자체를 보상으로 여기고 이 게임을 좋아한다는걸 알고 있습니다.
행동경제학에서는 목표 달성에 가까워졌을 때 더 열심히 일할 동기가 생긴다는 말이 있습니다. 이는 결과가 사용자에게 특히 흥미롭지 않거나 사용자가 생산성 혁신을 달성하기까지 몇 달이 걸릴 수 있는 B2B 앱에서 특히 두드러집니다.
그 효과를 극대화하기 위해 프로덕트 팀은 '게임' 결과만 공개하면 됩니다. B2B에서 이것은 인증과 같은 보상을 제공하고 받는 사람에게 명성을 주는 것을 의미합니다. 이는 고급 사용자에게 상을 제공하고 컨퍼런스에서 연설하도록 초대하는 것을 의미합니다.
사회적 증거가 있는 가이드
나이트클럽에는 왜 항상 줄이 있는 것 같습니까? 꽤 의도적입니다. 클럽이 붐비는 것처럼 보이려고 경비원은 줄을 세웁니다. 버지니아 주 전기세 고지서에 이웃 주민들이 절약한 전력량을 표시하기 시작한 이후 30억 kw/h의 에너지가 절약되었습니다. B2B 제품 팀은 이러한 경향을 사용하여 사용자를 넛지할 수 있습니다.
예를 들어, 사용자에게 새로운 기능을 알릴 때 제품 팀은 다른 사람들이 그것을 시도하고 좋아했음을 알려야 합니다.
사회적 증거 예시 몇 가지:
- 총 고객 수 또는 비율
- 인식 가능한 브랜드의 이름 또는 로고
- 고객 만족도 또는 업계 전문가의 후기
- 인증 기관의 승인 마크
- 신뢰할 수 있는 출처의 연구 또는 통계
긍정적인 인상을 극대화하는 UX 디자인
많은 호텔이 최근들어 결제 절차를 바꾸고 있습니다. 마지막에 결제를 받는 대신 체크인 시 결제를 사전 승인합니다. 왜일까? 나쁜 느낌이 오래 지속된다는 '최신성 원칙'을 호텔이 배웠기 때문입니다.
행동 심리학자의 연구를 인용한 McKinsey는 "고객은 제품이나 서비스를 사용한 후 며칠, 몇 주, 몇 달이 지나면 고객 여정의 모든 개별적인 측면이 아니라 높은 지점과 낮은 지점을 불균형적으로 기억하는 경향이 있다"라고 썼습니다.
B2B 앱 디자이너에게 사용자 여정 순서를 변경할 수 있는 기회는 무한합니다. 제품 분석과 사용자 인터뷰를 혼합하여 사용자 여정에서 낮은 지점을 식별할 수 있습니다. 디자이너가 문제를 해결할 수 없다면 최소한 낮은 지점이 경험 중간에 발생하거나 고르게 퍼지도록 해야 합니다.
default 값 정의를 신중하게 하자
'넛지'라는 책은 사람들이 비합리적이라고 이야기합니다. B2B 앱 제작자는 사용자가 풍부한 복잡성을 뚫고 모든 일을 처리할 거라 가정하지만, '넛지'는 너무 많은 선택이 장애가 될 수 있다고 합니다. 책 저자들의 연구에 따르면 너무 많은 옵션이 제시되면 사람들은 선택을 시스템에게 맡깁니다.
프로덕트 팀은 기본 옵션을 변경하여 원하는 방향으로 "넛지"할 수 있습니다. 이것을 "선택 아키텍처"라고 합니다. 사용자 선택을 줄이며 결정하기까지 길을 안내하도록 인터페이스를 설계합니다.
게임 메커니즘 사용하기. Gamification
사람들이 비용을 지불하고 쌓아둔 마일리지의 대부분은 사용되지 않습니다. 기업은 사람들이 마일리지를 쌓는 성취 자체를 보상으로 여기고 이 게임을 좋아한다는걸 알고 있습니다.
행동경제학에서는 목표 달성에 가까워졌을 때 더 열심히 일할 동기가 생긴다는 말이 있습니다. 이는 결과가 사용자에게 특히 흥미롭지 않거나 사용자가 생산성 혁신을 달성하기까지 몇 달이 걸릴 수 있는 B2B 앱에서 특히 두드러집니다.
그 효과를 극대화하기 위해 프로덕트 팀은 '게임' 결과만 공개하면 됩니다. B2B에서 이것은 인증과 같은 보상을 제공하고 받는 사람에게 명성을 주는 것을 의미합니다. 이는 고급 사용자에게 상을 제공하고 컨퍼런스에서 연설하도록 초대하는 것을 의미합니다.
사회적 증거가 있는 가이드
나이트클럽에는 왜 항상 줄이 있는 것 같습니까? 꽤 의도적입니다. 클럽이 붐비는 것처럼 보이려고 경비원은 줄을 세웁니다. 버지니아 주 전기세 고지서에 이웃 주민들이 절약한 전력량을 표시하기 시작한 이후 30억 kw/h의 에너지가 절약되었습니다. B2B 제품 팀은 이러한 경향을 사용하여 사용자를 넛지할 수 있습니다.
예를 들어, 사용자에게 새로운 기능을 알릴 때 제품 팀은 다른 사람들이 그것을 시도하고 좋아했음을 알려야 합니다.
사회적 증거 예시 몇 가지:
- 총 고객 수 또는 비율
- 인식 가능한 브랜드의 이름 또는 로고
- 고객 만족도 또는 업계 전문가의 후기
- 인증 기관의 승인 마크
- 신뢰할 수 있는 출처의 연구 또는 통계
긍정적인 인상을 극대화하는 UX 디자인
많은 호텔이 최근들어 결제 절차를 바꾸고 있습니다. 마지막에 결제를 받는 대신 체크인 시 결제를 사전 승인합니다. 왜일까? 나쁜 느낌이 오래 지속된다는 '최신성 원칙'을 호텔이 배웠기 때문입니다.
행동 심리학자의 연구를 인용한 McKinsey는 "고객은 제품이나 서비스를 사용한 후 며칠, 몇 주, 몇 달이 지나면 고객 여정의 모든 개별적인 측면이 아니라 높은 지점과 낮은 지점을 불균형적으로 기억하는 경향이 있다"라고 썼습니다.
B2B 앱 디자이너에게 사용자 여정 순서를 변경할 수 있는 기회는 무한합니다. 제품 분석과 사용자 인터뷰를 혼합하여 사용자 여정에서 낮은 지점을 식별할 수 있습니다. 디자이너가 문제를 해결할 수 없다면 최소한 낮은 지점이 경험 중간에 발생하거나 고르게 퍼지도록 해야 합니다.UX
마케팅
심리학
2022/04/29
신입
주니어
Getfeedback 이라는 서비스에서 SaaS 기업이 고객 여정 지도를 그려야하는 이유와 이점 등을 작성한 내용입니다. 물론 SaaS 기업이 아니더라도 참고할 만한 내용이 많습니다.
1. 고객 여정 지도를 만드는 방법
- 고객 여정 라이프사이클 그리기
- 잠재 고객 → 충성고객이 되기까지 일반적인 단계
- 1. 발견 - 2. 탐구 - 3. 구입 - 4. 사용 - 5. 물어보기 - 6. 관여
- 회사 및 고객 접점(touch point: 터치포인트) 식별
- 각 단계에서 무슨 일이 일어나고 있는지 확인
- 고객의 조치 - 동기 - 질문 - 장벽
- 각 접점에서 고객의 경험과 감정을 이해하는데 도움
- 기존 전략과 기대 사이의 격차 분석
2. SaaS 기업을 위한 고객 여정 지도
- SaaS 회사는 복잡한 고객 여정을 가짐
- 고객은 여정의 단 하나의 접점에도 불만을 품는 경우, 다른 옵션을 많이 선택할 수 있음
- 대부분의 SaaS 회사는 구독 모델에 의존
- 높은 이탈률을 피하기 위해 고객 경험을 지속적으로 개선하고 향상시켜야.
3. SaaS에서 여정 지도의 관련성
- SaaS 구매 프로세스에만 평균 6.8명이 포함
- SaaS 제품은 단 한 사람으로 인해 조직 전체가 경쟁업체로 전환되어 상당한 수익 손실을 입을 수도 있음.
- 고객 여정은 처음부터 끝까지 최고 수준이어야 이탈 감소.
4. SaaS 고객 여정 지도의 이점
- 조직 전체에서 효과적으로 의사 소통하는데 중요
- 현재 상태와 최적의 상태에 대한 이해를 공유하기 쉬움
- 모든 도구에서 추적, 기여 및 동기화하는데 필요한 데이터를 정의
- 1:1 개인화된 경험을 대규모로 확장할 수 있는 방법을 간략하게 설명
5. 다뤄야할 질문
- 내 사용자는 누구인가?
- 소프트웨어에는 다양한 종류의 사용자가 있을 수 있음
- 각 사용자는 제품이 충족해야 하는 특정 요구 사항을 가지고 있음
- 도구와 "실제" 세계 사이의 인터페이스는 무엇입니까?
- 소프트웨어가 어떤 맥락에서, 어떻게 사용되는지 이해하는데 중요한 질문
- 사람들과 기업이 소프트웨어를 구매하고 운영하는 방법과 관련된 조건들은 무엇입니까?
- 사용자의 소프트웨어 온보딩을 어떻게 지원할 수 있습니까?
- 온보딩은 SaaS 고객 여정에서 특히 중요한 부분
- 도구를 사용할 사람들에게 도구를 소개하고 효과적으로 사용할 수 있도록 교육
UX
프레임워크
리서치
2022/04/05
기획자
SaaS 제품 담당자
UX의 확증 편향
사람들은 자신의 생각이 옳다는 것을 확인하고 싶어하고 반대되는 의견을 과소 평가하려는 경향이 있습니다. UX 디자인 시, 적절한 리서치 방법론을 활용한다면 확증 편향을 사전에 인지하고 피할 수 있습니다. 우리가 맞다고 생각하는 것들을 선호하고 사실과 증거를 무시하는 건 사용자에 대한 공감과 진정한 것을 찾는데에 방해가 됩니다.
UX 분야 종사자들이 확증 편향에 대해 주의해야하는 이유
디자인과 사용자에 대해 '가정'을 하기 때문에 더욱 경계해야한다. 디자인을 만들기 위해 몇달 동안 노력했다면 자신의 디자인이 괜찮다는 증거를 믿을 가능성이 높고, 문제가 있다는 결과에 대해서는 회의적일 것이다. 확증 편향은 사용자와 공감하는 능력에 부정적인 영향을 미치고, 잘못된 설계 및 연구로 이어져 피드백 및 결과에 대해 잘못된 해석을 유발할 수 있다.
예를 들어, 전자 상거래 사이트에서 매출이 낮은 이유가 '결제하기 버튼의 잘못된 설계' 때문이라고 가정함. 다음과 같은 질문을 실행하기로 함.
"빨간색의 결제하기 버튼이 찾기 어려웠나요?"
이 질문에는 몇가지 문제점이 내포되어있다.
1. 결제하기 버튼에 초점을 맞추면 이것에 대한 증거만 수집하도록 편향된다. 결제 프로세스에서 '버튼'이 진짜 문제가 아닐 수 있다.
2. 질문에서 부정적인 언어('찾기 어렵다')는 사용자가 이 버튼이 정말 효과적인지 아닌지 보다 '문제'에 대해 생각해보게 한다.
3. 폐쇄형 질문 (예/아니오, 혹은 주어진 문항을 선택하는 질문을 뜻함. 반대되는 개념은 어떤 방식으로도 대답할 수 있는'개방형 질문'임)은 사용자의 실제 경험과 발생한 문제에 대해 컨텍스트를 제공할 여지를 주지 않는다.
그렇다면 적절한 질문은 무엇일까?
"결제 과정은 어땠나요? 그 과정에서 좋았던 점 혹은 나빴던 점을 설명해주세요."
UX 확증 편향을 방지하는 팁
1. 검증 보다 연구
- 가설을 '검증' 하려기 보다 '테스트'를 목표로 하기. 연구의 목표는 내 가정이 맞다는 걸 확인하는게 아니라 미리 알지 못했던 걸 아는 것이다. 디자이너는 민첩해야한다. 잘못된 길을 가고 있다면 이를 빠르게 인식할 수 있어야함.
2. 초기 데이터 수집
- 가능한 한 타겟 사용자로부터 실증적인 데이터를 빨리 얻으면 얻을 수록 데이터를 분석하고 결과에 따라 행동 했을 때 편향되지 않을 수 있다.
3. 편견없는 질문 하기
- 사용자에게 피드백을 수집할 때 결정적이고 중요한 질문을 하지 말 것. 그 질문을 함으로써 사용자가 해당 이슈 대해 민감하게 느끼는 역효과가 나타난다. 사용자가 질문을 받았을 때 내 가설이 무엇인지 예측 가능할 경우 질문을 바꾸는 것이 좋다.
4. 삼각 측량 기법을 사용
- 하나의 연구 결과만 본다면 자신의 가설과 일치 시키기 위해 결과를 쉽게 바꿀 수 있다. 여러 연구를 통해 얻은 데이터를 사용하면 훨씬 어렵다. 다양한 연구를 통해 신뢰성을 높이고 확증 편향을 방지하기.
5. 연구 계획 및 분석에 대해 새로운 시각을 가진 사람들을 참여 시킬 것.
- 프로젝트와 관련없는 동료에게 연구 계획 검토 요청을 하고 결과 발표에 참석하게 할 것. 새롭고 중립적인 관점을 제시해줄 수도 있다.마인드셋
UX
심리학
2022/04/04
주니어
중니어
[성장을 위한 데일리 아티클] '워크 프로세스'
Meta에서 일하는 것이 프로덕트 디자이너에 대한 이해를 어떻게 변화시켰는가?
Meta에서 1년 동안 일하면서 저는 여전히 디자이너들이 직면한 도전에 대해 큰 감사를 표하지만 디자인이 어떻게 작동할 것인지에 대한 생각을 넘어 목적을 이해하게 되었습니다.
1. 당신이 디자인하는 것이 이미 있다면 그것은 새로운 것이 아닙니다.
저는 직전 회사에서 Meta보다 훨씬 더 넓은 범위의 업무를 수행했습니다. 그러나 그곳에서 진행한 디자인은 새로운 것은 아니었습니다. 물론 엔지니어링 한계, 기능 등의 약간의 차별점은 있었지만 이미 그 디자인은 무엇을 위한 것인지 차별점이 없어도 알 수 있었습니다.
즉, 제품 디자이너가 되기 위해서는 일반적으로 인정받는 구성 요소가 무엇인지, 어떤 역할을 하는지 알아야 합니다. 그래야 사용자가 제품을 사용할 때 쉽게 사용할 수 있습니다. 인지하고 있는 프로덕트 표준에서 벗어나지 않고 익숙한 사용성을 설계하는 것을 의미합니다. 그리고 항상 훌륭한 프로덕트 디자이너의 디자인이 집단적으로 어떻게 작용하는지 이해해야 한다고 느꼈습니다.
2. 가장 어려운 부분은 사람들이 입증하지 않은 개념에 동의하도록 하는 것입니다.
세계 기술 제품을 선도하고 있는 Meta에서는 항상 새로운 디자인을 하고 있습니다. 저는 개인 정보 보호 규정을 준수하는 새로운 비즈니스 솔루션 설계뿐만 아니라
책임감 있고 개인 정보 보호 중심적인 경험을 우선시하는 솔루션을 설계해야 했습니다. 또한 사용자와 비즈니스 모두에 가치를 제공해야 했습니다.
어떻게 하면 많은 단어 없이 새로운 기능을 사람들에게 이해시킬 수 있을까요? 여러분은 그들에게 이야기를 들려줄때, 비주얼이 뒷받침하는 설득력이 있는 이야기를
해야 합니다. 그러고 나서야, 그들은 어떻게 작동하는 것인지 질문을 하게 될 것입니다.
3. 정확한 작동 방식을 알지 못하고 설계하는 것은 일부입니다.
누군가가 텍스트 링크를 누르면 어떤 내용이 표시되는지 물어보면, 저는 시각적으로 보여주지 않고 "링크를 클릭하면 허브로 이동하여 관련 세부 정보를 볼 수 있습니다."라고 개념적으로 설명할 수 있습니다. 즉, 중요하지 않다면 모든 화면을 디자인할 필요는 없습니다.
전에 보지 못한 제품을 전달하고 디자인할 수 있는 능력은 제품 디자이너를 성공으로 이끄는 것입니다. 대부분의 경우, 컨셉 보드를 만들어야 했지만, 사실 일반적으로 컨셉작업은 최종결과물이 아니라 단순히 아이디어를 보여주는 방법입니다. 그 후에 독특한 엔지니어링 문제를 팀원들과 함께 최선의 방법을 찾습니다.
Conclusion
저는 운 좋게도 Meta에 있게 되었습니다. 이곳에선 새롭고 이름없는 컨셉들을 연구할 기회가 있습니다. 성공적인 프로덕트 디자이너가 되러면 모든 것을 처음부터 끝까지 봐야 한다고 생각했습니다. 이름이 없는 새로운 제품의 경우, 아직 작업할 팀조차 없을 수 있기 때문에 모든 구성요소를 알 수 없습니다.
또한 컨셉 설계의 목표는 이해관계자들이 시간과 노력을 투자하는 데 관심을 가질 만한 것인지 확인하는 것입니다. 그리하여 저는 Meta에서 스토리텔링 컨셉 작업이 UI/UX디자이너와 역할을 차별화하고 제품을 제품 디자이너로 만드는 요소라는 것을 배웠습니다.마인드셋
UX
워크플로우
경험 공유
2022/03/28
중니어
주니어
UX 디자이너들은 사용자에게 긍정적인 경험을 주기 위해 다양한 부서와 이해관계자들과 협업하며 자신의 디자인과 비지니스 전략이 일치하는지 확인합니다. 협업은 좋은 디자인으로 이어질 수 있지만 디자인의 일관성 문제, 접근성의 격차 등의 어려움을 겪을 수 있습니다. 이런 이유로 정기적인 디자인 검수를 계획하여 제거해야할 차이들을 찾고 측정하고 해결하는 것이 중요합니다.
디자인 검수란?
- 디자인 검수란 품질 보증 (Quality Assurance, 많이들 알고 있는 'QA')을 의미함. UX 관점에서 프로덕트가 접근성, UI 컴포넌트의 일관성 및 디자인 통합 요구사항을 충족하는지 평가함. 이 과정을 통해 디자이너들은 이전에 발견하지 못했던 이슈나 다음 디자인 스프린트에서 해결되어야할 이슈를 찾을 수 있다.
디자인 검수 과정에서 발견되는 흔한 이슈들
- 스크린 리더 사용자에게 필요한 이미지 대체 텍스트 누락
- 일관성 없는 폰트 타입 및 사이즈 사용
- 네비게이션 링크 누락
- 업데이트가 안된 구 콘텐츠
- 적절하지 않은 컴포넌트 사용 패턴
- 접근성 요건을 충족하지 않는 브랜드 컬러와 동떨어진 컬러 사용
- 레이아웃의 기준이 없어 컴포넌트 배치가 어수선하고 삐딱함
디자인 검수는 언제 해야 할까?
- 최대한 자주, 정기적으로 할 것.
- 디자인 검수를 미루면 미룰수록 이슈가 문제를 만들 가능성이 높아져 디자인 과정에서 해결하기 어려워짐.
웹사이트 디자인 검수 시 사용되는 방법들
10가지 사용성 휴리스틱
1) 시스템의 가시성
2) 현실세계와 부합 하도록 설계
3) 사용자에게 적절한 통제권을 부여
4) 일관성과 표준성 높이기
5) 사용자 실수 방지
6) 적은 인지적 노력
7) 유연하고 효과적인 사용성
8) 심미적이고 미니멀한 디자인
9) 사용자 스스로 오류를 인지하고 벗어날 수 있도록 설계
10) 충분한 도움말 제공
( 각 항목에 대한 더 자세한 내용 아래 아티클들 참고해보시면 좋아요.
- 닐슨&노먼 그룹 아티클 참고: http://abit.ly/0v8cec
- 국문은 이 브런치 추천 드립니다: https://brunch.co.kr/@hyoi0303/53 )
접근성 가이드라인
- 모든 사람들이 디자인을 사용할 수 있도록 설계되는 건 중요하다.
- 회사 내부에 접근성 지침이 없다면 'W3C 접근성 표준'을 참고 하는 것도 방법이다. (https://abit.ly/4njwod)
프로토 타이핑 도구를 활용해 UI 컴포넌트의 연속성과 일관성 유지하기
- 프로토타이핑 도구를 활용한 사용성 테스트를 통해 UI 구성 요소 패턴을 테스트 하기
스타일 가이드 라인 준수
- 프로덕트의 look&feel 과 Tone&Manner 에 대한 지침을 제공하는 문서를 잘 지키면 일관된 사용자 경험을 제공할 수 있다.
UX 검수 템플릿
- UX 검수 템플릿을 구축하여 팀에게 인사이트를 제공하는 것이 중요하다. 아래 항목들을 스프레드 시트의 열 제목 사용해서 각 문제들을 평가해보기.
1) 문제 설명: 무엇이 문제인지
2) 문제 위치: 문제가 어디서 발생하는지
3) 사용성 휴리스틱: 어떤 휴리스틱 요건이 충족되지 않는지?
4) 접근성: 접근성 문제인가? 예/아니오
5) 사용자에게 미치는 영향도: 얼마나 심각한 영향인지? 높음/중간/낮음
6) 디자인 수정 규모: 수정하는데 노력은 얼마나 드는지? 높음/중간/낮음
7) 개발 규모: 디자인 수정을 위해 개발 리소스는 얼마나 드는지? 높음/중간/낮음
8) 우선 순위: 위의 항목들 결과를 토대로 전체 우선 순위 설정하기
UX 검수로 얻는 인사이트
- UX 검수에서 가장 가치 있는 부분은 팀에서 다양한 관점으로 논의하고 합의한 UX 평가 기준으로 프로덕트을 평가 할 때 이루어 진다. 문제에 대한 계획을 좀 더 수월하게 할 수 있다.
디자인 검수란?
- 디자인 검수란 품질 보증 (Quality Assurance, 많이들 알고 있는 'QA')을 의미함. UX 관점에서 프로덕트가 접근성, UI 컴포넌트의 일관성 및 디자인 통합 요구사항을 충족하는지 평가함. 이 과정을 통해 디자이너들은 이전에 발견하지 못했던 이슈나 다음 디자인 스프린트에서 해결되어야할 이슈를 찾을 수 있다.
디자인 검수 과정에서 발견되는 흔한 이슈들
- 스크린 리더 사용자에게 필요한 이미지 대체 텍스트 누락
- 일관성 없는 폰트 타입 및 사이즈 사용
- 네비게이션 링크 누락
- 업데이트가 안된 구 콘텐츠
- 적절하지 않은 컴포넌트 사용 패턴
- 접근성 요건을 충족하지 않는 브랜드 컬러와 동떨어진 컬러 사용
- 레이아웃의 기준이 없어 컴포넌트 배치가 어수선하고 삐딱함
디자인 검수는 언제 해야 할까?
- 최대한 자주, 정기적으로 할 것.
- 디자인 검수를 미루면 미룰수록 이슈가 문제를 만들 가능성이 높아져 디자인 과정에서 해결하기 어려워짐.
웹사이트 디자인 검수 시 사용되는 방법들
10가지 사용성 휴리스틱
1) 시스템의 가시성
2) 현실세계와 부합 하도록 설계
3) 사용자에게 적절한 통제권을 부여
4) 일관성과 표준성 높이기
5) 사용자 실수 방지
6) 적은 인지적 노력
7) 유연하고 효과적인 사용성
8) 심미적이고 미니멀한 디자인
9) 사용자 스스로 오류를 인지하고 벗어날 수 있도록 설계
10) 충분한 도움말 제공
( 각 항목에 대한 더 자세한 내용 아래 아티클들 참고해보시면 좋아요.
- 닐슨&노먼 그룹 아티클 참고: http://abit.ly/0v8cec
- 국문은 이 브런치 추천 드립니다: https://brunch.co.kr/@hyoi0303/53 )
접근성 가이드라인
- 모든 사람들이 디자인을 사용할 수 있도록 설계되는 건 중요하다.
- 회사 내부에 접근성 지침이 없다면 'W3C 접근성 표준'을 참고 하는 것도 방법이다. (https://abit.ly/4njwod)
프로토 타이핑 도구를 활용해 UI 컴포넌트의 연속성과 일관성 유지하기
- 프로토타이핑 도구를 활용한 사용성 테스트를 통해 UI 구성 요소 패턴을 테스트 하기
스타일 가이드 라인 준수
- 프로덕트의 look&feel 과 Tone&Manner 에 대한 지침을 제공하는 문서를 잘 지키면 일관된 사용자 경험을 제공할 수 있다.
UX 검수 템플릿
- UX 검수 템플릿을 구축하여 팀에게 인사이트를 제공하는 것이 중요하다. 아래 항목들을 스프레드 시트의 열 제목 사용해서 각 문제들을 평가해보기.
1) 문제 설명: 무엇이 문제인지
2) 문제 위치: 문제가 어디서 발생하는지
3) 사용성 휴리스틱: 어떤 휴리스틱 요건이 충족되지 않는지?
4) 접근성: 접근성 문제인가? 예/아니오
5) 사용자에게 미치는 영향도: 얼마나 심각한 영향인지? 높음/중간/낮음
6) 디자인 수정 규모: 수정하는데 노력은 얼마나 드는지? 높음/중간/낮음
7) 개발 규모: 디자인 수정을 위해 개발 리소스는 얼마나 드는지? 높음/중간/낮음
8) 우선 순위: 위의 항목들 결과를 토대로 전체 우선 순위 설정하기
UX 검수로 얻는 인사이트
- UX 검수에서 가장 가치 있는 부분은 팀에서 다양한 관점으로 논의하고 합의한 UX 평가 기준으로 프로덕트을 평가 할 때 이루어 진다. 문제에 대한 계획을 좀 더 수월하게 할 수 있다.UX
가이드
문서 작성법
2022/03/22
주니어
중니어
온보딩에 왜 신경써야 할까?
- 신규 유저 40~60% 이상이 2일차에 서비스를 이탈합니다.
- 유저가 유료 고객이 되어 다른 사람들과도 제품을 공유할 가능성이 높아집니다.
- 신규 유저를 대상으로 한 개선이 많을수록 모든 KPI(유료 전환율, 구독 유지율, 투자회수 등)가 나아집니다.
→ 흔히 나오는 7가지 실수와 개선 방향 가이드
(4번부터는 간략히 적었어요. 더 자세한 내용은 링크를 눌러보세요)
① 기존 유료 유저들이 익숙하게 사용하던 서비스를 판매 전략상 무료로 제공할 수도 있습니다. 이 때, 온보딩이 부족한 상태에서 신규 유저는 갈피를 잡기 힘듭니다. 당연한 컨텍스트는 사실 당연하지 않습니다.
새로 입사한 동료직원에게 프로그램을 사용하게 해보고 어떻게 쓰는지 화면을 관찰해보자.
② 빈 칸이 너무 많으면 유저가 그 화면에서 요구되는 작업을 완료할 동기 부여에 악영향을 줍니다.
템플릿, 더미 데이터 등으로 default값을 넣어주어 작업 완료 시 나타날 결과를 시각적으로 보여주세요.
③ 그것이 유저에게 어떤 의미가 있는지 충분히 설명해주지 않으면 서비스에 신뢰를 주기 어렵고, 프로세스를 충실히 마치기가 어렵습니다.
유저에게 무엇인가를 요구하는 주요 항목을 찾습니다. 그리고 유저의 관점에서 그것을 왜 입력해야 하는지 1~2문장으로 설명을 넣어봅니다.
④ '둘러보기' 기능에 의존하지 마세요.
제품은 그 자체로 직관적이어야 합니다. '둘러보기' 외에도 다른 장치를 준비해야 합니다.
⑤ 가이드 장치가 너무 빨리 사라지기도 합니다.
'둘러보기'가 끝난 후 신규 유저가 수행할 작업을 안내해봅니다. 체크리스트, 진행률 표시바 등이 유용한 도구입니다.
⑥ 가입 절차 단순화는 수익화에 직접적인 도움이 되지 않습니다.
마케팅 KPI를 '가입'에서 '활성화된 가입'으로 대체하고, 온보딩 과정에서 이탈해버린 유저 시점이 되어 온보딩을 강화할 지점이 어디인지 찾아보세요.
⑦ 불필요한 알림이 과하면 중요한 일에 집중하기 어렵습니다.
효과가 적은 알림은 제거하고 유저에게 커스텀된 알림을 제공하여 알림의 효용을 높여보자.온보딩
가이드
2022/03/08
신입
주니어
필터링이 중요한 이유
많은 양의 데이터를 다루는 서비스는 체계적이고 포괄적인 방법으로 데이터를 보여주어, 사용자가 몇 번의 클릭만으로 필요한 것을 쉽게 찾을 수 있도록 해야합니다.
엔터프라이즈 서비스는 항상 많은 양의 정보를 가지고 있기 때문에, 데이터를 필터링하는 것이 필수입니다. 필터링은 다양한 데이터에 대한 다양한 옵션을 제공하여, 특정 태스크를 수행하는 사용자의 시간을 단축하고 UX를 개선하는 훌륭한 방법입니다.
참고 : 이 아티클은 엔터프라이즈 솔루션을 위한 데스크탑 필터링에 중점을 두었습니다. 데스크탑 필터링과 모바일 필터링은 완전히 다르며 모바일 필터링은 다른 관점으로 별도 연구가 필요합니다.
데이터를 체계적이고 포괄적으로 보여주는 방법에는 크게 3가지가 있습니다.
∙필터 Filter
∙패싯 네비게이션 Faceted Navigation
∙데이터 테이블 Data Table
필터와 패싯 네비게이션은 둘 다 데이터를 더 작은 하위 집합으로 좁히는 데 사용하는 컴포넌트라는 점에서 동일한 기본작업을 수행하지만, 필터는 고정된 범주를 다루는 반면 패싯 네비게이션은 훨씬 유연하고 콘텐츠의 다양한 차원을 다룰 수 있습니다.
필터 Filter
필터는 미리 정의된 범주를 기반으로 검색 범위를 좁히는 프로세스입니다. 필터를 사용하여 사용자가 확인하는 정보의 수를 제한하세요. 두가지 주요 이점이 있습니다.
1. 서버 로딩 시간을 대폭 단축할 수 있음
2. 사용자가 데이터를 이해하기 쉬워짐
패싯 네비게이션 Faceted Navigation
패싯 네비게이션을 사용하면 사용자가 동시에 여러 차원으로 검색을 구체화할 수 있습니다. 획일적인 필터로는 표현하기 어려운 구체적으로 타게팅된 제품결과를 제공하려고 할 때 패싯 네비게이션을 사용합니다.
∙예시 : 쇼핑몰에서 여성용 신발을 탐색할 때, 컬러-블랙 / 사이즈-240 / 카테고리-캐주얼 과 같이 여러 필터를 한번에 선택하여 구체적인 제품 유형으로 범위를 대폭 좁힐 수 있습니다.
데이터 테이블 Data Table
필터의 기능을 대폭 향상시키는 3번째 방법은 ‘결과가 표시되는 방식을 사용자가 정의하게 하는 것' 입니다. 사용자가 데이터 열의 순서와 위치를 직접 커스터마이징하여, 니즈에 맞게 데이터를 확인할 수 있습니다.
엔터프라이즈 솔루션의 사용자는 여전히 ‘사람'이기 때문에, 솔루션 사용방법을 숙지하기보다는 타 서비스 사용경험과 본인의 직관에 의존하여 솔루션을 사용합니다. 잘 설계된 필터링은 사용자가 원하는 것을 찾고 작업을 쉽게 만드는 가장 빠른 방법입니다.UX
프로덕트 전략
UI 컴포넌트
2022/03/02
주니어
중니어
헤밍웨이는 짧고 쉬운 문장으로 많은 독자들에게 큰 감동을 선사하는 것으로 유명합니다. 여러 지식 레벨을 가진 다양한 사용자가 사용해야 할 복잡한 B2B 프로덕트에 헤밍웨이의 이런 작문 방식이 도움이 될 수 있습니다.
먼저 프로덕트에 사용될 UX Writing(마이크로 카피)는 다음 기본적인 원칙을 준수해야 합니다.
• 명확해야 함
• 간결해야 함
• 유용해야 함
사람들이 생각하는것과 다르게 헤밍웨이는 짧은 문장만을 사용하지는 않았습니다. 그는 무조건 짧은 문장을 만드는 것 보다는 1. 충분하게, 2. 간단하게, 3. 효과적으로 문장을 썼습니다.
헤밍웨이의 방식과 같이 UX Writing을 충분하고, 간단하고, 효과적으로 만들기 위해 다음과 같은 방식을 시도해볼 수 있습니다.
• 사전이 필요할 만큼 어려운 단어는 피하기
• 표현적이면서도 명확한 문장 사용하기
• 충분한 만큼만 정보 전달하기 (많다면 빼기, 적다면 추가하기)
• '그리고'와 같은 접속사로 문장을 연결하지 않고, 각 문장을 분리하여 독립적으로 문장 구성하기
• 의식적으로 다시 편집해보기
잊지 말아야 할 점
헤밍웨이는 소설가였지만 우리는 프로덕트의 UX Writing을 만들어야 합니다. 소설에나 필요한 플롯, 서스펜스, 감동 등을 포함하지 않아야 합니다. UX Writing은 사용자를 다음 단계로 이동시키는 역할을 수행해야 한다는 점을 잊어서는 안됩니다.
먼저 프로덕트에 사용될 UX Writing(마이크로 카피)는 다음 기본적인 원칙을 준수해야 합니다.
• 명확해야 함
• 간결해야 함
• 유용해야 함
사람들이 생각하는것과 다르게 헤밍웨이는 짧은 문장만을 사용하지는 않았습니다. 그는 무조건 짧은 문장을 만드는 것 보다는 1. 충분하게, 2. 간단하게, 3. 효과적으로 문장을 썼습니다.
헤밍웨이의 방식과 같이 UX Writing을 충분하고, 간단하고, 효과적으로 만들기 위해 다음과 같은 방식을 시도해볼 수 있습니다.
• 사전이 필요할 만큼 어려운 단어는 피하기
• 표현적이면서도 명확한 문장 사용하기
• 충분한 만큼만 정보 전달하기 (많다면 빼기, 적다면 추가하기)
• '그리고'와 같은 접속사로 문장을 연결하지 않고, 각 문장을 분리하여 독립적으로 문장 구성하기
• 의식적으로 다시 편집해보기
잊지 말아야 할 점
헤밍웨이는 소설가였지만 우리는 프로덕트의 UX Writing을 만들어야 합니다. 소설에나 필요한 플롯, 서스펜스, 감동 등을 포함하지 않아야 합니다. UX Writing은 사용자를 다음 단계로 이동시키는 역할을 수행해야 한다는 점을 잊어서는 안됩니다.UX Writing
2022/02/28
중니어
시니어
이 아티클은 2019년에 작성된 글이고, 사실 11년 전인 2008년에 나왔던 첫번째 아티클을 리뉴얼하여 발행되었습니다. 이번 아티클에 실린 10가지 중에 1, 2, 3, 4, 6번은 2008년에도 그랬고, 2019년에도 여전히 일반적으로 나오는 실수입니다. 작성자는 11년 후에는 아래 문제들이 훨씬 덜 일반적이지 않길 바란다고 합니다...
원본 링크에 예시 캡쳐가 잘 들어가 있습니다. 혹시 여러분의 프로덕트에도 비슷한 점이 있지는 않으신가요....?
★ 피드백 부족... 시스템이 사용자의 input에 어떻게 반응하는지 보여주세요.
★ 사용자의 예측과 다르게 작동하는 시스템... 프로그램 전체에 일관된 규칙을 적용해봅시다.
★ 정보 없는 오류 메시지... 조치 방법을 알려주지 않고 잘못되었다고만 하는 메시지는 사용자를 혼란에 빠뜨립니다.
★ default 값이 없는 입력필드... default 값은 반복 작업에서 사용자의 노력을 상당히 줄여줍니다.
레이블 없이 단독으로 쓰인 아이콘... 그 아이콘이 무슨 의미인지 이해하기 어렵네요...
★ 클릭 또는 터치하기 어려운 버튼... clickable하려면 식별이 쉬워야 하고, 안정적으로 누를 수 있어야 합니다.
모달 남용... 뒷 화면에 있는 정보를 모달에 입력하고 싶은데 모달에 가려서 불편해요 ㅜㅜ
무의미한 정보 노출... DB에서 자동으로 생성된 의미없는 긴 ID 같은 정보는 시스템에는 쓸모있지만 사용자에게는 불필요합니다.
정체불명의 드로어 메뉴... 공간이 없어서 맥락없이 (...)으로 표시되는 추가 메뉴 UI가 종종 있지요.
파괴적인 버튼과 확인 조치 버튼을 가까이에 두지 마세요... 치명적인 실수를 유도합니다.
원본 링크에 예시 캡쳐가 잘 들어가 있습니다. 혹시 여러분의 프로덕트에도 비슷한 점이 있지는 않으신가요....?
★ 피드백 부족... 시스템이 사용자의 input에 어떻게 반응하는지 보여주세요.
★ 사용자의 예측과 다르게 작동하는 시스템... 프로그램 전체에 일관된 규칙을 적용해봅시다.
★ 정보 없는 오류 메시지... 조치 방법을 알려주지 않고 잘못되었다고만 하는 메시지는 사용자를 혼란에 빠뜨립니다.
★ default 값이 없는 입력필드... default 값은 반복 작업에서 사용자의 노력을 상당히 줄여줍니다.
레이블 없이 단독으로 쓰인 아이콘... 그 아이콘이 무슨 의미인지 이해하기 어렵네요...
★ 클릭 또는 터치하기 어려운 버튼... clickable하려면 식별이 쉬워야 하고, 안정적으로 누를 수 있어야 합니다.
모달 남용... 뒷 화면에 있는 정보를 모달에 입력하고 싶은데 모달에 가려서 불편해요 ㅜㅜ
무의미한 정보 노출... DB에서 자동으로 생성된 의미없는 긴 ID 같은 정보는 시스템에는 쓸모있지만 사용자에게는 불필요합니다.
정체불명의 드로어 메뉴... 공간이 없어서 맥락없이 (...)으로 표시되는 추가 메뉴 UI가 종종 있지요.
파괴적인 버튼과 확인 조치 버튼을 가까이에 두지 마세요... 치명적인 실수를 유도합니다.실 사례
UX
2022/02/22
신입
주니어
구글의 자동완성
- 글자를 입력하자마자 빠르게 서치를 완료시켜주기 위해 만들어진 기능
- ex “San f”까지만 입력해도 “san francisco weather” 이나 “san fernando mission” 등을 보여줌
- 특히 모바일 화면에서 유용한데, 작은 화면에서 타이핑 치기 어려울 때도 전체를 입력하지 않아도 검색을 완료할 수 있음
- 평균 약 25% 정도 타이핑을 감소시키고 누적으로 하루에 타이핑 시간을 200년 절약함(하루에!)
제안이 아니라 “예측”
- 자동완성은 사람들이 원하는 것을 빨리 검색할 수 있도록 도와주는 것이지, 새로운 타입의 검색을 하도록 제안하는 것이 아님
예측은 어떻게 할까?
- 구글에서 발생한 진짜 검색 기록들을 보고 입력한 글자와 관련있는 공통적이고 트랜딩에 있는 정보들을 보여줌
- 위치와 사용자의 이전 검색 결과와도 관련됨
- 한 글자 단위로 예측함
왜 부적절한 예측이 발생할까?
- 부적절한 예측을 자동으로 포착하고 안보여주는 시스템을 갖고 있긴 하지만 완벽하지 않음. 대신 경고를 받으면 빨리 제거하려고 노력함
- 일부 예측이 이상하거나 충격적일 수 있지만 실제 검색결과를 보면 필요한 맥락을 제공한다는 점에 주목할 필요가 있음
- 예측 자체가 끔찍한 의견을 반영하는 것이 아니라, 어떤 (문제없는) 컨텐츠를 찾고자 했던 사람의 데이터로부터 나온 결과일 수 있음
- 예측은 검색 결과가 아니기 때문에 검색할 수 있는 항목을 제한하면 안됨
- 어쨌든, 예측 뒤에 있는 맥락이 좋다고 해도, 부적절하면 여전히 문제이고 이것들을 최대한 줄일 것임
부적절한 예측을 줄이기 위한 우리의 노력
- 피드백툴 출시와 정책 강화(혐오 예측 제거)
- 대신 뒤에 가사나 책 등의 단서가 붙으면 노출
- 폭력을 경시, 미화하거나 피해자 혐오와 관련된 예측 제거UX
프로덕트 분석
2022/02/18
주니어
중니어
[성장을 위한 데일리 아티클] '프로덕트 디자인'
UX/UI 개선을 위한 7가지의 마법 더하기
문제를 식별하고 Web 또는 App을 최적화하는 쉬운 방법
디지털 제품이 기대에 미치지 못하면 사용자는 바로 사용 방법을 찾기 시작합니다. 웹사이트가 좋아 보이고 모든 기능이 있는데, 사용자를 위한 기능들은 어디에 있는걸까요?
높은 전환율? 무엇이 잘못되었을까요?
테스트를 시작하기 전에 7 Mores의 투영하여 당신의 Web 또는 App에 대해 생각해보세요. 이 효율적인 방법은 숨어있는 이유를 드러내기 때문에 정말 마법과 같습니다. "Mores"란 무엇입니까? 나른한 저녁 식사 시간에 손님들이 접시에 음식을 담고 있다고 상상해보세요. 무엇이 문제일까요? 음식이 더 맛있다고 해야하는건가? 담당자의 서비스가 좋다고 해야하는건가? 손님이 더 배가고픈건가? 여유로운 분위기인가?
이는 7가지 마법에서 디지털 제품을 시도하고 테스트하다보면 어떤것이 부족한 문제점인지 즉시 발견할 수 있습니다.
1 : 더 많은 관심
이는 사용자의 관심에 대한 것입니다. 제품이 올바른 방향으로 가고 있는가? CTA로 가는 중에 사용자가 사라지나?
사용자는 아래 내용을 수행할 때 제품에 대한 관심을 가지지 않습니다.
- 광고를 접했을 경우
- 중요하지 않은 디자인적 요소에 주의를 잃는 경우
- 갑자기 팝업이 나타나는 경우
- 긴 텍스트와 포맷에 맞춰 콘텐츠를 채워야 하는 것에 지친 경우
- 화려하고 다양한 콘텐츠에 정신을 잃는 경우
- 시각적 가이드를 찾지 못할 때 (너무 단조로운 디자인)
한 가지의 문제를 해결하는 것만으로도 Web의 사용자 경험을 개선하고 사용자가 추구하는 목표를 훨씬 쉽게 달성할 수 있습니다.
사용자의 관심은 히트맵이나 설문조사를 통해 해결할 수 있습니다.
2 : 더 가치있는
제품이 당신 뿐만 아니라 다른 사용자에게도 가치 있고 꼭 필요한 것처럼 보이는지 확인하세요. 그리고 당신의 회사를 가장 잘 보여주는지 확인하세요. 회사에 대한 신뢰는 자동으로 제품에 적용되고 제품을 통해 더 많은 가치를 돋보이게 합니다.
더 많은 가치의 의미
- 당신이 제안하는 것은 인상적이고, 미적이며 매력적인 방식으로 제시됨.
- 사용자는 제품의 장점을 바로 확인할 수 있음.
- 사용자는 제품의 사용 방법을 쉽게 파악할 수 있음. (ex. 명확한 예시인 가이드와 같은)
- 회사 및 제품을 통해 자신감을 높일 수 있음.(ex. 소셜미디어 리뷰, 사진 , 동영상, 인증서 및 기타) 그리고 자신감을 쌓는 중요한 방법은 연락이나 정보력을 가지는 것.
그 외 신뢰감을 구축하는 방법은 회사에 대한 위치, 직원, 사무실 등이 포함됨.
- 배송비용이나 기타 비용이 없습니다. 지불에 대한 옵션 문제는 간단하고 투명하게 보여짐.
가치 창출은 단순한 일회성 작업이 아닌 과정입니다. 시장은 끊임없이 변화하고 사용자와 그들의 요구는 항상 변합니다. 회사와 제품이 최고의 위치에 있고, 제안과 관련이 있으며, 디자인이 이전의 UI/UX 스타일이 아닌지 확인해보세요.
3 : 더 많은 동기부여
사용자는 제품 사용시 필요한 작업을 할 때 더 이상 의욕이 없는 경우에 떠나는데, 이는 매력적인 트리거만으로는 충분하지 않습니다. 트리거는 행동요령일 뿐입니다. 오직 진정한 동기만이 사용자가 실제로 그 행동을 하고 싶게 만들 수 있습니다.
동기 부여에는 호기심, 필요, 욕망의 세 단계가 있습니다. 더 많은 동기부여는 더 많은 호기심, 더 많은 니즈, 그리고 더 많은 욕망을 의미합니다. 디지털 제품이 더 크고 더 많은 정보를 제공할수록 긍정적인 계기가 더 필요합니다. 즉, 사용자의 문제를 해결하는 데 있어서는 더 많은 감정과 논리적인 이유, 그리고 많은 동기 부여를 적용해야합니다.
더 많은 동기부여가 당신이 같은 지점에서 계속 노력해야 한다는 것을 의미하는 것은 아니다. 인센티브와 동기로 요건을 강화할 수 있습니다. 다음 중 하나를 사용할 수 있습니다.
- 사업 동기 부여가 필요
- 학습 동기 부여 필요
- 자기계발 동기부여 필요
- 레크리에이션 및 게임 동기 부여
- 유효성 확인 동기 부여 필요
- 커뮤니케이션 동기 필요
동기부여는 선물, 포인트, 사회적 인센티브 등과 같은 것으로 강화될 수 있음.
UI/UX 디자인에서 부족한 동기부여는 어떤식으로 보이나요?
- Triger가 강조 표시 되지 않음.(추상설계)
- Triger는 감정적으로 관여하지 않음.(대상을 위한 설계가 없음)
- 추가 Triger가 너무 적거나 전혀 없음.(관심 및 주의)
- Triger가 너무 많음.(너무 많은 침입문제)
- 시각적, 정서적으로 동기부여가 강화되지 않음.
- 자극적인 부분(개념적 또는 시각적 요인)이 너무 적거나 없음.
- 인센티브가 없거나 대상에게 관심이 없음.
- 비주얼은 강한데 그 이후로부터는 효력이 없는 경우.
4 : 더 많은 참여
활동
- 많은 Web과 App들이 수동적인 소비에 맞춰져 있고, 이것은 낮은 전환율을 초래할 수 있습니다. 이 부분은 디자이너와 개발자들에게 달려 있습니다. 사용 활동을 높이기 위해서 더 많은 작업을 수행할수록 사용자의 의지력을 볼 가능성이 높아집니다. 몰입은 감정, 미세한 상호작용, 게임화, 그리고 형태를 채우는 것만이 아니고 그 이상이다.
접촉점
- 참여는 사용자와의 접점을 유지하는 것입니다. 접점은 의도적으로 생성될 필요가 있습니다. 모든 곳에서 사용자의 감정과 반응을 예측하고 전달해야 합니다. 그리고 프로젝트 목표 및 사용자 기대치와 일치해야 합니다.
- 더 많은 참여가 반드시 더 많은 접점을 의미하는 것은 아니다. 만약 너무 많다면, 사용자들은 금방 지치고 짜증이 날 수 있습니다. 너무 적으면 사용자는 지루해져서 떠날 것입니다. 따라서 더 많은 참여는 양보다 질을 의미하며, 그럴수록 참여의 깊이가 중요합니다. 보다 감성적인 비주얼, 더 많은 사용자 참여, 더 즐거운 상호작용 및 더 반응적인 인터페이스를 위해 노력해야합니다.
- 인상적인 디자인을 하는 것이 가장 좋은 디자인입니다.
통제와 투자
- 간혹 더 많은 참여로 인해 통제력(사용자가 원하는 작업을 수행할 수 있는 활동 영역을 확보했을 때)과 투자(사용자가 사진, 비디오, 피드백, 성과물 등을 저장)가 강화됩니다.
- 접점을 만들 때 사용자의 시간은 절약해야 하는 값이라는 점을 유념할 필요가 있습니다. 따라서 모든 정보는 빠르고 효율적으로 제공되어야 합니다.
- 사용자가 절대 버림받았다고 느끼지 말아야 합니다. 인터페이스 속에서 상호작용이 일어나야 하며, 매 단계마다 항상 사용자를 관리해야 합니다. 예를들어, 기다리는 시간을 활기차게 하기 위해 재미있는 애니메이션을 제공하거나 404페이지를 화려하게 디자인하는 것이 좋은 디자인 환경의 예라고 볼 수 있습니다.
5 : 더 사용성 있는
당신이 제작한 제품은 유용하며 사용자가 볼 수 있도록 최선을 다했다고 가정한다면, 그것을 더욱 도움되도록 사용자들이 여러번의 기회를 이용했나요?
Web이나 App은 핵심 콘텐츠 외에 유용한 것을 제공할 때만 타 앱과의 경쟁에서 승리하게 됩니다. 여기서 예시는 무료 동영상 레슨, 상담, 짧은 게임, 유용한 정보 등이 될 수 있습니다. 이렇게 때로는 작은 것 하나만으로도 사용자가 타 경쟁 앱보다 당신이 제작한 제품을 선택하게 만들 수 있습니다. 결국 디자인은 모든 요소가 중요하다는 점이다.
6 : 더 신선한 가치가 있는
디지털 제품은 쉽게 금방 질릴 수 있습니다. 그리고 제품에서 새로움이 없다고느끼는 것은 단순히 옛 디자인 스타일 때문이 아닙니다.
사용자의 참여에 영향을 미치는 가장 좋은 방법은 새로움을 유지하는 것입니다. 이것은 최신 콘텐츠와 트렌디한 디자인을 의미합니다. 콘텐츠 마케팅 연구소에 따르면, 유용하고 사용자 관련 콘텐츠를 정기적으로 만들면 검색 엔진 광고 및 배너보다 3배나 많은 잠재 고객을 창출할 수 있습니다. Web이나 App에 새로운 정보를 포함하거나 휴일을 테마로 한 디자인을 사용할 수 있습니다. 정기적으로 변화를 주세요. 여러분이 할 수 있는 많은 것들이 있습니다. 여기서 중요한 것은 사용자가 타임워프에 빠져서 이전에 수백 번 본 것과 같은 오래된 것을 갖게 되는 것을 결코 느끼지 말아야 한다는 것입니다.
7 : 더 쉽게
Web이나 App을 사용하기 너무 어려울 때, 사람들은 문제를 더 빠르고 쉽게 해결할 수 있는 대안을 찾습니다.
사용 편의성에 영향을 미치는 주요 요인
- 시간
- 돈
- 인지 방향
- 물리적인 방향
- 행동패턴
제품을 사용하기 어렵게 만드는 것이 정확히 무엇인지 알아보려면 잠재적으로 부족하거나 잘못된 부분을 테스트해야 합니다. 그러나 긴 로딩 시간, 시각적 또는 정보적 혼란, 과도하게 복잡한 작성 양식, 사용자 경로 소진 등 몇 가지 문제들을 확인 할 수 있습니다. 모든 기회를 최대한 쉽게 이용하세요.
Conclusion
사용자에게 더 많은 관심을 가지고 편안함과 유용성을 제공해야합니다. 그렇게 한다면 여러분은 기대했던 것보다 훨씬 더 많은 것을 얻게 될 것입니다.UX
프로덕트 전략
프로덕트 분석
리서치
사용자 조사
2022/02/09
중니어
주니어
유저의 경험을 생각할때 일반적으로 우리들은 삶을 아름답고 단순하고 사용하기 쉽게 제품의 기능을 구현하는 것으로 생각합니다. 그러나 사실 기능의 문제는 제품 디자인에서 작은 부분이고, 해결하려고 하는 유저의 많은 문제들 중 극히 일부일 뿐입니다. 그래서 프로덕트에 대한 생각에 있어서는 사용자의 문제, 수행해야 하는 작업, 제품의 목표와 수익에 대해 집중적으로 생각하는 것을 의미합니다. 즉, 사용자의 경험은 기능에만 중점된 것이 아니기 때문입니다.
프로덕트의 기능보다 집중해야할 본질적인 요소
제품이 존재하는 이유를 체크하기
핵심 사용자의 경험이 제품이 존재하는 이유입니다. 이는 사용자들이 가진 문제를 해결함으로써 제품은 의미가 존재하게 되고 적절한 가치를 유저들에게 제공합니다. 만일 문제가 없거나 솔루션이 적합하지 않으면 제품은 사용할 의미가 사라지고 사람들 또한 제품을 사용하지 않게됩니다.
제품과 적합한 사람을 위해 적절한 기능을 구축
제품에 대한 생각은 성공적인 기능을 구축하는데 도움을 줍니다. 제품이 가진 문제를 정의함으로써 “왜 우리는 이 제품을 구축하는가?”에 대한 질문에 생각을 하게 됩니다. 대상 고객을 정의하는 데 있어서 누가 이 문제들을 가지고 있는지 그리고 우리는 어떻게 이 문제들을 해결할 것인가에 대한 솔루션을 정의하는 것은 새로운 기능을 구축할 수 있도록 가이드를 제공합니다.
결국, 제품에 대한 목표나 방향을 설정한다면, 기능의 성공 여부를 측정하는 데 도움이 됩니다.
문제해결의 적합성
해결되지않은 문제에 솔루션을 제공했을 때의 제품은 의미가 있습니다. 그리고 문제해결의 적합성은 핵심 사용자 경험을 정의합니다.
단순히 비주얼라이징과 인터랙션에 집중한 디자인은 솔루션이라고 보기도 어렵고, 제품을 의미있게 만들어주지 않습니다. 이러한 점이 제품 성공에 있어서 가장 중요한 이유라고 할 수 있습니다.
좋은 프로덕트를 위해 UX디자이너가 생각해야하는 것
- 우리는 어떤 문제를 해결해야하는가? (사용자 문제)
- 누구를 위해 이 일을 하고 있는가? (타겟 오디언스)
- 우리는 왜 이것을 하고 있는가? (비전)
- 이것을 어떻게 할 것이고 무엇을 달성하기를 원하는가? (전략과 목표)
- 우리가 무엇을 하는 지? (기능)
제품을 생각하는 힘이 주는 좋은 방향
제품에 대한 생각은 디자이너들에게 적합한 사용자들을 위해 적절한 기능들을 구축할 수 있는 이점을 제공합니다.
사용자들의 문제를 해결하고, 또 사용자가 원치 않는 기능들을 구축할 위험을 줄여줍니다.
올바른 질문과 기능을 구축하는 제품사고를 통해 이해관계자보다 효율적인 소통을 합니다.
와이어프레임이나 멋진 레이아웃을 구현하기 전에 과연 제품에 맞는지, 이게 정말 유저들의 문제를 해결해줄 수 있는지 질문을 하게 됩니다.
Conclusion
제품에 대해서 명확한 대상에 대해 적절한 기능을 구현하는 것은 사람들이 가진 문제를 해결할 수 있도록 합니다.
이는 올바른 결정을 내릴 수 있는 권한을 제공하고 사람들이 원하는 제품을 만들 수 있는 기반을 다집니다.
그래서 제품사고는 관리와 UX 디자인 사이에 유익한 관계를 만들어주며 더욱 강력한 제품으로 이끌게 됩니다.
프로덕트의 기능보다 집중해야할 본질적인 요소
제품이 존재하는 이유를 체크하기
핵심 사용자의 경험이 제품이 존재하는 이유입니다. 이는 사용자들이 가진 문제를 해결함으로써 제품은 의미가 존재하게 되고 적절한 가치를 유저들에게 제공합니다. 만일 문제가 없거나 솔루션이 적합하지 않으면 제품은 사용할 의미가 사라지고 사람들 또한 제품을 사용하지 않게됩니다.
제품과 적합한 사람을 위해 적절한 기능을 구축
제품에 대한 생각은 성공적인 기능을 구축하는데 도움을 줍니다. 제품이 가진 문제를 정의함으로써 “왜 우리는 이 제품을 구축하는가?”에 대한 질문에 생각을 하게 됩니다. 대상 고객을 정의하는 데 있어서 누가 이 문제들을 가지고 있는지 그리고 우리는 어떻게 이 문제들을 해결할 것인가에 대한 솔루션을 정의하는 것은 새로운 기능을 구축할 수 있도록 가이드를 제공합니다.
결국, 제품에 대한 목표나 방향을 설정한다면, 기능의 성공 여부를 측정하는 데 도움이 됩니다.
문제해결의 적합성
해결되지않은 문제에 솔루션을 제공했을 때의 제품은 의미가 있습니다. 그리고 문제해결의 적합성은 핵심 사용자 경험을 정의합니다.
단순히 비주얼라이징과 인터랙션에 집중한 디자인은 솔루션이라고 보기도 어렵고, 제품을 의미있게 만들어주지 않습니다. 이러한 점이 제품 성공에 있어서 가장 중요한 이유라고 할 수 있습니다.
좋은 프로덕트를 위해 UX디자이너가 생각해야하는 것
- 우리는 어떤 문제를 해결해야하는가? (사용자 문제)
- 누구를 위해 이 일을 하고 있는가? (타겟 오디언스)
- 우리는 왜 이것을 하고 있는가? (비전)
- 이것을 어떻게 할 것이고 무엇을 달성하기를 원하는가? (전략과 목표)
- 우리가 무엇을 하는 지? (기능)
제품을 생각하는 힘이 주는 좋은 방향
제품에 대한 생각은 디자이너들에게 적합한 사용자들을 위해 적절한 기능들을 구축할 수 있는 이점을 제공합니다.
사용자들의 문제를 해결하고, 또 사용자가 원치 않는 기능들을 구축할 위험을 줄여줍니다.
올바른 질문과 기능을 구축하는 제품사고를 통해 이해관계자보다 효율적인 소통을 합니다.
와이어프레임이나 멋진 레이아웃을 구현하기 전에 과연 제품에 맞는지, 이게 정말 유저들의 문제를 해결해줄 수 있는지 질문을 하게 됩니다.
Conclusion
제품에 대해서 명확한 대상에 대해 적절한 기능을 구현하는 것은 사람들이 가진 문제를 해결할 수 있도록 합니다.
이는 올바른 결정을 내릴 수 있는 권한을 제공하고 사람들이 원하는 제품을 만들 수 있는 기반을 다집니다.
그래서 제품사고는 관리와 UX 디자인 사이에 유익한 관계를 만들어주며 더욱 강력한 제품으로 이끌게 됩니다.프로덕트 분석
프로덕트 전략
UX
일반 이론
2022/01/20
중니어
주니어
[B2B 웹&모바일 디자인 실무 전략]
<들어가며>
B2B 디자이너는 구체적인 목표가 있는 고객사를 만족시키기 위해 다양한 비즈니스 관계를 고려해야 한다.
그렇지 않으면 세련되고, 스타일리시하고, 시각적으로 매력적이더라도 고객사가 잘 안쓰게 되는(즉, 전환율이 낮은) 디자인이 나올 리스크가 커진다.
<UX 설계 시 기억할 사항>
. 고객사 브랜딩과 정책을 지속적으로 강화하는 디자인을 할 것.
예를 들어 기업간 거래 계약이 체결되는 플랫폼 역할을 하는 B2B 웹사이트는 인터랙션 및 시각적 인식 첫 순간부터 고객사 이미지를 고급스럽고, 프로페셔널하게 보이게끔 해야 한다.
. 고객사의 일관적인 브랜딩을 염두에 둘 것.
B2B 기업도 SNS를 활용하는 외부 마케팅을 한다. 고객사의 기존 브랜딩 요소(색상 톤, 레이아웃, 사진 스타일 등)를 솔루션에도 적용하면 기업 이미지를 더욱 견고하게 하는데 도움이 된다.
. 디자인 및 문구는 미니멀하게.
미니멀한 디자인은 B2B 솔루션을 사용하는 바쁜 실무자들의 시간과 노력을 절약해주기 때문에 대체로 효율적이다. 인터랙션 첫 단계에서 핵심 정보를 간결하게 제공하고, 추가 정보를 볼 기회는 따로 제공하는 방식으로 실천해볼 수 있다.
. 글로벌 서비스일 경우 문화권 차이를 유념한다.
어떤 그래픽 요소, 제스처, 단어 조합, 색상 등은 다른 문화권에서는 완전히 다른 뜻으로 받아들여질 수 있다. 지역마다 커스텀하는 것이 효과적인 방법이다.
. B2B 디자인 목적은 트래픽을 늘리는 것이 아니라, 잠재적인 사용자를 액티브 사용자로 바꾸는 것이다.
사용자 이탈을 막는 것(고객 유지)이 중요하다.
<UI 설계 시 기억할 사항>
. CTA 버튼 작동 여부를 곧바로 확인할 수 있게 한다.
B2C에서도 마찬가지지만 B2B에서 더 강조되는 점이다. 사용자가 매우 바쁘므로 버튼을 찾고, 솔루션 조작에 시간을 쓰고, 클릭하는데 드는 비용이 더 높기 때문이다. 디자이너는 CTA 버튼이 눈에 잘 띄도록 색상, 형태, 방향을 대조시키고, 효과적인 위치를 테스트해야 한다.
. 가치, 목적을 직관적으로 보여주기
사용자는 이 솔루션이 나에게 어떻게 유익한지를 고민하지 않고 즉시 이해할 수 있어야 한다. 짧고 명확한 문구를 쓰자. 타이포그래피 계층 구조, 적절한 글꼴과 스타일은 솔루션이나 페이지의 목적을 시각적으로 이해하는데에 도움이 된다.
. 첫 스크롤 영역에서 핵심 정보를 표현할 것
사용자는 보통 웹사이트에서 머무를지, 떠날지를 매우 빠르게 판단한다. 페이지의 가치, 목적과 주요 정보가 스크롤을 내리지 않고도 볼 수 있는 영역에 배치되어야 한다.
. 시선을 사로잡는 이미지 사용
이미지는 텍스트보다 더 눈에 들어오고, 아름답고, 의미가 빨리 인식된다. 또한 매력적인 시각적 컨텐츠는 고객사가 제공하는 가치를 사용자에게 알리는 또 다른 소스로서 기능할 수도 있다.
. 사용자가 어떤 화면에서든 CS 담당자에게 연락할 수 있게 한다.
연락처는 전화번호, 주소, 이메일, 메신저 링크, 채팅창 등 다양한 형태로 표시될 수 있다. 모바일 솔루션이라면 많은 사용자가 이제 스마트폰에서 곧바로 전화를 걸 수 있으므로 전화번호를 터치하게 하는 방식도 좋다. 주소를 터치하면 지도 앱으로 위치를 보여줄 수도 있다. 솔루션은 깊이있는 사용자 연구를 통해 사용자가 조작하면서 기대하는 바, 사용자의 기술 활용 수준을 보고 연락 가능한 경로를 제공해주어야 한다.
—
번역 및 요약: 달팽이
들어가며>
B2B 디자이너는 구체적인 목표가 있는 고객사를 만족시키기 위해 다양한 비즈니스 관계를 고려해야 한다.
그렇지 않으면 세련되고, 스타일리시하고, 시각적으로 매력적이더라도 고객사가 잘 안쓰게 되는(즉, 전환율이 낮은) 디자인이 나올 리스크가 커진다.
<UX 설계 시 기억할 사항>
. 고객사 브랜딩과 정책을 지속적으로 강화하는 디자인을 할 것.
예를 들어 기업간 거래 계약이 체결되는 플랫폼 역할을 하는 B2B 웹사이트는 인터랙션 및 시각적 인식 첫 순간부터 고객사 이미지를 고급스럽고, 프로페셔널하게 보이게끔 해야 한다.
. 고객사의 일관적인 브랜딩을 염두에 둘 것.
B2B 기업도 SNS를 활용하는 외부 마케팅을 한다. 고객사의 기존 브랜딩 요소(색상 톤, 레이아웃, 사진 스타일 등)를 솔루션에도 적용하면 기업 이미지를 더욱 견고하게 하는데 도움이 된다.
. 디자인 및 문구는 미니멀하게.
미니멀한 디자인은 B2B 솔루션을 사용하는 바쁜 실무자들의 시간과 노력을 절약해주기 때문에 대체로 효율적이다. 인터랙션 첫 단계에서 핵심 정보를 간결하게 제공하고, 추가 정보를 볼 기회는 따로 제공하는 방식으로 실천해볼 수 있다.
. 글로벌 서비스일 경우 문화권 차이를 유념한다.
어떤 그래픽 요소, 제스처, 단어 조합, 색상 등은 다른 문화권에서는 완전히 다른 뜻으로 받아들여질 수 있다. 지역마다 커스텀하는 것이 효과적인 방법이다.
. B2B 디자인 목적은 트래픽을 늘리는 것이 아니라, 잠재적인 사용자를 액티브 사용자로 바꾸는 것이다.
사용자 이탈을 막는 것(고객 유지)이 중요하다.
<UI 설계 시 기억할 사항>
. CTA 버튼 작동 여부를 곧바로 확인할 수 있게 한다.
B2C에서도 마찬가지지만 B2B에서 더 강조되는 점이다. 사용자가 매우 바쁘므로 버튼을 찾고, 솔루션 조작에 시간을 쓰고, 클릭하는데 드는 비용이 더 높기 때문이다. 디자이너는 CTA 버튼이 눈에 잘 띄도록 색상, 형태, 방향을 대조시키고, 효과적인 위치를 테스트해야 한다.
. 가치, 목적을 직관적으로 보여주기
사용자는 이 솔루션이 나에게 어떻게 유익한지를 고민하지 않고 즉시 이해할 수 있어야 한다. 짧고 명확한 문구를 쓰자. 타이포그래피 계층 구조, 적절한 글꼴과 스타일은 솔루션이나 페이지의 목적을 시각적으로 이해하는데에 도움이 된다.
. 첫 스크롤 영역에서 핵심 정보를 표현할 것
사용자는 보통 웹사이트에서 머무를지, 떠날지를 매우 빠르게 판단한다. 페이지의 가치, 목적과 주요 정보가 스크롤을 내리지 않고도 볼 수 있는 영역에 배치되어야 한다.
. 시선을 사로잡는 이미지 사용
이미지는 텍스트보다 더 눈에 들어오고, 아름답고, 의미가 빨리 인식된다. 또한 매력적인 시각적 컨텐츠는 고객사가 제공하는 가치를 사용자에게 알리는 또 다른 소스로서 기능할 수도 있다.
. 사용자가 어떤 화면에서든 CS 담당자에게 연락할 수 있게 한다.
연락처는 전화번호, 주소, 이메일, 메신저 링크, 채팅창 등 다양한 형태로 표시될 수 있다. 모바일 솔루션이라면 많은 사용자가 이제 스마트폰에서 곧바로 전화를 걸 수 있으므로 전화번호를 터치하게 하는 방식도 좋다. 주소를 터치하면 지도 앱으로 위치를 보여줄 수도 있다. 솔루션은 깊이있는 사용자 연구를 통해 사용자가 조작하면서 기대하는 바, 사용자의 기술 활용 수준을 보고 연락 가능한 경로를 제공해주어야 한다.
—
번역 및 요약: 달팽이일반 이론
UX
프로덕트 전략
2022/01/18
신입
주니어
UX Tools에서 수행한 2021년 디자인 툴 설문조사 결과가 공유되었습니다.
눈에 띄는점 몇가지
• 한국이 111명으로 나름 응답률 상위 국가에 속했습니다.
• 회사 규모로는 중소기업, 팀 사이즈로는 2-10명 사이인 경우가 가장 많았습니다.
• 디지털 화이트보드로는 아직 Miro가 우세하긴 합니다. Figma가 편하고 FigJam이 (올해엔) 무료 사용을 내세우긴 했지만 기존 사용자들을 무시할 순 없나봅니다.
• 디자인 관련한 전반에서는 역시 Figma가 압도적인 1위입니다
• K-프로토타이핑 툴인 Protopie가 관련 툴들 중 가장 높은 별점을 얻었습니다. Framer는 진입장벽이 여전히 높은것 같습니다.
• 유저테스팅은 한국 내 사용 사례가 잘 보이지 않는 Maze가 높은 별점을, 소규모 팀일수록 선호하는 모습이 보였습니다.
• 3D 일러스트가 주목을 받으면서 Blender, Spline과 같은 3D 툴에도 관심이 많아지고 있습니다.
• 응답 결과 Raw data도 제공하고 있으니 색다른 분석 결과를 스스로 만들어볼 수도 있습니다
눈에 띄는점 몇가지
• 한국이 111명으로 나름 응답률 상위 국가에 속했습니다.
• 회사 규모로는 중소기업, 팀 사이즈로는 2-10명 사이인 경우가 가장 많았습니다.
• 디지털 화이트보드로는 아직 Miro가 우세하긴 합니다. Figma가 편하고 FigJam이 (올해엔) 무료 사용을 내세우긴 했지만 기존 사용자들을 무시할 순 없나봅니다.
• 디자인 관련한 전반에서는 역시 Figma가 압도적인 1위입니다
• K-프로토타이핑 툴인 Protopie가 관련 툴들 중 가장 높은 별점을 얻었습니다. Framer는 진입장벽이 여전히 높은것 같습니다.
• 유저테스팅은 한국 내 사용 사례가 잘 보이지 않는 Maze가 높은 별점을, 소규모 팀일수록 선호하는 모습이 보였습니다.
• 3D 일러스트가 주목을 받으면서 Blender, Spline과 같은 3D 툴에도 관심이 많아지고 있습니다.
• 응답 결과 Raw data도 제공하고 있으니 색다른 분석 결과를 스스로 만들어볼 수도 있습니다일하는 방법
실 사례
사용자 조사
케이스 스터디
B2B 프로덕트는 사용자의 업무를 성공적으로 도와주기 위해 존재합니다. 비즈니스 업무를 수행하는 사용자에겐 시스템에서 발생한 오류로 인해 사용자의 업무에 영향이 가기도 하고, 고객 비즈니스 전반에 악영향을 주기도 합니다. 이러한 사용자 오류를 B2B 프로덕트 디자이너로서 방지할 수 있는 방법은 무엇이 있을까요?
1. 오류를 사전에 방지하기
a. 가드레일 설치하기
• 사용자가 잘못된 선택을 하지 않을 수 있도록 도움을 주는 제약사항을 제공합니다.
• 핸드폰 번호, 카드 정보 입력 필드에 숫자만 입력될 수 있도록 하기. 도착 날짜를 출발 날짜 이전으로 선택할 수 없도록 하기
b. 먼저 제안하기
• (우버)최근 방문한 위치를 목적지로 제안하기. 사용자가 타이핑 중 자동 완성 문구를 제공하기
c. 더 나은 기본값 제공하기
• 일반적인 값으로 혹은 개인화된 정보로 입력 필드를 미리 채워주기, 미리 알림 앱에서 '내일'을 기본값으로 제공하기
d. 표준 따르기
• 사용자들은 이미 다른 사이트와 앱 등을 통해 어떤 것이 어떻게 작동할 지 이미 훈련되어 있습니다.
• 일반적인 위치에 네비게이션 메뉴 제공하기
e. 액션을 명확하게 하기
• 어떤 것이 어떻게 사용되어야 할 지 충분한 어포던스가 제공되어야 합니다.
• 입력 필드의 설명 레이블, 다른 요소와 구분되어 보이고 클릭커블 해 보이는 링크와 버튼 제공하기
f. 결과 미리보기
• 사용자는 자신의 액션이 어떤 임팩트가 있을지 충분히 알지 못하는 경우가 있습니다.
• 결과 미리보기를 제공하면 사용자는 실제로 뭔가를 망가뜨리지 않고도 이리저리 실험적으로 사용해볼 수 있습니다.
• 이메일 보내기 전에 미리보기, 블로그 포스팅 전에 미리보기, 인쇄하기 전에 미리보기
g. 실시간 경고 제공하기
• 사용자가 에러를 만들어내는 중에 제공되는 미묘하고 맥락에 맞는 경고는 빠르게 상황을 인지하고 올바르게 수정할 수 있도록 도움을 줍니다.
• (트위터)글자 제한을 넘었을 때 제공되는 붉은 색 음수, (MailChimp)비밀번호 조건을 만족했을 때 조건마다 제공하는 체크마크
h. 중요한 액션은 다시 확인하기
• 컨펌창은 사용자의 액션을 다시 확인하는 직접적인 방법입니다. 하지만 사용자의 워크플로우를 방해하지 않는 선에서 사용되어야 하고, 남용되지 않아야 합니다.
• (페이스북)메신저에서 대화를 지울 때 다시 물어보기, (Gmail)'첨부' 단어가 있는데 첨부된 파일이 없는 상태로 발송하려 할 때 다시 물어보기
2. 실수가 일어난 다음 대응해야 하는 방법
a. 되돌리기 옵션 제공하기
• 지운 파일을 보관하는 '휴지통' 기능, 이메일 발송 후 발송 취소하기
b. 에러 피드백 제공하기
• 무슨 일이 발생했고, 어떻게 해결할 수 있고, 미래에 다시 동일한 에러를 겪지 않는 방법을 알려줘야 합니다.
휴리스틱
프레임워크
심리학
design thinking workshop 할 때, 여러 mapping하는 방식과 원리를 이해하고 디자인/디자인 리서쳐가 맥락에 맞게 잘 fuse해서 써야한다...라는 논지로 써있는 글인데 혹시 공감하시거나 도움이 될까하여 공유합니다 ~
Facilitation
워크샵
프레임워크
문서 작성법
대시보드를 디자인 하면서 사용자의 권한이나 태스크의 상태에 따라 몇몇 옵션을 사용하지 못하는 경우가 발생하게 됩니다. 이 떄 메뉴에서 해당 옵션을 숨기는게 좋을까요, Disable 처리하는게 좋을까요?
Disable 처리했을때는 해당 옵션의 발견 가능성을 높이고, 학습 용이성을 높이는 장점이 있지만
인지 부하가 높을 수 있고, 클릭 가능한 요소로 오해할 수 있으며 접근성 측면(WCAG)에서 충분한 대비를 주지 못한다는 단점이 있습니다.
숨김 처리했을때는 인지 부하를 낮출 수 있고, 단순함을 확보할 수 있다는 장점이 있지만
계속 옵션이 나타났다 사라졌다를 반복하면 주의를 뺐어갈 수 있고, 발견 가능성이 낮다는 단점이 있습니다.
Disabled 처리는 다음 경우에 사용하면 좋습니다:
• 해당 옵션이 일시적으로 사용되지 못하는 경우나 활성화를 위해서는 사용자의 행동이 필요한 경우. 이 때 툴팁 등으로 원인과 해야 할 액션에 대해 설명해주어야 합니다.
• 사용자에게 옵션이 존재함을 알리고 싶은 경우
숨김 처리는 다음 경우에 사용하면 좋습니다:
• 사용자에게 사용 권한이 없어 항상 사용하지 못하는 경우
• 활성화 상태로 제공되는 경우가 극히 드문 경우
• 한 페이지 내에 사용하지 못하는 옵션이 많은 경우
[— 노트 —]
B2B 디자인을 하면서 대부분의 경우 Disabled 처리하는 편이 더 낫다고 느꼈습니다.
• B2B 프로덕트는 인터랙티브한 모습이 아닌 정지한 모습에서도 사용자가 할 수 있는 행동과 그렇지 않은 행동이 명확하게 인지되어야 하기 때문입니다.
• 또 여러 이해관계자가 서로 다른 화면으로 커뮤니케이션 했을 때 발생하는 비용을 최소화 하기 위해 권한이 없는 화면이나 옵션이 어디에 존재하는지 확인할 수 있어야 하기 때문입니다.
UI 컴포넌트
사용성
가이드
B2B SaaS 프로덕트에서 가장 많이 사용되는 컴포넌트 중 하나는 테이블입니다. 제공하는 내용과 기능이 복잡한 데이터 테이블을 디자인 하기 위해서는 고려해야 할 점이 많습니다.
복잡한 데이터 테이블을 디자인 하기 위한 디자인 리소스 모음 페이지입니다.
각 리소스들이 조명하는 분야가 다양하니, 데이터 테이블을 디자인하는데 필요한 다양한 고민들을 해결할 단서들을 얻을 수 있겠습니다.
• 데이터 테이블의 기본 구조
• 데이터 테이블의 사용성
• 컴포넌트의 재사용성
• 복잡한 내용을 제공하는 방법
• 기업에 제공하기 적합한 위한 테이블
• 브라우저 크기에 따른 반응형
• 데이터 테이블에 사용될 타이포그래피
UI 컴포넌트
사용성
리소스
어떤 상황에 어떤 UX 리서치 방법론을 사용해야 할까?
발견하고자 하는 리서치 결과가 매번 다르기 때문에 각 상황에 가장 효율적인 UX 리서치 방법론이 필요합니다. 이 아티클에서는 다음 6가지 방법을 사용할 상황을 안내합니다. 어떤 상황에 어떤 방법론을 사용해야 하는지 알기 위해서는 우리가 알아내고자 하는것이 무엇인지, 목표가 무엇인지, 어떤 문제를 해결하려고 하는지 스스로에게 질문해야 합니다.
1. 사용자 인터뷰 (User interview)
• 목표: 특정 주제에 대한 사용자의 멘탈 모델, 태도, 의견에 대해서 발견하고자 할 경우
2. 사용성 테스트 (Usability test)
• 목표: 이미 가지고 있는 어떤 아이디어를 평가하고자 할 경우
3. 다이어리 스터디 (Diary study)
• 목표: 사용자의 프로덕트에 대한 현재 행동과 관계를 분석하고자 할 경우
• 사용자가 프로덕트를 매일 사용하는 경우 유리함
4. 카드 소팅 (Card sort)
• 목표: Information Architecture를 만들고자 할 경우
5. A/B 테스트 혹은 다중 변수 테스트 (A/B (or multivariate) test)
• 목표: 여러 아이디어 중 목표를 달성하는 가장 좋은 방법을 알아내고자 하는 경우
6. 설문조사 (Survey)
• 목표: 사용자를 기반으로 문제의 우선순위나 문제의 규모를 결정하고자 할 경우
사용자 조사
일하는 방법
프레임워크
다국어 프로덕트에서 날짜 표기는 어떻게 해야 할까?
B2B SaaS 프로덕트는 글로벌로 진출하기 용이한 프로덕트입니다. SaaS에서 날짜는 자주 사용되는 컴포넌트인데, 국가 별로 날짜를 표기하는 법은 각자 상이합니다. 다국어 프로덕트에서 날짜는 어떤 방법으로 표기해야 할까요?
각 지역 별로 주로 사용하는 날짜 표기법은 다음과 같습니다.
년-월-일(2021-10-25) :: 주로 동북아시아
일-월-년(25-10-2021) :: 남미, 아시아, 오세아니아
월-일-년(10-25-2021) :: 북미
이외에도 여러 방식을 혼용하는 지역도 많습니다.
이런 혼란을 방지하기 위해 만들어진 ISO 8601은 우리에게 익숙한 YYYY-MM-DD 방식으로 표기를 하도록 합니다.
하지만 ISO 방식으로 표시하는것이 항상 좋은 방식은 아닙니다. 컨텍스트에 맞는 유용한 정보 형태로 제공해야 할 것입니다.
• 각 국가에 적합한 포맷으로 제공하되, 레이블을 제공하고 필드를 구분해 인지를 돕고 오류를 방지할 수 있습니다
• 캘린더를 활용한 Date Picker를 제공해 사용자 구분 없이 인지를 쉽게 합니다
• 월과 일을 헷갈릴 수 있다면 월 이름을 제공하거나(Oct) 일에 요일(25 Mon)을 함께 제공하여 인지를 구분하고 오류를 방지할 수 있습니다.
• 다국적 팀에서 사용할 때는 기준이 필요하기 때문에 ISO 방식(YYYY-MM-DD)으로 표기하는것이 좋습니다
• 외부로 데이터를 가져가 활용하거나 테크니컬한 사용 케이스에서 역시 ISO 방식으로 표기하는것이 좋습니다.
UX Writing
UI 컴포넌트
가이드
국제화
수집한 데이터를 상대방에게 표현할 때 어떤 시각화 방법을 선택해야 가장 잘 전달할 수 있을까요? 데이터를 시각화 하는 방법은 수없이 많지만, 목적에 맞는 차트는 생각보다 선택 할 종류가 제한되어 있습니다.
데이터 시각화 이론에서 가장 많이 활용되고 있는 표는 앤드류 아벨라(Andrew V. Abela)의 차트 선택 방법이 있습니다. 앤드류는 무엇을 보여주고 싶은지 목적에 따라 크게 비교(Comparison), 분포(Distribution), 구성(Comparison), 관계(relationship)의 카테고리로 차트를 구분하고 있습니다.
앤드류의 데이터 시각화 방법을 정리한 표가 궁금하시다면 원문 링크를 참조해주시기 바랍니다.
테이블을 잘 사용하는 경우
• 개별 값을 비교하거나 조회하는 경우
• 정확한 값을 보여줘야 함
• 값에 측정 단위가 여러 개일 경우
• 양적 정보를 전달하는것이 목적
테이블을 잘못 사용하는 경우
• 추세를 보여줘야 하는 경우
• 형태를 바탕으로 메세지를 전달하고 싶은 경우
• 여러 값 간의 관계를 표현하고 싶은 경우
막대 차트를 잘 사용하는 경우
• 시간 축이 있는 경우 가로 축을 시간으로 설정 (시간은 위에서 아래가 아닌 왼쪽에서 오른쪽으로)
• 세로 숫자 축은 0에서 시작하기
• 구성 항목이 4개 이하일 때, 구성 비중이 비교적 유사할 때 누적 차트를 사용
• 카테고리 이름이 긴 경우 가로 막대 차트를 사용
• 범주가 7~15개 이거나, 음수로 집합을 표시하는 경우 가로 막대 차트 사용
• 구성 항목 간 비중만 중요할 경우 100% 누적 차트를 사용
라인 차트를 잘 사용하는 경우
• 시간 등 연속적인 데이터를 표시하는 경우
• 데이터 포인트 수가 매우 많을 때(20개 이상) 일정 기간 동안 트렌드를 표현하는 경우
라인 차트를 잘못 사용하는 경우
• 간격의 크기가 동일하지 않은 경우 (값이 0인 경우라도 값을 건너뛰지 않기)
• 차트의 종횡비를 과도하게 늘리거나 줄이는 경우 (1:1 비율이 가장 인식하기 좋음)
영역 차트를 잘 사용하는 경우
• 시간에 따른 누적되는 가치를 표현하는 경우
• 시간 경과에 따른 구성 항목 별 변화를 나타내는 경우
영역 차트를 잘못 사용하는 경우
• 주식 시장이나 가격 변동과 같이 변동되는 값을 표시하는 경우
파이 차트, 도넛 차트를 잘 사용하는 경우
• 카테고리의 전체 관계 혹은 일부 지배적인 구성을 시각화 하는 경우
파이 차트, 도넛 차트를 잘못 사용하는 경우
• 표현하고자 하는 카테고리가 너무 많은 경우 (사람은 면적 비교에 약합니다)
• 각 카테고리의 값이 유사한 경우 (개별 카테고리를 비교하거나 정확한 값을 나타내기 위함이 아님)
• 누적 도넛 차트를 사용하는 경우. 대다수 누적 막대 차트가 더 나은 결과를 제공합니다
• 모든 카테고리의 합이 100%가 아닌 경우
• 비교하고자 하는 축이 2개 이상인 경우
분산 차트(Scatter Plot)를 잘 사용하는 경우
• 연관되거나 서로 다른 두 변수의 관계를 표현하는 경우
• Outlier를 파악하거나 데이터 분포를 클러스터링 하는 경우
버블 차트를 잘 사용하는 경우
• 분산 차트의 축(2개) 보다 하나 더 많은 3개의 축으로 비교하는 경우
테이블을 잘 사용하는 경우
• 개별 값을 비교하거나 조회하는 경우
• 정확한 값을 보여줘야 함
• 값에 측정 단위가 여러 개일 경우
• 양적 정보를 전달하는것이 목적
테이블을 잘못 사용하는 경우
• 추세를 보여줘야 하는 경우
• 형태를 바탕으로 메세지를 전달하고 싶은 경우
• 여러 값 간의 관계를 표현하고 싶은 경우
막대 차트를 잘 사용하는 경우
• 시간 축이 있는 경우 가로 축을 시간으로 설정 (시간은 위에서 아래가 아닌 왼쪽에서 오른쪽으로)
• 세로 숫자 축은 0에서 시작하기
• 구성 항목이 4개 이하일 때, 구성 비중이 비교적 유사할 때 누적 차트를 사용
• 카테고리 이름이 긴 경우 가로 막대 차트를 사용
• 범주가 7~15개 이거나, 음수로 집합을 표시하는 경우 가로 막대 차트 사용
• 구성 항목 간 비중만 중요할 경우 100% 누적 차트를 사용
라인 차트를 잘 사용하는 경우
• 시간 등 연속적인 데이터를 표시하는 경우
• 데이터 포인트 수가 매우 많을 때(20개 이상) 일정 기간 동안 트렌드를 표현하는 경우
라인 차트를 잘못 사용하는 경우
• 간격의 크기가 동일하지 않은 경우 (값이 0인 경우라도 값을 건너뛰지 않기)
• 차트의 종횡비를 과도하게 늘리거나 줄이는 경우 (1:1 비율이 가장 인식하기 좋음)
영역 차트를 잘 사용하는 경우
• 시간에 따른 누적되는 가치를 표현하는 경우
• 시간 경과에 따른 구성 항목 별 변화를 나타내는 경우
영역 차트를 잘못 사용하는 경우
• 주식 시장이나 가격 변동과 같이 변동되는 값을 표시하는 경우
파이 차트, 도넛 차트를 잘 사용하는 경우
• 카테고리의 전체 관계 혹은 일부 지배적인 구성을 시각화 하는 경우
파이 차트, 도넛 차트를 잘못 사용하는 경우
• 표현하고자 하는 카테고리가 너무 많은 경우 (사람은 면적 비교에 약합니다)
• 각 카테고리의 값이 유사한 경우 (개별 카테고리를 비교하거나 정확한 값을 나타내기 위함이 아님)
• 누적 도넛 차트를 사용하는 경우. 대다수 누적 막대 차트가 더 나은 결과를 제공합니다
• 모든 카테고리의 합이 100%가 아닌 경우
• 비교하고자 하는 축이 2개 이상인 경우
분산 차트(Scatter Plot)를 잘 사용하는 경우
• 연관되거나 서로 다른 두 변수의 관계를 표현하는 경우
• Outlier를 파악하거나 데이터 분포를 클러스터링 하는 경우
버블 차트를 잘 사용하는 경우
• 분산 차트의 축(2개) 보다 하나 더 많은 3개의 축으로 비교하는 경우데이터 시각화
UI 컴포넌트
시각 디자인
B2B 프로덕트를 사용하는 플로우에서는 시스템이 사용자에게 정보를 제공해야 하는 경우가 많습니다. 이 때 정보를 어떤 방식으로 제공하는게 가장 적절할 지 여러 UI 컴포넌트 중에서 고민해본 적이 많으실 것 같아요. 경고 모달, 노티 스낵바, 드로어, 툴팁 등등 정보를 전달 할 방법은 많으니까요.
사용자에게 전달해야 할 정보는 사용자의 결정이 필요한 정보인지 vs 정보를 전달하는 메세지인지에 따라 크게 구분할 수 있습니다. 이렇게 나뉜 메세지에서 제공 할 정보의 특징에 따라 사용해야 할 컴포넌트를 결정할 수 있습니다.
저자는 로직 트리로 시각화를 해 메세지를 어떤 컴포넌트로 제공해야할 지 쉽게 결정할 수 있도록 하였습니다. 비록 모바일 앱 UI를 중심이긴 하지만 각 컴포넌트의 정의와 예시, 특징도 함께 제공하고 있으니 디자인 프로세스에 참고할 수 있겠습니다.
케이스 스터디
UI 컴포넌트
사용성
가이드
슬랙이 API를 디자인하는 설계 원칙에 대한 이야기입니다. API를 디자인하는 일이지만 B2B 프로덕트를 설계하는 원칙이라고 해도 전혀 어색하지 않습니다.
1. 한가지 동작만 아주 잘 할 것
2. 빠르고 쉽게 사용할 수 있게 만들 것
3. 직관적인 일관성을 위해 노력하기
4. 의미있는 에러 리턴하기
5. 확장성과 성능을 고려한 설계
6. 호환성을 깨는 변경 피하기
예상 못한 상황들이 있을 수 있으니 "Stay Flexible(유연성을 유지하기)"
경험 공유
실 사례
일하는 방법
B2B 프로덕트는 기업 사용자의 다양한 업무적 요구사항을 충족하기 위해, 다루는 데이터 자체가 복잡하기 때문 등 다양한 이유로 복잡해지기 마련입니다. 복잡한 프로덕트를 디자인 하면서 놓칠 수 있는 10가지 휴리스틱을 소개합니다.
1. 시스템 상태에 대한 가시성 (Visibility of System Status)
사용자의 행동에 대한 적절한 피드백은 가장 기본적인 디자인 가이드라인입니다. 가장 대표적인 피드백으로는 프로그레스 인디케이터를 꼽을 수 있습니다. 프로그레스 인디케이터는 전체 소요시간이 10초 이내로 걸릴 때 사용하면 좋습니다. 그보다 더 많이 걸리는 때에는 프로세스가 얼마나 걸릴 지 추가적인 정보를 제공해야 합니다.
2. 현실 세상과 시스템을 일치시키기 (Match Between System and the Real World)
인터페이스를 디자인 할 때 이미 현실에 구축된 문화적 메타포와 용어를 이용하면 사용자가 컨셉을 더 잘 이해하고 조작할 수 있는 이점을 누릴 수 있습니다. 하지만 만약 이런 문화적 메타포가 유효하지 않다면 반대로 혼란이 야기될 수 있습니다. 미국에서는 'Coffee break'라는 문화가 형성되어있어 근무자 옆에 커피 아이콘을 제공하는 것이 해당 근무자가 휴식중이라는 의미를 잘 전달할 수 있지만 이 문화가 없는 곳에서는 의도한 의미가 제대로 전달되지 못할 수 있습니다.
3. 사용자 통제감과 자유 (User Control and Freedom)
사용자는 실수하기 마련입니다. B2B 프로덕트를 통해 복잡한 업무를 하는 사용자에게는 더 높은 인지와 시간이 필요합니다. 우리의 사용자에게 오류, 실수와 선택을 되돌릴 수 있는 방법을 제공해야 합니다. 대표적으로는 뒤로가기, 되돌리기 기능을 꼽을 수 있습니다.
4. 일관성과 표준 (Consistency and Standards)
사용자가 각 단어, 상황, 액션이 같은 의미를 가지는지 고민하도록 해서는 안됩니다. 플랫폼과 산업군에서 사용중인 표준에 따라야 합니다. 사용자가 속해있는 특정한 도메인과 관련이 깊은 기능을 수행하는 B2B 프로덕트에서는 사용자의 학습 용이성을 위해 표준 용어를 일관되게 사용해야 합니다. 표준과 일관성은 프로덕트 내에서 사용되는 컴포넌트의 색상, 위치, 레이블 뿐 만 아니라 다른 일반적인 프로덕트에서 사용되는 기능에 대한 메타포 또한 포함합니다.
5. 오류 방지 (Error Prevention)
잘 작성된 오류 메세지는 중요하지만, 에러 상황을 마주하지 않도록 디자인 하는것이 먼저입니다. 사용자는 (특히 한국 사용자는!) 프로덕트나 기능에 대해 이해를 하기 보다는 먼저 사용해보는 경향이 있습니다. 세일즈포스는 대시보드를 만들 때 위젯을 추가하기 전에 실시간 프리뷰를 제공해 그들이 원하는 설정이 반영된 모습을 제공하여 발생할 수 있는 오류를 방지하고 더 빨리 수정할 수 있도록 합니다.
6. 회상보다는 인지 (Recognition Rather than Recall)
사용자가 선택 가능한 요소, 액션, 옵션들을 보여줘서 사용자의 기억 부하를 최소화 해야 합니다. 복잡한 프로덕트에서는 이미 제공해야 하는 데이터나 옵션, 정보가 많아서 공간이 부족할 수도 있습니다. 3D 모델링 소프트웨어에서는 사용 할 요소의 모델명('ML-38')에 마우스를 올리면 3D 이미지와 자세한 이름을 툴팁으로 제공합니다.
7. 유연성과 사용 효율성 (Flexibility and Efficiency of Use)
사용자가 프로덕트를 얼마나 능숙하게 사용하는지와 별개로, 효율성은 높아지는 데 한계가 있습니다. 이럴 때 능숙한 사용자는 숏컷, 매크로, 제스쳐 등을 통해 더 빠르게 워크플로우를 수행할 수 있습니다.
8. 미려하면서 미니멀한 디자인 (Aesthetic and Minimalist design)
인터페이스에는 현재 태스크와 무관하거나 별로 필요 없는 정보를 포함해서는 안됩니다. 인터페이스에서 모든 요소들은 주목도 경쟁을 하기 때문에 복잡한 B2B 프로덕트에서는 불필요한 정보가 많을 때 사용자가 필요한 요소를 찾기 힘들어집니다. 만약 일부 사용자에게 유용하거나 유즈케이스가 드문 경우, 해당 요소는 점진적 공개를 사용해 제공할 수 있습니다. (점진적 공개는 이전 글을 참고해주세요 https://careerly.co.kr/comments/38584)
9. 사용자가 에러를 인지하고, 진단하고, 복구할 수 있도록 하기 (Help Users Recognize, Diagnose, and Recover from Errors)
에러 메세지는 발견 가능해야하고, 상황을 명확하게 설명해야하며, 에러를 수정할 수 있는 방법을 일반적인 용어로 안내해야 합니다.
10. 도움말과 문서 (Help and Documentation)
프로덕트를 사용하는데 추가적인 안내가 필요하지 않는것이 가장 좋은 방법이겠지만, 복잡한 B2B 프로덕트를 사용해 태스크를 수행하는데는 종종 추가적인 안내나 교육이 필요한 경우가 있습니다. 하지만 일반적인 사용자는 태스크를 수행하기 전에 수많은 가이드 문서를 모두 읽지 않기 때문에 사용자의 컨텍스트에 맞게, 축약된 정보를 제공하는것이 좋습니다.
휴리스틱
UX 개선
가이드
프로덕트 퍼널에서 전환율을 확인할 때 이탈률이 자주 떨어지는 단계엔 입력 폼이 있는 경우가 많습니다. 입력 폼을 몇개로, 또 어떤 식으로 구성했을 때 전환율이 가장 높을까요?
핵심 요약
• 같은 개수의 입력 필드라면 여러 페이지로 나누었을 때 더 전환율이 높다
• 입력 폼 개수가 적을 수록 전환율이 높다
• 필드가 여러개 일 때 여러 줄 입력 필드 > 드롭다운 > 1줄 입력 필드 순으로 전환율에 악영향을 미친다
• 이탈 사유에는 보안에 대한 불안, 긴 폼 길이가 가장 큰 이유를 차지했다
• 폼 이탈 후 67%는 다시 돌아오지 않는다
핵심 요약
• 같은 개수의 입력 필드라면 여러 페이지로 나누었을 때 더 전환율이 높다
• 입력 폼 개수가 적을 수록 전환율이 높다
• 필드가 여러개 일 때 여러 줄 입력 필드 > 드롭다운 > 1줄 입력 필드 순으로 전환율에 악영향을 미친다
• 이탈 사유에는 보안에 대한 불안, 긴 폼 길이가 가장 큰 이유를 차지했다
• 폼 이탈 후 67%는 다시 돌아오지 않는다케이스 스터디
사용자 조사
실 사례
UX 개선
사용성
UI 컴포넌트
프로덕트 전략
시각 디자인 원칙 : 관념 속 원형 원칙 (Closure)에 대한 글입니다. 정보를 제공할 공간이 부족할 경우 많이 쓰이는 방식인데요, 예를 들어 카드 컴포넌트가 이어지다 스크린 끝에 이르러서 잘린 모습일 때 스크린 너머에 동일한 카드 컴포넌트가 있겠구나 하고 연상하게 하는 사람의 인식을 말합니다. 원칙에 대한 해설과 이 원칙을 적용할 때 지켜야 할 점을 알 수 있습니다.
심리학
가이드
시각 디자인
UX, UI를 디자인할 때 잊지 말고 체크해야 할 21가지 UX 원칙입니다. 21가지 원칙을 아름다운 그래픽으로 소개하고 있으며, 각 원칙에 대한 사례들도 소개되어 있습니다. 디자인 작업을 하다 어떤 방식이 가장 좋은 방식일지 고민이 된다면 원칙의 프레임워크로 다시 바라보면 답을 발견할 수도 있겠습니다.
UX 개선
가이드
심리학
사용자 조사
휴리스틱
한글과 영문을 혼용한 대시보드를 만들고 있는 서비스를 위해 만든 Pretendard 폰트 소개 입니다.
글로벌 고객을 대상으로 서비스를 제공하거나, 한 문장 안에서 국문과 어쩔 수 없이 함께 도메인 용어를 영문으로 제공해야 하는 경우, line-height가 어긋나기 때문에 발생하는 여러 문제들을 경험합니다. Pretendard 폰트는 영문은 Inter 폰트와 Noto-sans CJK KR 폰트를 바탕으로 최적화된 폰트를 만들었습니다.
Pretendard 폰트는 SIL 오픈 라이센스로, 글꼴 단독 판매를 제외한 모든 상업적 행위 및 수정, 재배포가 가능합니다.
폰트
화면을 디자인 하다보면 가장 많이 사용하는 컴포넌트 중 하나로 버튼을 꼽을 수 있습니다. 이 글은 Segmented 버튼을 위주로 설명하고 있지만, 어떤 유스케이스에서 어떤 형태의 버튼을 사용해야 할 지 정리한 다이어그램이 많이 도움이 될 것 같습니다.
UI 컴포넌트
가이드
최근 점점 더 중요성이 높아지고 있는 UX Writing에 대한 글입니다.
B2B SaaS 에서는 특수한 도메인에서만 통용되는 전문용어들이 사용되는 환경일 가능성이 더 높습니다. 초보 사용자들에겐 잘 쓰이지도 않고 정확한 의미를 이해하기 힘든 전문용어를 대시보드에서 만나는건 프로덕트 사용성을 저해하는 큰 요인인데요, 그렇다고 마음대로 용어를 풀이해버려 어디에서도 쓰이지 않는 단어로 만들었다간 잘못된 정보 전달을 할 수도 있고 추후 해당 사용자가 정확한 용어를 익혀 도메인의 전문가로 성장하는것을 방해할 수도 있어 유의해야 합니다.
이 글에선 이러한 자곤(Jargon, 도메인 전문용어)를 어떻게 사용해야하는지에 대해 고민하고 가이드 합니다.
UX Writing
가이드
더 나은 회원가입/로그인 UX를 위한 팁 입니다. 해외 아티클이니 국내 도입시엔 한국 법률과 문화도 고려해야 하겠습니다. 하단 댓글들에 더 많은 요구사항(?)과 니즈들도 있으니 댓글들 까지 확인해보시는걸 추천드려요!
온보딩