복잡한 데이터 보여주기
화면에서 데이터를 사용자에게 보여줄 때에도 UI 측면으로 여러가지 고려해야할 사항들이 있다.
데이터를 어떻게 구성할것인지, 무엇과 무엇이 연관되어 있으므로 관계를 어떻게 표현할 것인지, 이 데이터는 다르게 보이도록 재배열 할 수 있는지 등이다.
예를 들어, 스크롤 영역이 너무 크다면 가로, 세로 스크롤이 모두 생겨서 사용자들이 스크롤바를 조작하여 할 상황이 있을 수 있기 때문에 뷰포트나 버튼을 클릭해서 다음 화면을 보여주는 형태로 가는것이 나을 수 있다.
Scrolling
Zooming
Opening & Closing Windows
알파벳 순이나 숫자 순, 날짜 및 시간 순서 등으로 여러 자료가 뒤섞여 있는 경우는 정렬을 함으로써 새로운 정보를 알 수 있다.
이 밖에도 큰거부터 작은순으로 잘라내는 필터링, 작은것에서 부터 큰순으로 늘려나가는 쿼어링 등이 있다.
OverView Plus Detail
확대된 부분 ‘디테일 뷰’옆에 그래픽의 전체 오버 뷰를 두어서 사용자가 오버뷰에서 뷰포인트를 드래그하는 영역에 따라 디테일 뷰의 그림도 달라진다.
고전적인 방식으로 자신이 어디를 보고 있는지 이정표 역할을 하며 전체를 자세히 볼 필요가 없을 때 사용된다. 어느 한쪽을 움직였을 때 1/10초 이내에 반응(직접확대의 표준반응시간)준수 해야한다.
Datatips
복잡한 데이터에서 대표항목에서 숨겨진 데이터를 볼 수 있도록 그래픽에서 관심이 있는 부분에 마우스를 가져다 대면, 그 지점의 데이터 값이 툴팁이나 다른 플로팅 윈도우에서 보여진다.
빠르고 가볍게 만들어야 하며 툴팁과 같은 방식으로 쓰되 크기가 크면 안되고 함축적으로 데이터를 표현해야 된다.
Dynamic Queries
데이터를 즉시 인터랙티브하게 걸러낼 수 있는 방법을 제공한다.
크고 다변적인 데이터를 걸러내기 위해서 슬라이더나 체크박스와 같이 사용하기 쉬운 표준 컨트롤을 사용하며 사용자들이 컨트롤을 조절하자마자 결과가 즉시 나타난다.
사용자들은 바를 움직이면서 데이터 변화를 감지하고 속성값의 범위도 알 수 있는 표현 방법이다.
Local zooming
작은 스케일의 조밀한 데이터 항목을 가지고 있는 단일 페이지 내에서 모든 데이터를 보여주고 마우스가 있는 곳의 데이터 항목을 크고 읽기 쉽게 확대한다. Overview Plus Detail 와 달리 모양을 왜곡 시킨다.
Row striping
테이블에 많은 열이 있을때 비슷한 색 두가지를 사용하여 데이블 행의 바탕색이 교대로 엇갈리게 한다.
사용자들은 테이블의 배경색이 한가지일때 근접성에 의한 밀착된 오브젝트로 보는 경향이 있으며 시선이 행을 따라 왼쪽에서 오른쪽으로 움질일때 행을 혼동하지 않는다.
차분하고 낮은 채도의 비슷한 값을 가진 컬러를 선택하고 한 색상은 다른 색상보다 아주조금 어둡게 구성하면 행 구분선을 사용하지 않아도 된다.
Sortable Table
데이터를 테이블안에 넣고 열을 선택하여 정렬 할 수 있도록 사용자에게 선택권을 주어서 탐색을 용이하게 하는 방식이다. 사용자는 한가지 속성만을 기억하고 그 속성에 따라 분류하고 찾기를 원한다.
이것은 클릭할 수 있다 표현을 해줘야되고 오름차순인지 내림차순인지 화살표로 표시해주어야 한다. 정렬 한 가운데 다른 항목을 정렬하면 정렬내에서 정렬되도록 정렬의 지속성을 고려하자.
Jump to Item
윈도우 탐색기를 열어 파일들 중에 찾고자 하는 알파벳키를 누를 경우 순차적으로 선택되는 것 처럼 사용자가 항목의 이름을 입력하면 바로 해당 항목으로 이동하여 선택한다.
사용자가 키보드에서 손을 안떼어도 되는 장점이 있으며 일치되는 것이 없다면 사용자에게 알려주어야 하고 일치되는 것이 없다면 가장 유사한것을 가리키도록 설계 하여야 한다.
New-item row
사용자가 새로운 항목추가를 원하는데 UI에 여분의 공간이 많지 않아서 옵션을 둘 수 없을때 테이블의 마지막 행을 새로운 아이템을 생성하기 위한 곳으로 사용한다.
매우 세련된 방식이기는 하나 다른 작업을 한다고 해서 중간에 작업된것이 없어지면 안된다.
Cascaing lists
각 계층 단계에서 선택할 수 있는 항목의 리스트를 보여줌으로써 우선 순위를 표현한다. 어떤 항목을 선택하더라도 해당 항목의 하위에 속하는 다음 리스트를 보여준다.
트리형태로 사용할 수 있지만 모든 항목을 볼려면 상하로 스크롤 할 확률이 많다.
복잡한 정보를 보여줄때 가시성이 뛰어나고 사용자가 지나온 자취를 쉽게 판단할 수 있는 장점이 있다.
Tree table
테이블과 같은 열 안에 계층 구조적 데이터를 넣되 트리 구조를 나타내기 위해 첫 번째 열에 톱니 모양으로 들쭉날쭉한 형태의 구조를 사용한다.
데이터를 정렬 시키게끔할 수 있으며 우선순위와 항목의 속성을 통일된 구조에서 보여줄 수 있다. 열을 정렬하면 트리 구조가 분열될 수 있기 때문에 다시 정렬할 수 있는 버튼이 필요하다는것을 기억하자.
Tree map
다차원 데이터나 계층 구조의 데이터를 다양한 크기의 사각형으로 표현한다. 계층 구조를 보여주기 위해 이 사각형들을 포개어 놓고 컬러나 라벨로 추가되는 변수와 크기,위치 내용 등을 나타낼 수 있다.
사용자에게 인풋 받기
Forgiving Format
사용자에게 다양한 포맷과 체계의 텍스트를 입력할 수 있도록 허용하고 어플리케이션에서 이를 이해하여 해석하게 만든다.
사용자는 올바른 포맷에 대해 신경쓰지 않고 작업이 완료되기만을 바라기 때문에 자유롭게 입력할 수 있도록 하고 전화번호 같이 인 풋 형태를 완전히 예측할 수 있을 경우는 구조화 된 포맷을 이용한다.
Structured Format
어떤 종류의 내용을 입력해야 되는지 미리 보여준다. 예외사항이 명확하여 데이터 입력 오류를 줄 일 수 있는 장점이 있다.중간에 하이픈이 있는 항목의 경우 따로 떨어뜨려 놓음으로써 체크하는것이 더 쉽도록 할 수 있다.
처음의 내용을 다 입력하면 자동으로 다음 필드로 포커스를 자동 이동시키도록 한다.
Fill-in-the-Blanks
한 줄의 문장에 해당되는 입력 값을 받을 때 주로 사용되며 언어로 표시된 문맥상에서 빈곳을 보는 것만으로도 상황이 어떻게 되어가는 중이며 무엇을 요구하는지 이해할 수 있다.
단어 대신 컨트롤을 쓰며 문장안의 라벨 단어와 동일한 높이, 넓이를 가지는 컨트롤들인 텍스트박스,콤보박스의 줄을 맞추고 자간을 유지한다.
UX적인 측면에서 지역적인 특색에 따라 문법이 틀려질 수 있으므로 주의하자.
Input Hints
명확한 설명으로 무엇을 입력 해야하는지 나타내는 라벨을 사용한다.
이 라벨을 시각적으로 분리한다면 사용자들이 무시할 수 있으니 붙여놓도록 하고 라벨포인트보다 2포인트 작은 폰트 사용하며 짧으면 사용자가 무시 할 수 있으니 가급적 내용을 길게 표현한다.
Input Prompt
무엇을 하고 입력해야하는지 말해주는 프롬프트를 미리 채워넣는다.내용을 채워넣고 나면 뭘 입력했는지 알 수 없기 때문에 라벨을 없애서는 안된다.
Autocompletion
엑셀에서 많이 보던 기능으로 이전에 입력한 기록이나 디렉토리안에 있는 파일 처럼 미리 존재하는 값들을 보여준다.
입력되는 내용이 길고 힘들때 유용하고 오류방지의 효과도 있다. 사용자가 원하지 않으면 기능이 작동되지 않도록 하여 불편함을 느끼게 하지 않도록 한다.
Dropdown Chooser
복잡한 선택지에서 드롭다운이나 팝업패널을 사용한다. 메인페이지의 공간을 사용하고 싶지 않을때 달력이나 금융 어플리케이션의 계산기처럼 상대적으로 작게 설계한다.
List Builder
동일한 페이지 위에 소스 리스트와 목적 리스트 두가지를 보여주며 서로 이동할 수 있게 한다.
왼쪽에 소스 자료를 보여주고 오른쪽에 목적자료를 보여주도록 하자.
두 리스트 사이에는 추가와 제거 버튼을 두며 가능하다면 드래그 앤 드롭으로 이동하고 다중선택이 가능하게 하도록 한다.
Good Defaults
사용자가 원하는 값을 가장 잘 예측해주는 내용으로 폼 필드를 미리 채워 넣는다.
사용자들이 해야하는 일을 줄여주는 동시에 원하는게 아니더라도 어떤 종류의 대답을 원하는지 알려줘서 오류를 줄일 수 있다.
다만 광고메일 수신등에 디폴트 체크등은 하지말도록 신중하게 사용한다.
Same-Page Error Messages
UI 화면 자체에 오류메세지 형태를 띄운다.
사람들이 가장 시선이 많이 가는 위치인 페이지 상단에 가능한 메시지를 표시하여 완료 혹은 승인버튼을 클릭하고 오류가 나오고 다시 돌아왔을때 기억하지 못하는 현상을 방지하도록 한다.
빨간색은 사람들을 경고로 인식 하기때문에 오류메세지는 빨간색으로, 색맹을 위하여 굵게 표시한다. 오류를 일으킨 폼 필드 옆이나 밑에 짧게 메시지를 표시하자.
보기 좋게 만들기
부가적으로 웹 신뢰도에서 가장 중요한 요소는 외관이기때문에 UI 디자인적인 측면에서 고려해야할 사항이 있다.
Deep Background
앞에 있는 요소들보다 시각적으로 뒤쪽에 있는 페이지 배경에 이미지나 그라디언트를 주면 컨텐츠가 떠있게 보이기 때문에 사용자들의 시선을 컨텐츠에 집중 시킬 수 있다.
부드러운 포커스, 컬러 그라디언트 ,강한 초점을 두지 않는다.
Few Hues, Many Values
주요 컬러는 하나나 두개 정도 사용하고 컬러에 밝기를 다르게 하여 전체적인 구성을 한다.
너무 많은 컬러는 전체를 어지럽게하고 밝고 채도가 높은 컬러는 산만하게 한다.
Corner Treatments
창이나 탭의 모서리에 라운드를주면 직각 보다 덜 지루하게 보여진다.
모든 인터페이스 전반에 걸쳐 일정하도록 설계하자.