본문 바로가기

사용자를 끌어들이는 UX/UI의 비밀

10장 사용자에게 입력값 받기 - 사용자를 끌어들이는 UX/UI의 비밀 2022 우아한스터디 - UX 패턴파인더 스터디 사용자가 Form 작성을 완료하기 어려워하는 경우를 어렵지 않게 발견할 수 있다. 이번 장에서는 이러한 경우에 활용할 수 있는 디자인 패턴을 알아본다. Form은 '일련의 질문과 답변 세트'라고 간단하게 표현할 수 있다. 소프트웨어에서 사용자 정보를 수집해야하는 상황에 흔히 활용된다. 다행인 점은 사용자는 '텍스트 입력란', '체크박스' 와 같은 기본적인 폼 요소에 익숙하다. 대부분의 모던 인터페이스 툴킷에서는 나름대로 정형화된 Form 요소와 Form 컨트롤을 제공해서 바로 가져다 쓸 수 있기도 하다. 목적을 확실히 전달하자. 제목, 맥락, 용어를 통해 왜 이 Form을 작성하도록 요청하고 있는지 명확하게 표현해야 한다. 더불어 해당 문항이 필수 문항인지.. 더보기
9장 복잡한 데이터 보여주기 - 사용자를 끌어들이는 UX/UI의 비밀 2022 우아한스터디 - UX 패턴파인더 스터디 인포그래픽 Infographic 인포그래픽은 지식전달 목적으로 '시각적으로 제시된 데이터'를 뜻한다. 지도, 표, 트리, 타임라인, 플로우 차트 등 다양한 종류의 다이어그램을 포함하는 개념이다. 잘 디자인된 인포그래픽은 다음의 질문에 대해 답을 줄 수 있어야 한다. 데이터가 어떻게 구성되어 있는가? 각 데이터는 서로 어떻게 연관되어 있는가? 데이터를 어떻게 둘러볼 수 있는가? 데이터를 정렬하는 방법은 무엇인가? 필요한 데이터만 필터해서 보는 방법은 무엇인가? 지금 찾고 있는 특정 데이터의 값은 무엇인가? 프리어텐티브 특성 Preattentive Attributes '사전주의적 특성' 또는 '전주의적 특성'이라고도 번역되는 '프리어텐티브 특성'은 의식적인 .. 더보기
8장 작업하기: 동작과 명령 - 사용자를 끌어들이는 UX/UI의 비밀 2022 우아한스터디 - UX 패턴파인더 스터디 지금까지 구조, 레이아웃, 페이지 요소 등을 살펴보았다면, 이번 장에서는 사용자가 할 일을 처리하기 위해 쓸 수 있는 동작과 명령 등을 고민해본다. 새로 만들기, 삭제하기 특정 값 입력하기 시작, 일시중지, 취소, 완료하기 복사하기, 잘라내기, 붙여넣기 드래그 앤 드롭 사용자는 익숙한 인터랙션 방식으로 작업하고 싶어한다는 점을 기억하자. 인터랙션에서 만큼은 독창성을 발휘하기보다 관습을 따르는 것이 좋다. 예를 들어, 대부분의 사용자는 기존의 경험을 기반으로 다른 앱에서도 동일한 패턴으로 메뉴를 이동하고 버튼을 클릭한다. 만약 인터랙션이 사용자가 예상한대로 일어나지 않는다면, 인터페이스를 통해 '대상을 직접 조작하고 있다'는 사용자의 몰입이 깨지고 만다. 같.. 더보기
7장 리스트 만들기 - 사용자를 끌어들이는 UX/UI의 비밀 2022 우아한스터디 - UX 패턴파인더 스터디 리스트 고려사항 다음 리스트의 주요 유스케이스를 염두에 두고, 고려사항을 하나씩 살펴보자. 전체 리스트 훑어보기 리스트 브라우징하기 관심있는 항목 검색하기 순서 사용자가 아이템을 무작위로 볼지 순서대로 볼지 고려한다. 리스트에 가나다순 또는 시간순 같은 자연스러운 순서가 있는지 고려한다. 사용자가 리스트의 정렬 순서를 변경하고 싶을지, 만약 그렇다면 어떤 기준으로 정렬하고 싶을지 고려한다. 각 아이템에 필수 필드 구조가 있는지 고려한다. 해당 필드를 기준으로 정렬하는 것이 도움이 될 수 있다. 카테고리 리스트의 각 아이템이 특정 카테고리로 분류될 수 있는지 고려한다. 카테고리가 있다면, 사용자가 즉시 이해할 수 있을만큼 직관적인 카테고리인지 검토한다. 카테.. 더보기
6장 모바일 인터페이스 - 사용자를 끌어들이는 UX/UI의 비밀 2022 우아한스터디 - UX 패턴파인더 스터디 한 모바일 경제 리포트에 따르면, 2025년 전세계 모바일 인터넷 사용 인구가 50억에 달할 것이라고 한다.(GSM Association, 2018) 현대의 사용자는 모바일 웹브라우저부터 네이티브 앱까지를 포괄한 다양한 모바일 경험을 하게된다. 이제 모바일 디자인은 플러스 알파가 아닌 기본이 되어가고 있다. 웹사이트를 단순히 압축해 만드는 것보다, 모바일 경험을 우선으로 설계한 다음, 많은 기능을 갖춘 웹을 경험하게 하는 'Mobile First' 방식으로 말이다. 모바일 디자인 특징 작은 화면 크기 사이드바, 긴 헤더메뉴, 기능이 없는 큰 이미지, 많은 링크를 넣을 만한 여유 공간이 없다. 따라서 디자인의 본질만 남기고 나머지를 발라내야 한다. 첫 화면에.. 더보기
5장 비주얼 스타일과 아름다움 - 사용자를 끌어들이는 UX/UI의 비밀 2022 우아한스터디 - UX 패턴파인더 스터디 아름다움이 가진 힘을 절대 과소평가 말라. 비주얼 디자인의 역할 완성도 높은 비주얼 디자인과 룩앤필은 디지털 제품을 돋보이게 할 수 있다. 브랜드의 성격과 정체성을 전달하며 소비자가 브랜드를 경험하는 모든 순간에서 브랜드를 대표하는 역할을 한다. *룩앤필(look-and-feel)은 제어 및 디스플레이의 일관성을 의미한다. GUI 관점에서 룩(색, 모양, 레이아웃, 글꼴)과 필(단추, 상자, 메뉴와 같은 동적인 요소) 모두를 일컫는 용어이다. 즉, 비주얼 디자인은 제품 사용성을 높이거나 브랜드 신뢰를 쌓을 수 도 있고, 반대로 무너뜨릴 수도 있다. 스탠포드 웹 신뢰성 프로젝트(Stanford Web Credibility Project) 연구에 따르면, 사용.. 더보기
4장 화면 구성요소의 레이아웃 - 사용자를 끌어들이는 UX/UI의 비밀 2022 우아한스터디 - UX 패턴파인더 스터디 레이아웃 '레이아웃'이란, 정보, 기능, 장식 등을 배치하는 방법과 그 결과를 말한다. 사용자는 레이아웃을 보면서 어떤 행동을 취할지 유추한다. 따라서 적절한 레이아웃은 사용자가 각 정보와 기능의 우선순위를 직관적으로 파악하는 것을 돕는다. 레이아웃 디자인에는 보통 다음과 같은 사용자 인터페이스 영역이 포함된다. 헤더/창 제목 메뉴/내비게이션 주요 콘텐츠 영역 푸터 패털 시각적 계층구조 활용하기 시각적 계층구조(Visual Hierarchy)는 콘텐츠들이 시각적으로 어떤 계층 구조를 갖도록 보여지는지에 관한 것이다. 중요도에 따라 각 구성요소를 정렬하고 크기와 비율을 조정하여 가장 집중해야 할 대상으로 시선을 끌어당겨야 한다. 중요도가 높은 계층은 눈에 잘.. 더보기
3장 이동하기: 내비게이션 - 사용자를 끌어들이는 UX/UI의 비밀 2022 우아한스터디 - UX 패턴파인더 스터디 내비게이션의 기능 내비게이션은 사용자가 자신이 속한 정보공간을 쉽게 인지하고, 수행할 수 있는 작업이 무엇인지 이해할 수 있도록 한다. 현재 위치 다음으로 이동할 수 있는 위치 지금까지의 이동 히스토리 및 뒤로가거나 상위로 이동하는 방법 콘텐츠와 기능이 구조화된 방식 활용할 수 있는 정보와 툴 글로벌 내비게이션 모든 메인화면에서 고정으로 보인다. 사용자는 이 글로벌 내비게이션을 매개로 웹사이트의 공식적인 구조를 이해하게 된다. 주로 상단이나 좌측에 배치하는 메뉴, 탭, 사이드 형태로 표현된다. 상단과 좌측 둘 다 배치하는 경우도 있다. 모바일 환경에서는 하단에 배치하거나 햄버거메뉴 아이콘이나 케밥메뉴 아이콘을 누르면 메뉴패널이 열리는 형태를 활용한다. 유틸.. 더보기

티스토리툴바