본문 바로가기

Kor/UX&UI63

[101가지 UX 원칙] #15 사용자가 파괴적인 액션을 취할 수 있게 하라 #15 사용자가 파괴적인 액션을 취할 수 있게 하라 이 책을 읽으면서 처음 알게 된 용어가 있다. Ohnosecond라는 용어인데 Ohnosecond 사용자가 끔찍한 실수를 했다는 것을 깨닫는 '찰나의 순간'을 말한다. 예를 들어 보내지 말아야 할 문자메시지를 보냈거나, 장바구니에서 물건을 빼고 주문해야 하는데 주문 버튼을 눌러버렸다거나, 앨범에서 중요한 사진을 삭제하거나 했을 때 가슴이 철렁하는 그런 순간들을 이야기한다. '엎질러진 물은 담을 수 없다.' 라는 말이 있듯이 우리는 일상 속에서 수많은 실수들을 하고 후회하곤한다. 하지만 우리가 설계하는 서비스에서만큼은 사용자의 실수를 너그럽게 포용할 수 있는 생각을 가져야 하고 Undo, Redo 같은 기능을 통해서 사용자가 자신의 실수를 만회할 수 있도.. 2020. 5. 25.
[101가지 UX 원칙] #12~#14 UI 컨트롤 제대로 알기 (2) #12 슬라이더는 수량화 할 수 없는 값에만 사용해야 한다. 슬라이더의 경우 쓰이는 곳을 명확히 구분해야 하는데, 그게 수치화 하려는 것이 정량적인가 정성적인가로 구분된다. 정량적 : 물건의 갯수, 점수, 온도 등 수치화 할 수 있는 것 정성적 : 소리, 밝기, 색상값 등 명확히 수치화 하지 않아도 되는 것 우리는 슬라이더 UI를 반드시 정성적인 값을 표현할 때만! 써야한다. 정량적인 수치를 입력받기 위해 슬라이더 UI를 사용한다면 답답한 스크린에서 꼼지락대며 수치를 맞추려는 사용자의 분노를 사게 될 것이다. 또한 사용자가 슬라이더를 편하게 조절하게 하기 위해서 적절한 크기로 만들어야 한다. #13 정확한 숫자 입력을 위해서는 숫자 입력 필드를 사용하라 정확한 숫자를 입력받고자 한다면, 반드시 숫자 입력.. 2020. 5. 18.
[101가지 UX 원칙] #10~#11 UI 컨트롤 제대로 알기 (1) #10 새로운 UI 컨트롤을 제멋대로 만들지 마라 새로운 UI 컨트롤러를 '제멋대로' 만들지 말라는 것은 무슨 뜻일까? 이 책에 나오는 예시는 차량의 색상을 바꾸는 가상의 3D 휠 '회전'시키려면 클릭하고 드래그로 업-다운을 시켜야 하는 볼륨 다이얼 특정 액션을 실행시키려면 클릭하고 몇 초간 버튼을 누르는 것을 유지해야하는 버튼 이라고 쓰여있다. 위의 예시 중에 볼륨 다이얼을 알아보자. 실제로 볼륨 컨트롤러는 좌우로 회전시키는 타입과 좌우 혹은 상하로 움직이는 타입이 있는데 만약 여기서 좌우로 회전시키는 다이얼을 UI로 만들었다고 해보자. 과연 이 UI는 어떻게 작동해야하는가? 마우스로 클릭을 하고 회전시켜야하는가? 클릭한 채로 위아래 혹은 좌우로 움직이면 다이얼이 회전하는가? 둘다 매우 불편한 경험이 .. 2020. 5. 11.
[101가지 UX 원칙] #6~#9 버튼 UX의 기본 원칙 #6 줄임표를 사용해서 다음 단계가 있다는 것을 알려라 메뉴 창을 열어보면 ' ... ' 이 붙은 버튼과 그렇지 않은 버튼이 있다. 나도 이 책을 읽으면서 처음 안 사실이지만 ' ... '이 있는 버튼은 눌렀을 때 다음 단계(ex : 확인 절차, 경로 설정 등)가 있다는 것이다. 책의 저자는 ' ... '을 보면서 사용자들이 다음 단계가 있다고 추론할 수 있다고 하지만 나는 대다수의 사람들은 그저 자주 쓰는 버튼들에 한해서 다음에 어떤 단계가 있는지 무의식 적으로 학습하는 것이라고 생각한다. 물론 ' ... '의 의미를 알고 있는 사람들에게 이는 방향을 제시해주는 매우 좋은 디자인이라고 생각한다. 나도 ' ... '의 의미를 알고 난 지금은 다음 단계가 있다는 것을 유추할 수 있게 되었기 때문이다. #7.. 2020. 5. 10.
[101가지 UX 원칙] #2~#5 폰트를 사용할 때 원칙 #2 두 가지 이상의 서체를 사용하지 마라 내가 이 챕터를 읽으면서 새롭게 알게 된 사실은 나도 모르게 서체 'Typeface'를 폰트 'Font'라고 부르고 있었다는 것이다. 폰트는 소프트웨어에서 서체를 랜더링하고자 사용하는 파일을 말하는 것이기 때문에 엄밀히 따지면 서체 'Typeface'로 이야기하는 것이 올바르다. 이 책에서는 폰트 = 팔레트에 있는 페인트 서체 = 캔버스 위에 그려진 명작 이라고 표현하고 있다. 한 서비스에서 서체를 다양하게 사용하는 것은 사용자에게 하여금 과도한 '시각적 소음'을 일으키기 때문에 최대 2개의 서체를 사용하는 것이 좋으며, 이때 제목용 서체, 본문용 서체를 나누거나 한 서체 내에서의 Font Famliy를 활용하는 것이 좋다. #3 사용자의 컴퓨터에 설치된 폰트를.. 2020. 5. 5.
효과적인 검색을 위한 Search Bar 설계하기 이전 글에서 Tool-Tip에 대해 글을 썼었는데, 이번에는 Search Bar를 어떻게 하면 사용자들이 좀 더 편하게 사용할 수 있는지에 대한 글을 번역하면서 공부해보았다. 원 글의 링크는 글 하단에 있으니 참고하시길 바란다. 우리는 원하는 바를 검색 할 때 수많은 데이터 중 내가 원하는 데이터를 얻고자 노력한다. 이때 Search Bar의 UX가 잘 설계되어 있다면 원하는 바를 더 쉽고 빠르게 찾을 수 있게 될 것이다. 일반적으로 Search Bar를 사용할 때 사용자는 비활성화 -> 활성화 -> 입력 중 -> 검색 -> 검색 결과 노출 정도의 단계를 거쳐서 검색을 완료할 것이다. 이 순간순간 사이사이에 아래 알려드릴 UX적인 설계를 넣는다면 사용자에게 더 편한 Search Bar의 경험을 얻게 할 .. 2020. 3. 31.
반응형

티스토리툴바