디자인
포커스 상태를 개선하기 위한 간단한 UX 디자인 팁
4분
2021.01.08.4.1K
1. 포커스 상태가 필요한 컴포넌트가 무엇인지를 파악한다
사용자 인터페이스의 모든 대화형 컴포넌트에는 포커스 상태가 필요합니다. 그만큼 간단합니다. 너무 뻔하게 들릴 수도 있습니다. 그런데 왜 우리는 클릭할 수 있는 리스트 아이템이나 카드에서 포커스 상태를 추가하는 걸 잊어버리는 걸까요? 대부분의 경우, 우리는 입력 양식에서만 포커스 상태를 만듭니다. 아이콘, 아바타, 카드, 리스트 아이템, 그리드 아이템, 토글, 툴팁, 슬라이더를 비롯해서 다른 모든 대화형 컴포넌트에서도 포커스 상태가 필요합니다.
사용자 인터페이스의 모든 대화형 컴포넌트는 포커스 상태가 필요합니다.
2. 그리고 포커스 상태가 필요하지 않은 것이 무엇인지를 파악한다
또한 모든 컴포넌트들이 포커스 상태가 필요한 것은 아니라는 점에 주의할 필요가 있습니다. 제가 따라는 간단한 규칙은, 만약 컴포넌트가 대화형이 아니라면 포커스 상태가 필요하지 않다는 것입니다. 예를 들어서, 제목이나 문단에는 포커스 상태가 필요하지 않습니다. 하지만 문단 내의 링크에는 포커스 상태가 필요합니다. 양식, 대화상자, 탐색 바, 전체화면 등에도 마찬가지입니다.
모든 컴포넌트에 포커스 상태가 필요한 것은 아닙니다.
3. 보기 좋게 스타일을 꾸민다
브라우저의 디폴트 설정을 지우고 적절하게 스타일을 꾸미기 바랍니다. 시각적인 정체성이 보이고 느껴져야 합니다. 포커스 상태의 스타일을 꾸미는 것은 모든 사용자들에게 통합된 환경을 제공한다는 것입니다. 변경사항이 사용자 경험을 방해하는 것이 아니라 개선할 수 있어야 합니다.
포커스 상태는 지루해서는 안 됩니다.
4. 포커스 상태는 뚜렷하게 보여야 한다
이것도 뻔한 팁이지만, 그럼에도 불구하고 일부 포커스 상태는 잘 보이지 않는 경우가 많습니다. 제가 말하는 건, 포커스 상태의 대비가 뚜렷하지 않아서 다른 컴포넌트들의 상태와 잘 구별되지 않는 경우를 말하는 것입니다. 앞에서도 말한 것처럼, 포커스 상태는 눈에 잘 보이게 해서 사용자가 빠르고 쉽게 상태를 확인할 수 있게 해야 합니다.
포커스 상태는 뚜렷하게 보여야 합니다.
그리고 화면 밖의 메뉴처럼 현재는 보이지 않는 구성요소들에 대해서는 포커스 기능을 해제해야 합니다.
5. 한 번에 하나씩
우리는 한 번에 두 개의 컴포넌트와 상호작용 할 수 없습니다. 따라서 동시에 여러 개의 컴포넌트에 포커스를 맞춰서는 안 됩니다.
한 번에 한 개의 컴포넌트에만 포커스를 맞추어야 합니다.
6. 그리고 마지막으로, 직접 사용해본다
이건 실제 사이트와 프로토타입을 위한 팁입니다. 최소한 몇 분 동안 사용해 보십시오. 그리고 시간을 좀 들여서라도 키보드나 스크린 리더만 사용해서 내비게이션을 해 보시기 바랍니다. 1. 사용자 인터페이스를 사용해서 예상했던 대로 모두 탐색을 할 수 있나요? 2. 사용자 인터페이스 안에 배치해 놓은 것들이 확실하게 보이나요? 3. 예상하지 못했던 일이 발생하나요? 몇 분간 이리저리 사용해 보면서 답을 내릴 수 있는 세 가지의 간단한 질문입니다. 이제 실제로 한 번 사용해 보십시오!> 이 글은 ‘Simple UX design tips for better focus states’을 각색하여 작성되었습니다.
로그인하고 자유롭게 의견을 남겨주세요.
