raywalker님의 이글루

새로운 웹 기술은 디자이너들이 온라인에서 점점 데스크톱 소프트웨어에서와 같은 상호작용을 유사하게 구사하게 해주고 있다. 그러나 온라인에서 상호작용하는 application을 만드는 것은 웹용 데스크탑 소프트웨어 디자인을 하는 것과는 다르다. 디자이너는 웹 의 제약조건을 가지고 온라인환경에 맞게 사용자들을 지원해야 한다.

Rich Web Applications
기술적으로 웹 application은 웹 사이트에서 기능을 수행하는 하나의 특징이다. 사이트 검색, 전자상거래 사이트의 쇼핑 카트나 체크아웃 프로세스가 웹 application이라 할 수 있다. 그러나 이들은 매우 단순하고 평범한 예이다. Rich Web Applications은 평범한 일반 웹 페이지와 비교해서 상호작용면이나, 내용, 기능면에서 더 풍부하고 세련된 인터넷 application이다.  Rich Web Applications의 가장 큰 잇점은 사용자 경험을 증대시키는 것이다. 그러기 위해서는 더 민감하게 반응하고 정보를 더 빨리 찾을 수 있어야 하며, 잠재적으로 잃어버린 하이퍼스페이스가 덜 영향을 미치도록 해야 한다.

Rich Web Applications 탐색하기

대부분 웹 사용자는 네비게이션이 동작하는 지능적인 모델을 개발해왔다.

. 정보 탐색은 주로 링크를 클릭함으로써 이루어진다.

. 링크를 클릭하면 새 페이지가 튼다.

. Back버튼은 이전 화면으로 돌아간다.

.각 페이지는 링크되거나 북마크될 수 있는 고유의 URL을 가지고 있다.

Desptop application을 흉내내기 위해 Rich Web Applications은 이런 기본적인 가정을 변형시켜 하이퍼텍스트 시스템으로서의 웹 모델에 도전하고 있다. Rich Web Applications은 각 action으로 새 페이지로 이동하고 화면이 자신의 URL을 가지고 있지도 않고 Back 버튼이 이전 페이지로 이동하게 해 주지 않을 수도 있다.

페이지 이동과 리로드

Rich web application의 중요한 관점은 정보의 프로세싱의 일부를 서버에서 클라이언트 또는 로컬 컴퓨터로 옮기는 것이다. 이 중요한 기술은 웹 경험을 동적으로 변화시키는 결과를 낳았다. 클릭으로 페이지를 리로드하는 프로세스를 우회하는 데는 두가지 기술적인 방법이 있다.

. 데이터를 한번에 로드하기: 일부 web application은 단순하게 상호작용에 필요한 모든 정보를 사용자 브라우저에 한번에 로드한다. 데이터, 필터링하고 정렬하고 조작한 다음 페이지를 리로드한다.

. 페이지의 부분을 점진적으로 로드하기:  또 다른 기술은 전체 페이지를 리로드하는 대신 rich web application의 일부만을 새 데이터로 갱신하는 것이다. 종종 페이지의 네비게이션 영역은 정적으로 남아서 다시 네비게이션되는 일은 거의 없다.

최근에 보편화된 Ajax 프로그래밍 기술은 이런 접근에 의존하고 있다.

브라우저 제어와 Back 버튼

브라우저는 네비게이션 제어이다. 때론는 rich web application과 Back버튼으로 방해를 받기도 한다. 정적인 페이지에서 Back버튼은 이전에 방문했던 웹페이지들로의 이동이었지만, webapplication에서는 동적으로 컨텐트와 사용자가 입력한 데이터를 Back버튼이 골칫거리다.

예를 들어 사용자가 긴 양식에 정보를 입력하고 데어터를 Submit하지 않고 Back버튼을 누르면 application이 그것을 유지하도록 프로그램되지 않았다면, 다 날아갈 것이다.

Rich web application에서 Back버튼 문제라 불리는 문제를 다루는 옵션들

. 사용자가 입력한 데이터나 선택사항 보존하기

. web application안에 명확한 네비게이션 제어 포함시키기

. 방문객들에게 설정이나 입력을 잃을 수도 잇다고 경고하기

팝업 창과 외부 링크

