본문 바로가기

UXUI

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 패턴파인더 스터디 리스트 고려사항 다음 리스트의 주요 유스케이스를 염두에 두고, 고려사항을 하나씩 살펴보자. 전체 리스트 훑어보기 리스트 브라우징하기 관심있는 항목 검색하기 순서 사용자가 아이템을 무작위로 볼지 순서대로 볼지 고려한다. 리스트에 가나다순 또는 시간순 같은 자연스러운 순서가 있는지 고려한다. 사용자가 리스트의 정렬 순서를 변경하고 싶을지, 만약 그렇다면 어떤 기준으로 정렬하고 싶을지 고려한다. 각 아이템에 필수 필드 구조가 있는지 고려한다. 해당 필드를 기준으로 정렬하는 것이 도움이 될 수 있다. 카테고리 리스트의 각 아이템이 특정 카테고리로 분류될 수 있는지 고려한다. 카테고리가 있다면, 사용자가 즉시 이해할 수 있을만큼 직관적인 카테고리인지 검토한다. 카테.. 더보기
5장 비주얼 스타일과 아름다움 - 사용자를 끌어들이는 UX/UI의 비밀 2022 우아한스터디 - UX 패턴파인더 스터디 아름다움이 가진 힘을 절대 과소평가 말라. 비주얼 디자인의 역할 완성도 높은 비주얼 디자인과 룩앤필은 디지털 제품을 돋보이게 할 수 있다. 브랜드의 성격과 정체성을 전달하며 소비자가 브랜드를 경험하는 모든 순간에서 브랜드를 대표하는 역할을 한다. *룩앤필(look-and-feel)은 제어 및 디스플레이의 일관성을 의미한다. GUI 관점에서 룩(색, 모양, 레이아웃, 글꼴)과 필(단추, 상자, 메뉴와 같은 동적인 요소) 모두를 일컫는 용어이다. 즉, 비주얼 디자인은 제품 사용성을 높이거나 브랜드 신뢰를 쌓을 수 도 있고, 반대로 무너뜨릴 수도 있다. 스탠포드 웹 신뢰성 프로젝트(Stanford Web Credibility Project) 연구에 따르면, 사용.. 더보기
2장 콘텐츠 구성하기: 정보 설계와 애플리케이션 구조 - 사용자를 끌어들이는 UX/UI의 비밀 2022 우아한스터디 - UX 패턴파인더 스터디 방해되지 않는 정보 구조 설계하기 인터랙티브 경험에서는 인터페이스가 사용에 방해되지 않는 게 가장 중요하다. 정보 구조를 설계하는 일에는 보여주기, 검색하기, 탐색하기, 라벨링하기, 카테고리화하기, 정렬하기, 조작하기, 전략적으로 정보 숨기기 등이 포함된다. 정보 구조 아이러니 한 점은 잘못 설계되었을 때만 고객들이 알아차린다는 것이다. 반대로 정보 구조를 제대로 설계하면, 디자인은 눈에 보이지 않는다. 사용자에게 어떤 정보와 도구를 보여줘야 하는가? 어느 시점에 보여주는게 좋은가? 컨텐츠의 카테고리가 '빠짐 없이 중복되지 않도록' 한다. '사용빈도'를 가장 중요한 원칙으로 하여 자주 사용하는 항목은 검색하지 않아도 곧바로 보이게 한다. 사용 빈도가 낮으면.. 더보기
1장 문제를 정확히 파악하고 제대로 해결하는 디자인 - 사용자를 끌어들이는 UX/UI의 비밀 2022 우아한스터디 - UX 패턴파인더 스터디 4가지 영역으로 구성된 "사용자를 위한 디자인 프레임워크"를 되새기면, 타겟 고객이 현실에서 맞닥뜨리는 문제에 관한 통찰에 기반해 작업을 하고 있다는 확신을 가질 수 있다. 컨텍스트: 사용자는 누구인가? 목표: 사용자는 무엇을 하고자 하는가? 리서치: 사용자의 전후 사정과 목표를 이해하는 방법 패턴: 인터페이스 디자인과 관련된 사용자 인식과 행동 사용자를 둘러싼 컨텍스트 파악하기 01 인터랙션은 대화처럼 소프트웨어는 사람처럼 자율적으로 판단하여 상황에 빠르게 반응하지 못한다. 따라서 인터페이스와 사용자가 피드백을 자연스럽게 주고받으려면, 사람이 대화하는 방식을 모방하도록 소프트웨어를 디자인해야한다. 상대가 이해하기 쉽게 이야기해야하고, 활성상태라는 신호를 .. 더보기

티스토리툴바