소프트웨어 개발적 측면으로 바라보는 UI (User Interface)라는 것은 정보기기나 소프트웨어의 화면 등 사용자와 인터페이스, 즉 접촉하는 면을 설계하고 디자인하는 것을 의미하고 UX(User Experience)는 이러한 UI를 사용자가 직접 혹은 간접적으로 사용하면서 느끼는 경험을 총제적으로 의미한다.
예를 들면 전자 기기의 전원 버튼을 설계하고 장착하는 것을 UI 라고 한다면 사용자가 사용하기 편리하도록 기기의 어느 부분에 어떠한 모양으로 만들것인가 하는 것을 UX라고 할 수 있다.
프로그램을 개발한 후 실 운용에 접목하다 보면 사용자들이 시스템을 이용하기 불편하다고 하는 경우가 간혹 있다.
이런 경우는 보고자하는 정보를 보기가 어렵다 던지 원하는 기능을 찾아서 실행하는 방법이 혼동된다는 지 하는 것들이 있는데 이는 UX 디자인이 사용자 측면에서 제대로 되어 있지 않다는 것이다.
이에 필자는 윈도우 어플리케이션 개발자라 그것에 맞는 UI 관련 있는 정보가 드물었는데 Designing Interfaces 서적을 우연히 구하여 자료를 정리해 보았다.
사용자는 무엇을 원하는가?
When designing software interfaces, we must ascertain who will be using the software and why they will be using it.
사용하기 쉬운 어플리케이션은 친숙하게 디자인되어있어야 하며 쉽게 이해할 수있어야 된다는 내용이다. 여기서 친숙이라는 단어는 직관이라는 단어로 바꾸어도 의미는 같아진다.
예를 들면 컴퓨터 마우스를 처음 보는 사람에게는 절대 직관적인 장비가 아닐 수도 있지만 사용법을 10초정도 익히면 잊어먹지 않는 의미이다.
사용자가 무엇을 원하는지 알기위해서는 요구사항을 조사하여야 한다.
현장인터뷰나 질답같은 직접관찰하여 요구사항을 파악하는 경우도 있겠고 제한된 분야라면 사용자 그룹에 대한 표본에 대한 사례를 참고하는 방법도 있다.
수집한 요구사항을 토대로 사용자 패턴을 정의할 수 있는데 개개인이 아무리 독특하다고 해도 예측할수 있는 범위 내 에서 행동할 수 밖에 없기때문에 다음과 같은 기준 패턴을 기초로 UI 및 UX를 디자인하여야 한다.
Allow users to explore an application without penalties
안전한 탐색(Safe Exploration) : 마음 놓고 둘러 볼 수 있도록 하자.
어플리케이션 작업중 멀티레벨의 Undo 나 뒤로가기 버튼을 눌렀는데 예상과는 다른행동을 보여줄경우 사용자는 방향감각을 상실하게 된다.
Avoid discouraging delays without feedback
즉각적인 만족(Instant gratification) : 결과를 빨리 볼 수 있도록 하자.
사용자들은 바로 결과를 보고 싶어하며 이것은 인간의 본성에 가깝다. 긴 지시문, 로딩 메시지, 불필요한 광고 등 이런것들이 사용자가 원하는 결과물을 가려서는 안된다.
Use necessary & sufficient approach to labels, layouts, navigation, etc.
최소한의 충족(Satisficing): 사용자들은 필요한 업무만 하면 된다.
심리학적으로 사용자들은 충분하게 만족하면 더 좋은 방법을 위해서 노력과 시간을 들이지 않는다. 라벨이나 캡션의 경우 짧은 단어로 의미를 전달하는것이 효율적이며 사용자들은 긴 내용으로 읽는 시간을 소비하는걸 원치 않는다.
어떤 어플의 A버전에서 더 상위 버전인 B버전을 제공하여도 덜 효율적인 A를 쓰는 사용자가 있다. 기존에 A 버전에 익숙한 사용자가 B버전을 배우기 위한 비용과 시간을 들이고 싶지 않는 이치이다.
Allow users to interrupt processes and/or choose alternatives
흐름변화(Changes in midstream) : 사용자들의 변심을 고려하자.
A라는 일을 하다가 B라는 일을 할 수 도 있는데 중간에 하던 작업을 멈추고 다른일을 하다가 하던 일을 다시 할려고 재진입 했을때 기존 내용이 상실 되면 안된다.
어떤 경우든 간에 디자인한 인터페이스를 사용하는 동안에도 사용자의 목표는 바뀌기 때문에 사람들에게 목표를 바꿀 수 있는 기회를 제공해야 된다.
전체적인 네비게이션이 없거나 하는 등의 선택이 없는 환경에 사용자를 가두어서는 안된다.
For relatively unimportant information, allow users to respond later
선택 미루기(Deferred choices): 굳이 지금 필요한 작업인가?
즉각적인 만족을 얻기위한 사용자들을 배려하여야 한다. 인터넷을 돌아다니다가 게시판 글하나 쓰기위하여 회원가입내용을 작성하고 아이디 중복체크 및 광고등록을 방지하기위한 숫자 쓰는일을 건너뛸수는 없는지, 반드시 해야된다면 나중에 필요할때 하면 안되는 것인가에 대한 내용이다.
처음부터 선택해야 하는 사항을 많이 만들어 두지 않고 반드시 필요한 항목만 나타내게 하며 중요한 것과 덜 중요한 것을 분리시키는 방법이 필요하다. 초기값을 자동으로 기입해 주는 것도 사용자에게 즉각적인 선택을 강요하는 부담을 덜어 줄 수 있다.
Keep users engaged in the “flow” of the application
생산성 늘이기(Incremental construction) :즉각적인 반응을 할 수 있도록 하자.
한번에 완성되는 창작물은 없다. 사용자들이 어떤 정보를 만들어내는 경우 빠른 변경과 저장이 가능한 인터페이스가 필요하다.
사용자들이 작업을 하는 동안 집중하게 해주어야 하며 결과를 보는데 30초이상 걸리는 경우는 가급적 지양하도록 해야한다.
Handle similar events similarly in different (& the same) applications
습관화(habituation): 그건 어디에서나 쓰이니까.
“그건 어느 곳에서나 쓰이니까요. 여기서라고 통하지 않을 이유는 없잖아요?” 라고 생각하는 사용자의 패턴이다. 누구라도 차를 한번이라도 운전해본 사람은 어떤 차든지 엑셀을 밟게 되면 차가 나간다고 생각한다. 이와 마찬가지로 어플리케이션에서 문서를 저장할때 컨트롤+S 키를 누르면 자료가 저장되고 창을 닫기 위해는 우측상단에 X표 버튼을 클릭하게 된다.
허나 예상한 결과와 다르다면 사용자는 내가 뭐한거지? 어떻게 해야하는거지? 하면서 원점에서 다시 생각해야하는 혼란이 생기게 된다.
여기서 한발짝 더 나아가 항상 수행하는 X라는 수행을 특정상황에는 갑자기 Y를 수행하게 되버리면 그야말로 최악이라 할 수 있다.
Users tend to remember command locations, going there w/o reading
공간기억(Spatial memory): 예측할 수 있는 위치를 파악하라.
사람들은 문서를 찾을때 이름으로 찾지 않고 두었던 위치를 기억하여 찾는다. 이와 마찬가지로 사용자들이 예측할 수 있는 곳에 버튼을 배치해 두는 것도 매우 중요하다.
항상 쓰던 곳의 있던 메뉴를 재배열 하면 혼란을 유발할 수 있으며 중간보다 상단이나 하단을 더 잘 기억한다.
Provide users with the ability to return to unfinished work
미래예측 기억(Prospective memory): 스스로를 상기 시키자.
사람들이 스스로를 상기시킬수 있는 시스템을 디자인 해야한다. 일상 생활을 예로 들면 회사에 가져갈 책을 현관문 옆 테이블에 두는 행동이나 회신보낼 이메일을 활성화 해놓는 행동 , 회의시간에 늦지 않도록 알람을 설정해 놓는 행동이라 할 수 있다. 어플리케이션에서는 중간에 완료하지않은 문서를 닫았을때 미완성 문서가 있다고 알려주는 메세지와 같다.
Reduce the amount of repetitive, tedious activities the user must do
능률적인 반복(Streamlined repetition) : 동일한 작업을 줄이자.
글자를 바꿀때 Replace 버튼으로 전체 내용에서 한번에 바꾸는 매크로(Macro)기능 과 같이 사용자들에게 지루한 동일한 작업을 간단하게 할 수 있는 기능을 제공하는 것이 좋다.
By preference or physical limitation, some people won’t use a mouse
키보드만 사용하기(Keyboard only): 사용자들의 취향을 고려하자.
사용자의 빠른 입력을 위하거나 혹은 마우스를 쓸 수 없는 상황에 대비하여 마우스가 아닌 키보드 만으로 탐색이나 기능을 수행 할 수 있어야 한다.
사용자는 다음 입력칸에 가기 위해 마우스를 사용하는것도 귀찮을 수 있기 때문에 일반적인 단축키를 제공하도록 하자.
컨텐츠의 구조
사용자에게 제공하는 컨텐츠는 다음 4가지로 분류하여 디자인 할 수 있다.
1) 오브젝트 : 이메일 메시지 가 가득찬 보관함 (무엇을 가지고 작업을 할건가?)
2) 액션이나 태스크 : 검색하다. 등록하다.(무엇을 하고자 하는가?)
3) 주제별 카테고리 : 건강, 과학, 기술 (주제가 무엇인가?) 컨텐츠에 속해있는 연대순,색인,지역별등은 정보를 찾기 쉽게 해준다.
4) 툴 : 캘린더 , 주소록, 노트패드
물리적인 구조로써는 아래와 같이 크게 3가지로 분류 할 수 있다.
컨텐츠 구조 패턴
Two-panel selector
왼족패널에는 오브젝트,카테고리,액션(메일박스메세지,웹사이트섹션,파일)등을 표시하고 오른쪽 패널에는 왼쪽패널에서 선택한 컨텐츠의 내용 및 자세한 정보를 표시한다.
모바일화면에서는 추천하지 않지만 사용자의 시선 이동이 쉽고 많이 쓰이는 형태이기 때문에 사람들이 인식하기도 쉽다.
왼쪽패널이 이정표 역활을 하기도 하고 선택된 아이템과 안된 아이템을 구별 할 수 있다. 전체적으로 사용자가 시각적으로 기억해야 할 부담을 줄이는 구조이다.
Canvas plus palette
흔히 윈도우 그림판같은 구조로 왼쪽이나 상단에 툴박스(그림판일 경우 팔레트)가 위치하고 오른쪽에 큰 캔버스 화면이 나타난다. 일상 생활에서 친숙한 물건을 스크린에서 가상의 물체로 나타내는 구조이다.
One-window drilldown
모바일 화면에서 많이 쓰이고 추천하는 방식으로 오브젝트의 세부내용으로 들어가면 윈도우 전체가 새로운 화면으로 대체 되는 형태이다.(주소록, 갤린더) 단 하나의 화면만 사용하며 뒤로,앞으로 버튼이 존재해야한다.
Alternative views
지도 형식 어플리케이션에 많이 쓰이는 구조로 동일한 컨텐츠를 다른 시각으로 볼 필요가 있을 때 사용한다. (미리보기, 지도 스타일, 탐색기 리스트 보기 구성 등) 각 화면 전환은 쉽게 할 수 있어야 하며 문서 내의 사용자 위치, 저장하지 않은 변경사항 등은 모두 유지가 되어야한다. 어플리케이션이 재구동 되었을때도 마지막의 뷰 형태가 보여지게 하면 더욱 좋다.
Wizard
자주쓰이지는 않고 사용자가 세부항목 설정이 어렵고, 길면서 복잡한 단계별 작업 실행 시 사용되는 구조이다. 단 너무 많은 단계 혹은 적은 단계에는 어울리지 않으며 현재 어떤단계인지 로드맵을 표시하여 앞 ,뒤 단계로 이동할 수 있게 하여야 한다. 지하철의 내부구조를 설명하기보단, 화살표(이정표)를 따라가면 원하는 목적지에 도달 하도록 하는 것과 같은 이치이다. 이전단계를 끝마칠때까지 다음 단계를 사용할 수 없게 할 수 도 있다.
Extras on demand
가장 중요한 컨텐츠를 앞에 놓고 나머지는 뒤로 숨기는 구조로 너무 많은 내용 중에 중요하지 않는 내용이 있을때 UI를 단순하게 만들수 있는 장점이 있다. 더보기,More Option등의 링크나 버튼 및 닫을 수 있는 버튼도 있어야한다.
Intriguing branches
블로그나 위키에서 흔히 볼 수 있는 형식으로 흥미로운 컨텐츠로 이어지는 링크를 건다. 더 많은 정보를 이용하고자 하는 사용자들은 시도해볼 수 있도록 부가적 컨텐츠를 제공한다. 단, 원래대로 돌아갈수 있게끔 해야하며 언더라인,굵기,색깔 등으로 구분을 준다. 잘못 사용하게 되면 광고처럼 보일 수 있기 때문에 주의를 하여야 한다.
Multi-level help
소프트웨어를 자주 접하는 사용자나 처음접하는 사용자에게 각각 다른 수준의 도움말이 필요하기 때문에 이런 니즈를 가진 사용자를 지원하기 위해서 가벼운 도움말부터 중요한 도움말까지 조합하여 도움말을 제공한다. 엑셀에서 도움말 쿼리, 툴팁, 상단 도움말메뉴, 인풋 프롬프트, 콘텐츠 특화 도움말, 온라인 리소스 등을 예로 들 수 있다.
네비게이션 패턴
좋은 UX 디자인은 사용자들이 다음은 어디로 갈지 결정하는 시점에서 적절한 사인과 라벨을 붙여서 원하고자하는 방향을 지시할 수 있어야 한다.
페이지나 화면 이동 횟수를 간소화 하여 네비게이션 비용을 줄이도록 한다. 특히 다층 화면으로 들어가다가 앞 작업 안맞다고 처음으로 되돌아가는 경우는 피하여야 한다.
Clear Entry Points
애플리케이션이나 웹사이트에 접속했을 때 출입구의 갯수를 제한한다. 사용자의 목적에 부합하는 명확한 화면 구성으로 하나이상의 단계를 거쳐야한다면 이 방식을 사용해서는 안된다.
모바일 화면에서 유용하며 전문적 프로그램이나 스플래시 화면은 이에 해당하지 않는다.
Global Navigation
웹사이트나 애플리케이션의 모든 페이지에 일정 부분을 할애하여 주요 페이지 혹은 기능으로 이동할 수 있는 링크나 버튼으로 이루어진 고정 영역을 포함한다.
큰규모 웹사이트, 여러가지 섹션 혹은 툴로 분리된 어플리케이션에서 사용되며 현재위치를 표시해서 어디있는지 확인해주어야한다. 여기서 네이밍이 중요한데 위치표시 명칭과 그 위치로 이동했을때 명칭을 동일하게 사용하여야 한다. 최상위 카테고리를 보여 줌으로써 사용자는 사이트 혹은 어플리케이션의 전체적인 구조를 유추 할 수 있다.
Hub and spoke
가운데 허브페이지를 마련하고 각기 페이지들을 수행하게끔하며, 각기 페이지들과는 바로 연결되지 않고 하브를 통해서 연결하는 구조이다.
아래 상황에 맞을때 적절한 선택이라 할 수 있다.
- 서브 애플리케이션의 분리를 강화할 경우.
- 작업의 완료 또는 취소를 위해 워크 플로우를 제한할 필요가 있을 경우.
- 시각적, 인지적으로 일어나는 혼란을 없애기 위함.
- 물리적인 공간이 한정된 경우.
작업의 흐름이 직관적으로 확실하며 심플하고 명확한구조이다. 사용자의 스스로의 오류, 혼돈상황을 줄일수 있으나 자유로운 네비게이션에 익숙한 사용자를 노골적으로 무시하는 위험도 내포하고 있다. 작은 기기에 주로 쓰이며, 스포크의 작업 끝을 알려주는 완료 취소 등이 나타나야 한다.
Pyramid
피라미드형 네이게이션 구조를 둔다. ‘이전’,’다음’,’상위’이렇게 두어 마우스 동선을 최소화하며 이같은 네비게이션은 동일 위치에 놓는다. 슬라이드 쇼 같은 병렬구조의 시퀀스에서 사용하는 패턴으로 리스트 항목으로써 원 윈도우 드릴다운 형식이 이와같은 패턴을 가지고 있다.
Modal panel
현재 상황에 문제를 해결할때까지 오직 한페이지만 보여준다. 윈도우 익스플로러의 alert창과 유사하며 반드시 사용자의 선택이 필요한 부분에만 쓰도록 한다.
모달 패널은 이해하기가 쉬운 반면, 작업이 중단될 수 있는 위험요소를 내포하고 있다.
Sequence map
연속된 페이지에서 사용자의 현재 페이지의 위치를 표시하고자 할때 사용한다. 일종의 네비게이션 장치로써, 맵을 클릭하여 다른 단계로 점프할 수 있도록 해줘야 하며 여러 페이지의 기사에서 전체 페이지의 숫자를 네비게이션으로 만들고 이동할 수 있도록 하는 네비게이션이다.
Breadcrumbs
우선순위가 있는 UI구조에서 현재 페이지부터 메인페이지까지 거슬러 올라가는 계층구조를 보여준다. 공간이 작아서, 시퀀스맵을 사용하지 못하는 경우, 브래드크럽스를 사용 할 수 있으나 시퀀스와 달리 앞으로 갈곳을 알려주지는 않는다.
스크롤 바에 콘텐츠의 맵이나 현재 위치를 알려주는 인디케이터의 역할을 하며 주로 화면 상단에 위치 왼쪽에서 오른쪽 순서로 나타내게 된다.
Annotated scrollbar
스크롤 바에 콘텐츠의 맵이나 현재 위치를 알려주는 인디케이터를 나타낸다. 문서 중심의 애플리케이션이나 텍스트가 긴 페이지를 스크롤 할 때 툴팁으로 위치를 알려주거나 스프레트시트일 경우에는 열번호, 프로그램 코드라면 함수이름 등을 나타낼 수 있다.
Color-coded sections
컬러를 사용하여 애플리케이션의 페이지나 사이트의 섹션을 구분하는 시각적으로 통합하는 비주얼 네비게이션 패턴이다. 네비게이션바의 인디케이터, 페이지나 윈도우 타이틀과 같은 다른 사인들과 함께 사용할 수 있으며 페이지를 이동하는 도중에 한 곳에 머무르고자 하는 사람들의 성향을 반영한 패턴이다.
단, 색맹인 사용자는 컬러의 차이로 한 섹션과 다른 섹션을 구분지을경우 구분할 수 없어 유의하여야 한다.
Animated transition
장면 전환이 자연스럽게 느껴지도록 애니메이션을 사용한다. 인터페이스를 재미있게 바꾸는 요소가 될 수 있으며 빠르고 정확한 애니메이션, 사용자의 처음동작과 애니메이션간의 지연이 없거나 극히 적게끔 해야 한다. (부드러운 장면 전환을 위해서는 0.3초 정도가 이상적)
Escape hatch
위험해 보이는 다이얼로그 박스 에서 ‘CANCEL’버튼을 통해서 빠져나올 수 있다. 제한된 네비게이션 옵션이 있는 페이지를 빠져나가 이전 장소로 되돌아 갈 수 있는 확실한 버튼링크가 필요하다.
보통 웹페이지의 왼쪽상단의 로고를 누를경우, 메인페이지로 돌아가게 되어 있다. 전화 ARS메뉴 시스템에서 ‘0’번을 누르면 상담원과 연결되는 것이 유사한 형태이다.