Back버튼과 다른 브라우저 제어 문제를 극복하기 위해서, 다지이너들은 때때로 제어가 없는 새 브라우저 창에 rich web application을 연다. 이것은 application으로부터 네비게이션하는데 혼란을 주고 사여ㅛㅇ자 데스크탑에 브라우저 창들로 어지르는 결과르 낳는다. Rich web application은 더 부드러운 상호작용을 제공해야하지만 네비게이션이 복잡하거나 혼란스러워서는 안된다.

상호작용의 종류

Rich web application은 정보를 최신 업데이트된 컨텐트로 실시간으로 필터링할 수 있다.

. Drag-and drop 사용자정의: Desktop 소프트웨어 프로그램은 drag-and-drop 상호작용을 오랫동안 사용해 왔다. 웹에서는 흔하지 않은 액션이긴 하지만, rich web application은 이를 가능하게 해 준다.

.Panning and zooming: 일부 web application은 사용자가 사진이나 지도 같은 개체를 수직 수평으로 움직이거나, 잡아서 페이지에서 이동시키거나 zoom in을 할 수 있게 해 준다.

페이지 스크롤링

긴 텍스트 기반의 웹 페이지는 스크롤하는데는 보통 문제가 없다. 사람들이 데이터를 입력하거나 구성요소를 화면에서 조작할 때는 컨텐트와 컨트롤을 동시에 보일 필요가 있으므로 문제가 된다. Rich web application내에서 계속 스크롤을 해야 한다면 페이지 상의 모든 기능의 개요를 알아보는 것보다도 어렵다. 스크롤하는 것을 피하는 한가지 방법으로는 컨트롤을 위해 접을 수 있는 구성요소를 갖는 것이다.

정보 캡쳐링과 리파인딩

일반적인 웹 페이지는 정적이다. 동적인 메뉴와 비슷한 매커니즘은 인터페이스에서 상호작용적인 감을 더해 줄 수 있지만 대부분은 사용자 컴퓨터 상에 한번 다운로드 되면 그대로 남는다. Rich web application은 동적이다. 사용자 입력에 응답하여 정보를 표시해 준다. 이것은 주어진 컨텐트 집합을 가리키고, 많은 경우에 application을 한번 닫으면, 옵션 구성을 잃어버리므로 어렵다.  기술적인 회피책으로는 web application에 데이터 상태를 보존하는 것이다.  이것은 한편으로는 application 주어진 상태에 대한 정적인 URL를 만드는것과 관련이 있다.

Rich Web Application 디자인하기

Rich web application을 디자인하는 전체 프로세스는 프레임워크와 비슷해 보인다.

. 사용자 목표와 비즈니스 목표를 조사하고 제품 요구사항을 끌어낸다.

. 제품을 논리적으로 구조화하여 목표와 요구사항에 맞춘다.

. 대안저거 디자인 방향을 탐색하고 이를 화면 레이아웃으로 캡쳐한다.

. 폰트, 컬러, 아이콘 같은 것을 고려하여 최종 화면 프리젠테이션을 디자인한다.

. 디자인 평가 테스트를 할 수 있는 만큼 반복한다.

상호작용을 위한 디자인

Interaction Design은 제품의 행위를 디자인하는 것을 다르는 광범위한 필드이다. 컴퓨터 프로그램과의 소통부터 핸드폰 같은 물리적인 제품과의 소통까지 모든 것을 아우른다.

기존 기술은 관습적인 웹 사이트 디자인과 rich web application 디자인사이의 공백에 다리를 놓는 것을 도와준다.

. 구조: 웹 사이트의 핵심은 전형적으로 계층구조에 있다. Rich web application은 그러나 종종 터미널 집중방식 (hub and spoke) 구조와 Linear workflow의존한다. Wizard는 전형적인 선형 구조이다. 예를 들어 화면이 순차적으로 보이는 곳이다.

허브를 이용하면, 정보를 보고 application을 제어하는 main page가 있고 그것으로부터 확장된 개별 페이지가 이다. 이런 종류의 구조를 조합하는 것이 일반적이다.

