본문 바로가기

Kor86

[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.
UI 디자인에서 툴팁(Tool-Tip) 제대로 쓰는 법 툴팁은 사용자 인터페이스에서 사용자에게 직접 설명하지 않으면 알 수 없거나 익숙하지 않은 개체를 이해하는 데 도움이 된다. 툴팁을 잘 사용하면 사용자에게 필요한 정보를 사용자가 필요한 때에 최소한의 노력으로 찾을 수 있도록 도와주고 화면의 공간을 보다 효율적으로 사용할 수 있도록 한다. (이는 화면에서 혼란을 줄여준다.) 그러나! 툴팁을 잘못 설계한다면 사용자가 느끼기에 화면을 매우 어지럽히고 도움이 되지 않을 수 있다. 툴팁(Tool-Tip)은 어떻게 작동할까? 툴팁(Tool-Tip)은 사용자가 포인터를 개체 위에 올려놓으면 자동으로 표시되며, 사용자가 개체를 클릭하거나 마우스가 벗어나거나 툴팁이 표시되는 시간이 초과될 때 제거된다. 혹은 Tab키를 이용해서 요소를 이동하다 보면 나타나는 경우도 있다... 2020. 3. 25.
반응형

티스토리툴바