본문 바로가기

VuRias15

효과적인 검색을 위한 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.
[UI/UX] (9)유연성과 사용 효율성 - Flexibility and efficiency of use '유연하게 설계한다'라는 것은 무엇일까? 유연한 기능 설계를 이해하기 위해서 어떤 상황을 생각해보자. 당신은 많은 사람들에게 이메일을 쓰고 있다. 전달하는 내용에 약간의 차이점은 있지만 전체적으로 동일한 이메일을 보내야 하는 상황이다. 이럴 때 동일한 메시지를 대부분 재사용해서 각각의 사람에게 새로운 메시지를 쓸 수 있다. 이 기능을 수행하기 위한 방법으로 여러가지가 있는데, 첫번 째 방법 유사한 텍스트를 선택하고 메뉴에서 편집을 클릭 한 다음 복사를 하는 방식이 있다. 두번 째 방법 텍스트를 선택하고 마우스 오른쪽 버튼을 클릭여 복사를 선택할 수 있다. 세번 째 방법 더 쉽고 최대한 빠르게 하는 방법으로 텍스트를 선택하고 Command + C (윈도우는 Ctrl + C)를 눌러 복사하는 방법도 있다. .. 2019. 12. 20.
[UI/UX] (8-2) 사용자 인터페이스의 메모리 인식과 호출 - Memory Recognition and Recall in User Interfaces "인터페이스 상에서 인식과 호출은 어떻게 작용할까?" 사용자 인터페이스에서의 호출 인터페이스에서 호출의 전형적인 예는 로그인이다. 사이트에 로그인하기 위해서는 아이디(또는 이메일)과 암호를 모두 기억해야 한다. 어떤 사용자들은 모든 곳에서 동일한 아이디와 비밀번호를 사용함으로써 호출을 더 쉽게 하지만 문제는 보안이 취약해진다는 것이다. 그런 상황을 방지하기 위해서 많은 다른 사람들은 아이디와 비밀번호를 각기 다르게 설정하지만 결국 기억의 제한으로 인해 호출이 힘들어지면서 어딘가에 적어두면서 보안은 나아지지 않는다. 사용자 인터페이스에서의 인식 메뉴는 인식 기반 사용자 인터페이스의 가장 전형적인 예시이다. 그래픽으로 된 인터페이스가 등장하기 전에 사람들은 명령어를 통해서 작업을 수행했는데 이 방식은 매우 .. 2019. 12. 15.
[UI/UX] (5)일관성 및 표준 - Consistency and standards 일관성 및 표준 사용자 인터페이스 디자인에 대한 10 가지 휴리스틱 중 하나는 일관성을 유지하고 표준을 준수하는 것이다. 이 주제의 내용을 간단하게 설명하자면 사용자가 인터페이스를 예측하고 학습할 수 있도록 하는 것이다. 사용자가 인터페이스를 경험하면서 다른 단어, 상징, 상황 또는 행동이 같은 것을 의미하는지 궁금해 할 필요가 없게 만들어야 한다. UX 디자인에는 내부 일관성과 외부 일관성이라는 두가지 유형의 일관성이 적용된다 내부일관성이란? 내부 일관성은 제품이나 제품군 내에서 일관성을 유지하는 것을 말합니다. 예를 들어, 시각 디자이너가 특정 주황색 음영을 사용하여 콜 투 액션 버튼과 같은 실행 가능한 요소를 강조하기로 결정했을 수 있다. 그러다가 갑자기 제목 요소를 강조하기 위해 콜 투 액션과 같.. 2019. 12. 1.
[UI/UX] (4)사용자 제어와 자유 - User control and freedom 별로 친하지 않은 지인에게 섣불리 친근하게 인사를 했을 때 갑자기 길고 지루한 대화에 빠져 본 적이 있는가? 내가 원하지 않았던 대화가 지루하기까지 하면 당장이라도 그 자리를 떠나고 싶을 것이다. 만약 내가 했던 인사를 되돌릴 수 있는 방법이 있다면 당신은 이런 지루한 대화에 빠지지 않아도 됐을지도 모른다.. 사용자는 스스로 시스템을 제어해야 한다. 이번 글에서 이야기할 내용인 사용자 제어 및 자유는 이런 이야기와 비슷하다. 사용자는 종종 시스템 기능을 실수로 선택하기 때문에 이런 실수를 되돌릴 수 있게 명확하게 표시된 비상구가 필요하다. 그러므로 우리는 기본적으로 실행 취소(Undo) 및 다시 실행(Redo)을 지원해야 한다. 일반적인 예는 모든 웹 브라우저의 뒤로 및 앞으로 단추이다. 만약 그 버튼이.. 2019. 11. 29.