. 상태와 영속: Rich web application은 동적이므로 화면의 상태가 매우 중요하다.이것은 필터 설정, 정렬 순서, 사용자가 선택한 조건그리고 페이지상에서 구성요소의 위치를 포함한다. 현재 상태를 지속시키려면 작없이나 구성을 저장하는 것이 중요하다.

. 에러: 일반 하이퍼링크를 따라 웹을 네비게이트하면 에러가 안나지만 링크 작업은날수도 있고 안날 수도 있다.

귀납적인 사용자 인터페이스

웹 상에서 기교를 배우는 것은 반드시 빨라야 한다. .사람들은 사이트를 사용하는 방법을 배우는데 많은 시간을 낭비하지 않는다. 이것은 반대로 desktop software application에 대한 기교를 배우기를 기대할 수도 있다.

. 각 화면에는 한 개의 주요 태스크로 제한하라.

. 각 태스크는 분명하고 명확하게 설명하라.

 출처 - Designing Web Navigation -James Kalbacb

Navigating Social Classifications
사람들은 중요한 것을 나중에 다시 찾기 위해서 또는 다른 사람과 자원이나 개체를 공유하기 위해서 와 같은  두 가지 주요한 이유로 태그를 붙인다. 두 가지 모든 경우, 네비게이션은 중요한 역할을 한다.,  이를 이해하기 위해서는 태깅 프로세스에서 구별되는 세가지 다른 활동을 고려해야 한다.

태그 생성하기

태그를 만들 때는 태깅시스템에 접근방법,  만들어질 태그에 대한 제안 방법 그리고 태그가 입력될 수 있는 형태등을 고려해야한다.

태깅 장려하기

사람들은 여러가지를 체계화하는 것을 좋아하지만 동시에 그렇게 해야할 떄는 게을러 질 수 도 있다 .social classification이 효과적이려면 태깅방법이 단순해야 한다.

태깅 서비스에 접근하기

북태거마킹 서비스는 bookmarket이라 불리거나 브라우저 북마크 바에 포함되어 있는 JavaScript의 작은 조각으로 자주 접근된다. 프로세스는 단순해서 웹을 서핑하다가 저장하고자하는 페이지를 브라우저에서 bookmarklet을 클릭해서 저장한다.

.북마킹 서비스로 네비게이팅하는 데는 두 가지 모델이 있다.

Parallel bookmarking: 평행 접근을 하면, 브라우저 내의 bookmarklet과 같은 외부의 접근 링크는 팝업창을 띄워서 사용자가 현재보고 있는 페이지를 떠나지 않게 한다.

Sequential bookmarking: 순차적 접근은 북마크를 추가하는 페이지를 대신 현재 브라우저 창에 채운다. 페이지가 추가된 다음 사용자는 이전에 보고 있던 페이지로 돌아간다.

태그 제공 하기

태그를 선택하는 일은 만만치가 않다. 방문객들이 기존 목록에서 가능한 태그를 선택해서 입력할 수 있도록 한다.

. 태그 형식: 태그가 보이는 형태는 자원을 찾는데 있어서 중요하다. 일부 태깅 시스템이 공통적으로 가지고 있는 문제점은 입력된 태그의 떨어져 있는 공백을 어떻게 다루는가 하는 것이다. 두 개 이상의 단어로 태그를 입력하면 어떤 태그 시스템은 공백과 별도의 단어를 태그 목록에서 다른 입력으로 보기도 한다.

좀 더 나은 대안으로는 코마로 구분된 태그입력을 다른 태그로 보는 것이다.

 자신의 태그 탐색하기
태그의 중요한 동기가 자원으로 다시 돌아갈 수 있도록 하는 것이므로 자신만의 태그를 탐색하는 것은 중요하다. 

.태그 보기: 태깅 시스템은 간단한 제어를 제공하여 알바벳순, 최근 날짜순, 많이 쓰는 태그 기타등등, 다양한 방법으로 목록을 필터링하고 정렬하게 해 준다. 이런것들은 일반적으로 사용자가 자신의 태그를 효과적으로 제어 사용하게 해준다.

.태그 결합시키기: 태그를 결합시키는 기능은 자원을 위치시키는 강력한 툴이 될 수 있다. 이를 위해 시스템은 자원 목록이 보일 때 관련된 태그를 제공한다.

