시각적 우선순위
사용자가 사이트나 어플리케이션을 시각적으로 바라봤을때에도 우선 순위라는 것이 있다.
첫번째로 먼저 상단과 하단의 코너 부분을 보아 전체적인 크기를 인식한다.
그 다음으로는 여백,폰트 대비, 전경과 배경의 색상, 위치 , 배열 들여쓰기 순으로 인식한다.
이런것들을 바탕으로 다음과 같이 화면 UI 구조를 구성할 수 있다.
More important components might be given larger fonts (including greater boldness) in order to emphasize their significance.
중요한 것이 무엇인가…중요한 것을 강조하여야 한다.
Users tend to look for linear or curved patterns, and to follow those patterns when they are encountered.
사람들은 곡선이나 직선의 패턴에 대한 시선을 따라가는 경향이 있다.
Components that are near each other tend to become associated with each other in the minds of users.
사물들을 가까이 모아 놓으면 연관성이 있다고 생각한다.
Users tend to look for enclosed patterns, even when they’re not specifically marked off, and to associate the objects within such enclosures.
사람들은 닫혀있는 형태를 보고 싶어한다.
화면 레이아웃 구조
어플리케이션의 특성이나 사용자의 성향을 고려하여 아래와 같은 다양한 레이아웃 구조를 설계 및 디자인 할 수 있다.
Visual Framework
사용자에게 안정감과 통일감을 주기위하여 기본적으로 동일한 레이아웃, 컬러, 스타일 요소를 사용하여 모든 페이지를 디자인한다.
Center stage
UI의 가장 중요한 부분을 페이지나 윈도우의 가장 큰 서브섹션 안에 집어넣고 부수적인 툴들과 콘텐츠는 그 주위에 작은 패널로 밀집시켜 놓는다.
테이블, 스프레드 시트, 폼, 웹페이지, 그래픽 편집기 등 대부분의 어플리케이션들이 사용하며 크기 / 컬러 / 헤드라인 / 내용 등 중요항목을 돋보이게 하는 우선순위적 측면을 고려하는 구조이다.
Titled sections
컨텐츠의 각각의 타이틀을 시각적으로 강하게 표현하여 섹션을 분리시킨다.
수많은 컨텐츠를 담고있으면서도 쉽게 훓어 보고 이해할 수 있게 할때 사용할 수 있다.
Card Stack
사용자들에게 친숙한 구조이며 컨텐츠의 영역을 분리된 패널 또는 카드에 넣고 이를 쌓아두어 한번에 하나씩 보이게 하는 탭이나 또다른 장치를 사용하는 구조다.
어플리케이션에서는 탭 대신 드롭다운 리스트를 쓰기도 한다.
페이지에 너무 많은 내용이 들어가 있을때나 한번에 하나의 섹션이상 볼 필요가 없을때 사용한다.
가급적 6개 이하로 사용하고 탭은 한줄로 나오도록 하자.
Closable panels
컨텐츠의 영역을 독립된 패널 안에 넣어서 상자들이 각각의 영역을 다른 영역과 독립적으로 열고 닫을 수 있게 한다.
한 페이지에 나타내기에는 내용이 너무 많을때 모든내용들을 한번만 클릭해도 보이게끔 할때 사용한다.
크기가 크게 다른 섹션도 포함할 수 있고 카드스택의 구성에서 유의해야할 내용 여백을 신경안써도 되며 여러 개 섹션을 동시에 열 수 있는 장점이 있으나 사용자 친숙성은 떨어진다.
Movable panels
독립된 패널에 각각 다른 툴과 컨텐츠의 영역을 넣어 두고 사용자가 이를 움직여서 자기 스타일에 맞게 레이아웃을 형성하는 구조이다.
예를 들어 윈엠프등의 MP3 애플리케이션 실행경우, 플레이리스트나 이퀄라이져 패널등을 자유로이 움직여서 레이아웃을 만들 수 있다.
단일한 배치로 놓일 필요가 없고 각각의 의미가 명확 해야하고 디폴트 레이아웃 전환 버튼이 있어서 처음의 구성으로 돌아갈 수 있어야 한다.
Right/Left alignment
두개의 컬럼 형식이나 표를 디자인할 때 왼쪽 라벨은 오른쪽 맞춤, 오른쪽 아이템은 왼쪽 맞춤을 적용하여 사용자의 시선이동을 줄일 수 있다.
폼이나 다른 앞에 텍스트 라벨이 있는 경우, 투 컬럼 구조에 적합하고 라벨자체가 길어질 경우엔 예외로 구성해야 한다.
Diagonal balance
페이지의 요소를 비대칭으로 배열하되 왼쪽상단과 오른쪽 하단 구석 양쪽에 시각적 무게의 균형을 맞추는 구조이다.
어플리케이션의 다이얼로그박스의 타이틀이 왼쪽 상단에 배치하고, 컨트롤하는 버튼은 오른쪽 하단 배치를 고려 할 수 있다.
Property Sheet
사용자에게 오브젝트의 속성값을 이 페이지에서 편집할 수 있다는 것을 보여주기 위해서 투 컬럼 또는 폼 스타일의 레이아웃을 사용한다.
데이터베이스 기록, 차나 주식 등 특정 도메인의 속성을 사용할때 적용할 수 있다.
Responsive Disclosure
최소한의 UI로 시작하여 각 단계를 완료함에 따라 UI를 좀더 보여주는 연속된 방법으로 사용자를 인도하는 패턴이다.
단계별로 진행되는 대부분의 디자인에서 사용자가 선택하는 내용에 따라 작업의 나머지 부분이 바뀐다.
Responsive Enabling
Responsive Disclosure 구조와 유사하며 다른점은 모든 단계를 미리 보여주고 대부분 비활성화 되어있는 UI로 시작하여, 각 단계가 완료됨에 따라 UI를 조금씩 단계적으로 활성화시킴으로써 사용자의 액션를 이끌어내는 구조이다.
Liquid Layout
사용자가 윈도우의 크기를 변경하면 안에 콘텐츠의 크기가 이에 따라 변경되면서 페이지가 즉시 채워진다.
반응형 웹페이지에서 많이 볼수 있으며 화면에 특정영역을 차지하고 있는 시각디자인의 경우에는 효과적이지 못한 구조이다.
액션과 커맨드
대부분의 어플리케이션에는 사용자가 어떠한 작업을 하기 위한 명령을 내리는 도구에는 버튼이나 클릭등 여러가지 액션을 지원한다.
따라서 이를 어떻게 디자인 하느냐에 따라 사용자가 빠르고 편리하게 작업을 수행 할 수 있기도 하고 불편함을 느끼게 할 수 도 있다.
– 버튼 : 누구에게나 친숙하고 직관적이나 그에 비례하여 차지하는 공간이 있다.
– 메뉴바 : 모든 어플리케이션의 표준으로 마우스와 키보드가 동시접근이 가능해야 한다.
– 팝업메뉴 : 공통적이지 않은 항목에 대하여 사용하고 내용은 간략하여야 한다.
– 드롭다운메뉴 : 액션을 수행하는데 사용하지 말고 상태변화에만 사용하여야 한다.
– 툴바 : 아이콘을 작게 해서 시각적으로 표현한다. 의미가 명확 해야 한다.
– 링크 : 액션은 버튼으로 처리하고 새로운 컨텐츠를 보여 줄때는 링크를 사용한다.
– 더블클릭 : 새로운 컨텐츠를 열때 사용하도록 한다.
– 드래그앤 드롭 : 컨텐츠를 열거나 옮길경우에 사용하여야 한다.
– 키보드 액션(단축키 등) : 사용자가 빠르게 액션을 수행할 수 있도록 도와준다.
Button Group
버튼이 한곳에 몰려있는 버튼그룹을 디자인 할때는 다른 범위에 버튼은 같이 놓지 않고 두개 이상의 줄 및 열을 피하는 것이 중요하다.
동일한 오브젝트에 적용된다면 해당 오브젝트 오른쪽에 버튼 그룹을 배치하자.
전체 페이지나 화면에 영향을 미칠때에는 오른쪽 하단 구석에 배치하는것이 일반적이다.
Action Panel
메뉴을 사용하는 대신 항상 보여지는UI 패널위에 라벨로 그룹을 생성하는 형식이다.
버튼그룹에 너무 많은 액션을 넣어야할때 사용하며 한줄에 한 아이템씩 화면 공간을 차지하기 때문에 모바일 에서는 권장하지 않는다.
Prominent “Done” Button
사용자로 하여금 작업의 완료 또는 종료를 나타내는 버튼으로 보통 페이지 하단 오른쪽에 배치하 여 눈에 띄게 만들고 링크가 아닌 반드시 버튼으로 강조하여야 한다.
또한 아이콘이 아닌 구체적인 단어로 표현된 텍스트를 쓴다.
Smart Menu Items
사용자로 하여금 안전한 탐색을 하도록 현재 작업에 해당되는 메뉴만 살린다.
예를 들면 복사하기 액션이후에는 붙여넣기 메뉴만 활성화되는 형식이다.
Preview
어떤 작업을 하기 앞서 오류를 줄일 수 있도록 미리 볼 수 있게 한다.
작업은 이동하지 말고 미리보기 화면에서 바로 할 수 있도록하고 돌아 갈수 있는 버튼도 필요하다.
Progress Indicator
작업이 얼마나 진행 되었는지 사용자에게 보여준다.
진행바를 보여줄 때가 그렇지 않을 때보다 사용자가 참을성 있게 기다린다.시스템이 생각하고 있다고 느끼게끔 만들어야 된다. 어디까지 진행 되었는지 상세 정보를 사용자가 알 수 있게 진행내용, 진행비율, 남은시간 표시등의 정보 표시와 진행 멈추기 액션 등이 필요하다.
Cancelability
시간이 걸리는 작업을 부작용 없이 취소시킬 수 있는 방안으로 사용자들의 수시로 바뀌는 마음, 실수, 시간지연 등 으로 인한 작업 취소를 고려해야 한다. 즉시 취소해야 하며 그렇지 않다면 취소되고 있다는 메시지 및 진행상태를 사용자에게 알려야 한다.
Multi-Level Undo
사용자가 수행한 연속작업을 쉽게 되돌릴 수 있다는 것은 사용자가 복구 할 수 없는 실수라는 것은 없다라는 자신감을 가지고 사용할 수 있게 끔 한다.
데이터베이스 소프트웨어, 그래픽 편집기, 메일 판독, 프로그래밍 환경 등 다양한 어플리케이션에서 사용하고 있다.
주로 여기에 포함되는 작업 종류는 텍스트입력, 데이터베이스 처리, 이미지수정,레이아웃 변경, 위치,크기 순서, 그룹핑, 파일삭제나 수정, 오브젝트 새로 만들기 삭제하기, 자르기, 붙이기, 복사하기 등이 있다.
너무 많은 스택 포인트는 시스템을 느리게 하는 원인이 될수 있으며 스택에는 10~12개 정도 표시하고 횟수 제한을 거는것이 시스템 리소스 관리에 좋을 것이다.
Command History
사용자들이 어떤 작업을 수행했는지 알 수 있게 하거나 기존에 했던 작업을 반복하고 또는 기억하고 싶을 때 사용한다.
오래된 것이 위로 최근 것이 밑에 나타나게 하며 취급되어야 할 작업 종류는 Multi-Level Undo 와 동일하고 시간 표시도 가능하다.
Macros
반복 작업을 수행 할때 Multi-Level Undo 나 Command History와 같이 쓴다.
녹화 및 재생 패턴으로 사용자들이 매크로 이름을 저장 할 수 있어야 한다.