.자원 탐색하기: 태깅 시스템은 태그 뿐만 아니라, 태그가 된 자원 모두 쉽게 탐색할 수 있어야 한다. 자원은 종종검색 결과 목록과 비슷한 테이블 형태로 보여진다.

다른 사람의 태그 탐색하기
일반적으로 사회적 분류에 의해 태그된 자원은 우연한 발견으로서 자연스럽게 탐색된다. 협력적인 필터링과 적응적인 네비게이션은 태깅 시스템내의 사회적인 분류를 보여주는 데 있어서 중요한 기술이라고 할 수 있다.

.적응성이 있는 네비게이션: 태그 구름은 사회적 분류로부터 태그를 보여주는 데 가장 흔한 방법이다. 사회적 분류시스템에 연관된 고유한 또는 안정된 계층이 존재하지 않으므로 일반적으로 한정된 셋의 상위 레벨 카테고리를 보여주는 것이 불가능하다. 종종 태그 구름에서 제한된 태그 셋은 연대순이나 보편적인 순으로 잘려져 보여진다.

.주어진 자원에 대한 태그 탐색하기: 태깅 시스템은 매우 많은 태그를 포함하고 있어서 어떤 태그는 사용자가 태그 시스템에서 자원을 볼 때만 보여지기도 한다. 태그를 다른 사람들에게 보여지도록 하는 것은 그 항목이 발견을 유도하는 데 관련된 네비게이션의 중요한 종류로서 사용되어 왔다.

. 다른 사람들에게 링크하기: social taggig 시스템에서 고유한 특징은 사용자 사이의 직접적인 관계이다.

사회적 분류에 대한 네비게이션 매커니즘을 만들 때, 가능한 곳에 사회적 연결이 보여지도록 해야 한다. 이것은 새로운 자원을 발견하는데 있어서 매우 중요하다.

.RSS(Really Simple Syndication)를 통해. 태그 구독하기: 많은 태깅 시스템은 구성원들이 RSS를 통해 태그를 구독할 수 있게 하고 있다. 이것은 주어진 태그를 사용자의 RSS 피드 구독자에게 새롭게 추가되는 “push”이다.

 종합 접근: Top-Down과 Bottom-Up

사람들은 자연스럽게 물건을 분류하려는 경향이 있다. 디지털 세계에서는 컴퓨터 파일이나 폴더로 개인적인 시스템을 구축한다. 모든 검색과 구성은 데이터에 관한 데이터라고 불리는 메타데이터에 의존한다. 태그는 단순히 우리가 웹상의 자원과 개체에 적용해서 나중에 찾을 수 있도록 하는 메타데이터이다.

Tagging
전통적으로 책을 분류할 때는 controlled vocabularies라 불리는 표준화된 분류표를 사용한다. controlled vocabularies는 변형된 용어와 관련된 용어를 선호되는 용어로 매핑하여 언어를 명백하게 하는 것을 추구한다. 태깅은 controlled vocabularies 분류표에 아래서 위로의 접근하는 대안을 제공한다. 태깅 시스템에서는 어떤 사용자든 지 웹상의 자료나 개체에 자유롭게 섵택된 용어를 할당할 수 있다. 자료에 태그로 사용된 용어는 비공식적이고 개인적일 수 있으므로 태깅 시스템은 미리 정의된 구조의 통제 용어로는 부족하다.

자연 언어를 사용하여 자료를 설명하는 것은 태깅 시스템의 강점이다. 주어진 자료에 는 얼마든지 태그를 붙일 수 있고 태그된 자료를 통해 탐색가능한 여러 경로가 허용된다. 사람들은 철자를 잘못쓰거나 의미없는 태그를 사용하기도 하기 때문에 태깅 시스템은 “meta-noise”라고 불리기도 한다.

통제 언어로 분류

일관된 단어 형태와 사용

미리 정의된 선호되는 용어의 배타적인 목록에 의존

완전하고 구조적

융통성이 없고 일반적

준비된 카테고리에 의하여 메타데이터가 자료에 적용된다.

외부에서 유지보수가 요구되며 생성과 유지보수에 시간과 비용이 많이 든다.

개방된 태깅 시스템

일관성없는 단어형태와 사용

어떤 용어도 사용가능

불완전하고 즉흥적

융통성이 있고 매우 사적임

누구나 자료에 태그를 붙일 수 있다.

사용자나 사회가 자신들과 관련된 메타데이터를 적용한다.

단체가 사회 집단을 통해 퍼지는 메타데이터를 생산하는 작업을 추진

태깅시스템의 값 대 controlled vocabularies에 대한 논의는 최근까지 계속되었다. 궁극적으로 한 접근은 다른 접근을 대체하지 않으며 각각은 그에 어울리는 곳이 있다는 것이다. controlled vocabularies는 의학이나 법률 연구영역처럼, 사용자가 그 필드의 숙련가들로 정보를 찾는 데 대한 이해가 중요한, 작고 잘 정의된 영역에서 잘 작용한다. , 회사 인트라넷과 B2B웹사이트에는 controlled vocabularies와 전통적인 분류 수단이효과적이다.

태깅 시스템

태깅시스템에는 여러 종류가 있는데  모두 다음 세가지 요소들을 포함하고 있다.

. 자원: 웹 페이지나 사진처럼 태그되는 대상

. 사용자: 태그를 자원에 적용하는 사회적인 태킹시스템 구성원

. 태그: 자원을 서술하는데 사용되는 용어.

실질적으로는 웹 상의 모든 자원에는 태그를 붙일 수 있다. 태그를 생성, 유지, 사용하는 데있어서 중요한 다른 점은 태그되는 대상의 자원을 다루는 것이다. 자원의 원천은 누가 태그를 붙이고, 어떻게 태그되는가에 영향을 준다.

사회적 분류

사람들이 다른 구성원들로부터 태그를 탐색할 수 있게 하는 서비스를 사회적 태깅 시스템이나 공동 제작한 테깅 시스템 또는 folksonomy라 부른다. 사회적 분류 구조는 창발적인 구조이므로, 태그가 자유롭게 성장하고 시스템에 추가된다. 일반적으로 .

검색 전 네비게이션
브라우저 매커니즘을, 검색 양식 자체를 가지고 시작하는 검색 프로세스와 통합하는 많은 방법이 있을 수 있다.

Scoping Search

어떤 검색 형식은 사람들이 Go 버튼을 클릭하기 에 앞서, 검색시 초점을 더 한정되게 설정할 수 있게 하는 범위지정 옵션을 포함한다. 드롭 다운 메뉴는 종종 주 네비게이션을 반영하는 사이트의 주요 컨텐트 영역을 포함한다. 방문객은 메뉴에서 카테고리를 선택하여 검색할 컨텐트 범위를 제한한다.

Word Wheel

검색 시스템에 미리 작은 규모의 용어 목록 리스트들을 보여주는 것이다. 동적으로 사용자가 입력한 문자와 일치하면 빨리 리스트의 적절한 부분을 표시해 준다. 예를 들어 N을 치면 N으로 시작되는 단어 중 첫번째 다섯개나 열개 단어를 보여준다.

Canned Searches

Canned Search는 검색 질의를 포함하도록 프로그램되어 있는  “리소스 더 찾기”같은 링크이다. 링크를 클릭하면 자동으로 검색을 수행해서 결과를 보여준다.

검색 후 네비게이션
사람들은 종종 단어나 구를 생각하고는 신중하게 질의를 명확하게 하지 않고 가능한 빨리 검색하기를 원한다. 결과를 보면 갑자기 검색을 다듬을 방법이 필요하다는 것을 발견한다. 이럴 때, 토픽 링크, 클러스터링, 그룹핑, 검색 제안과 같은 네비게이션 기술이 도움이 된다.

 Topic Links

검색 결과는 종종 각 페이지의 주제뿐만 아니라 찾아진 각 페이지대한 세부사항을 포함한다. 각 페이지의 주제가 연결되어 있을 경우, 하나를 누르면, 사람들의 흥미와 일치하는 주어진 주제에 대한 더 많은 이야기를 탐색할 수 있게 해주는, 그 카테고리에 대한 다른 페이지로 가게 된다.

Clustering andGrouping

더세련된 검색 엔진은 자동으로 주제별로 비슷한 결과를 부분집합으로 묶어서, 네비게이션 종류처럼 페이지의 한쪽편이나 윗쪽에 부분집합 목록을 보여준다. 이런 부분집합을 만드는 공통적인 두가지 방법이 클러스터링과 그룹핑이다. 용어는 종종 교환되어 사용되긴 하지만, 기술적으로 접근하는 것은 다르다.

클러스터링은 카테고리가 자동으로 일련의 결과로부터 얻어진다. 알고리듬은 항목 같은 클러스터를 찾는 것 뿐만 아니라 카테고리 라벨을 결정하는 것이다. 라벨은 동적이기 때문에, 같은 질의를 입력해도 검색을 반복할수록 변할 수 있다.

그룹핑은 용어가 일종의 용어 index나 taxonomy에 이미 존재하는 것이다. 표시되는 결과는 검색할때마다 다양하지만, 용어자체는 항상 똑 같은 표준화된 형식으로 나타난다. 시스템은 페이지의 주제를 결정하여 기존 라벨을 적용시키거나 페이지가 미리 연관된 카테고리 정보를 포함하고 있다.

검색 엔진은 방문객들이 검색이 수행된 후에 질의를 정제하는 걸 도움으로써, 대안적인 검색 용어 사용을 제안한다. 종종 단어 목록이 검색 결과 세트의 컨텐트를 기반으로 생성되기도 한다.

검색 결과를 발견하지 못할 때는 눈에 띠는 페시지가 나타난다. 입력한 용어가 인덱스에 있는 기존 용어와 일치할 경우, 시스템은 대안적인 철자를 제안할 수도 있다. 또 다른 전략으로는 탐색이나 사이트 맵의 일부를 위해 카테고리를 보여주는 것이다.

Faceted Browse
Faceted browse interface는 대규모 정보의 내용을 탐색하는 시스템으로 Berkeley대학 연구원들이 개발한 것이다. Interface는 정보 구성의 수단으로써 Facet와 Faceted 분류에 의존한다.

Facets

Facet는 카테고리이다. 계층과는 달리, 다른 facet 카테고리의 값은 서로 구조적으로 연관이 없다. 이 때문에 개체 집합으로 얼마든지 접근하는 방법이 허용된다. Facet를 와인병으로 예를 들면, 와인을 설명하는 지역, 종류, 가격과 같은 중요한 속성들이 있는데, 이들 각각은 상호 배타적인 facet이다. 예를 들어 지역은 종류나 가격과는 독립적이다. Facet 카테고리로부터 값을 선택한 다음 facet로부터 모든 다른 값을 걸러낸다. 다시 말하자면 와인은 동시에 레드나 화이트가 될 수 없다는 것이다.

사람들은 컨텐트가 풍부한 정보를 좋아한다. 우리가 정보를 어떻게 찾아서, 조직화하고 이해하는 가는 표시되는 방법에 영향을 받는다. 네비게이션의 비쥬얼한 처리는 보기좋은 것 뿐만 아니라 직관과 사용에 있어서 중요하다..

프리젠테이션의 전제에 걸친 목표는 네비게이션 시스템을 통하여 방문객들을 시각적으로 안내하고 전체 정보 경험을 강화시키는 것이다.

정보 디자인
일반적으로 정의하자면, 정보 디자인은 정보 표현을 처리하여, 인간이 사용하기 쉽고 이해하기 쉽도록 만드는 것이다. 웹디자인면에서 보면 정보 명확성과 사이트 네비게이션과 컨텐트의 이해 증가와 연관이 있다.

Negative space

링크, 텍스트, 이미지를 포함하고 있는 페이지의 영역은 positive space라고 한다. Negative space는 그사이의 영역을 의미한다. 두 space가 같이 시각적으로 동작한다. 레이아웃의 공백을 이용하여 잇점을 살리고, 페이지에서 불필요한 요소의 점유를 피해라

Chartjunk

Tufte 교수가 고안한 용어로 정보 표시에서 불필요한 것을 말한다. 사람들은 종종 정보의 질을 높이려고 그래픽과 라인들을 추가하는데, 오히려 그 반대 역할을 한다.

Layering

웹 네비게이션 같은 정보 표시는 시각적인 깊이를 가질 수 있다. 어떤 요소들은 다른 것들보다 앞쪽에 있을 수 있다. 효과적으로만 사용한다면, 네비게이션 겹쳐놓기는 사이트를 통틀어 옵션의 우선도를 알려줌으로써 방문객들을 안내할 수 있다.

Typography and TextDesign

Typography는 글자 형태와 텍스트의 일반 디자인의 선택이다.

컴퓨터 화면에서 읽는 Online typography를 디자인하는 것은 저해상도 때문에 어렵다. 이뿐만 아니라 사람들은 웹 페이지를 빨리 대강 읽는 경향이 있기 때문에 가능한 한 가독력을 증가시켜야 한다. 이를 위해 다음과 같은 점을 고려해야 한다.

. 폰트

. 대소문자

. 크기

. 텍스트 Weight(bolding)와 Style(italicizing)

. 정렬

.

네비게이션으로 상호작용
웹은 정적인 매개체로 사람들이 링크의 체인을 끊임없이 클릭, 검색, 탐색한다. 읽기 쉽고 미학적으로 즐겁게 해 주는 네비게이션 생성을 넘어서서 사용이 용이하도록 디자인해야한다. 네비게이션으로 상호작용을 하는데 있어서 특히 중요한 것은 다음과 같다.

Underlining Links

일반 텍스트와 구별하기 위해서 대부분 브라우저가 적용하는 default style로 파란색 밑줄을 하이퍼링크에 적용한다.

Target Size

Fitts의 법칙은 심리학자 Paul FittsFitts가 개발한 인간 정신운동 행동의 모델이다. 그것은 컴퓨터 마우스를 사용하는 빠르고 목적있는 제스처를 기반으로 동작과 움직임을 예측하는 것이다. Fitts의 법칙에 따르면 모든 의도와 목적에 대해서 구성 요소가 클수록 마우스는 쉽게 가서 클릭한다.

Rollovers

롤오버는 마우스 커서가 링크나 네비게이션 위로 이동할 때 발생하는 변화를 의미한다.

가장 간단한 롤오버로 링크의 색상을 변경하고 밑줄을 만드는 것을 들 수 있다.

그래픽 디자인
네비게이션 모양은 직관과 사용에 있어서 중요한 역할을 한다. 사이트의 그래픽 디자인은 사이트의 특징뿐만아니라 온라인 브랜드 이미지를 생성 강화하는 데 성공적이다.

. 텍스트 기반 링크의 잇점

-      그래픽보다 빨리 로딩된다.

-      방문한 링크 상태를 색상변경으로 표시할 수 있다.

-      일반적으로 접근성이 더 좋다.

-      .컨텐트 관리 시스템을 관리하기가 더 쉽다.

. 그래픽 이미지의 잇점

-      3차원 모양의 버튼과 네비게이션 바를 줄 수 잇다.

-      사용자 컴퓨터에 설치하지 않아도 되는 폰트를 이용한다,.

-      일반 텍스트로는 불가능한 롤오버 효과와 다른 강조 옵션을 만들 수 있다.

-      전체적으로 텍스트 링크보다 전문적인 특성을 가질 수 있다.

색상

색상은 단순한 장식 이상이다. 상호작용을 용이하게 하고 네비게이션 옵션 내에서 우선도 생성하는데 도움을 준다. 레이어링도 다른 그림자와 색상을 이용한 색상으로 얻어질 수 있다.

색상코드는 타입별, 주제별로 달리 할 수 있다.

아이콘

아이콘을 사용함으로써 정보의 감을 높일 수 있다.  아이콘은 명확해야하며, 갯수의 제한이 있으며, 기억하기 쉽고 공통의 언어라는 점을 고려해서 만들어야 한다.

장점

. 레이블을 강조함으로써 명확성에 기여한다.

. 스캐닝과 소재에 도움이 된다.

. 사용자가 사이트의 기능적 요소를 배우고, 이해하고 기억하는 것을 용이하게 해 준다.

. 잠정적으로 네비게이션 옵션의 클릭가능한 영역을 증가시킨다.

. 아이콘 자체는 텍스트 레이블보다 덜 공간을 차지한다.

단점

. 모호할 수 있다.

. 문화에 따라 아이콘에 대한 해석이 다양할 수 있다.

. 종종 추상적인 개념은 잘 표현하지 못한다.