[펌]일반 웹사이트 인터페이스 설계 프로세스

웹사이트 인터페이스 설계 특징

기존의 윈도우 애플리케이션의 경우 어떤 특정 목적이나 기능(task)을 가지고 애플리케이션을 사용한다. 이러한 점 때문에 윈도우 애플리케이션 인터페이스 설계시 평가 방법은 사용자에게 어떤 기능을 수행하여 보도록 하여 이들을 기록하고 그 기능 수행 과정 중 발생하는 어려움, 오류 또는 총 소요시간 등을 평가하게 된다.

하지만 일반적으로 웹사이트의 경우 사용자 계층을 보면 목적 수행이 우선인 거래 편의 추구자 계층이 있는 반면에 정보 탐색자, 거래 교섭자, 접속 추구자, 컨텐츠 매니아 등 그 계층에 따라 접근 목적이 매우 다양하다. 이렇게 사용자가 어떤 특정 수행 과업(task)이 없이 행동할 때 오류, 어려움 등을 발견하는 정해진 틀에 의한 평가는 웹사이트 설계시 별 효력을 발생할 수 없게 된다.

이와 같은 주요 차이는 기존의 윈도우 애플리케이션 인터페이스 설계에서의 작업분석 과정과 기능구조설계 과정보다는 사용자를 분석하고 이해하고 각각의 사용자에게 적합한 정보구조를 설계하는 과정을 중요시하게 한다.

• 웹사이트 인터페이스 설계 프로세스



단계 상세내용 적용 방법론
현 상황 분석 및 도메인 분석

프로젝트의 전반적인 이해

경쟁 웹사이트 분석

Positioning 분석

벤치마킹 분석

사용자 분석

대상 사용자 정의

사용자 시나리오 작성

사용자 관찰

사용자 인터뷰

정보 구조 설계

정보(메뉴) 구조도 작성

레이블링 시스템 설계

카드소팅

정보구조 프로토타입

프로토타입 제작각 페이지별 프로토타입 제작

페이퍼 프로토타입

인터렉티브 프로토타입

프로토타입 평가 및 가이드라인 제작

프로토타입 검수

인터페이스 가이드라인 제작

정보구조 가이드라인 제작

프로토타입 테스트
인터페이스 설계
각 페이지별 화면 설계
인터페이스 디자인


• 인터페이스 설계 결과물

아래 좌측의 그림은 웹사이트의 페이지 Depth별로 적용되는 레이아웃을 웹사이트 페이지를 구성하는 각각의 요소별로 정리한 인터페이스 가이드라인이다. 우측의 그림은 인터페이스 디자인 과정의 전단계로 각각의 구성요소를 가이드라인에 맞게 구성한 인터페이스 프로토타입의 예이다.




















• 웹사이트 인터페이스 구성 요소별 설계 가이드라인

웹사이트 인터페이스의 설계는 비즈니스 모델, 마케팅 및 기술적 요구사항, 사용자 환경, 사용자의 페르소나(persona), 역할, 목적, 과제 등 수많은 요소의 분석을 필요로 한다. 특히 다음과 같은 요소를 설계하는 것은 필수적이다.
  • 메타포: 언어와 이미지, 소리, 촉각적 경험을 통해 전달되는 기본적인 개념

    1. 메타포는 개념적인 구조를 제공하는 것을 바탕으로 커뮤니케이션을 위해서 꼭 필요한 요소만을 포함시켜야 한다.
    2. 일관성있게 혼란을 일으키는 요소를 최소화하여 정보의 의미를 명확히 전달해야 한다.
    2. 구조적 메타포는 경험한 시스템의 구조를 새로운 시스템 구조의 이해로의 전환을 빠르게 해야 한다. 이는 사용자가 지니고 있는 구조적 체계를 최대한 고려해야 한다.
    3. 기능적 메타포는 새로운 환경과 이전의 전통적인 방법과 연결시켜주는 역할을 해야 한다.
    4. 가시적 메타포는 그래픽적인 요소들의 이해를 도와야 한다.

  • 멘탈모델: 컨텐츠, 기능, 매체, 도구, 역할, 과제 등의 계층구조와 같은 데이터, 기능, 과제, 역할, 그리고 그룹을 지어 일하거나 놀고 있는 사람들의 구조 혹은 조직

  • 네비게이션: 컨텐트, 도구와 같은 멘탈 모델을 통한 동작

    웹사이트 네비게이션은 계층적 네비게이션, 글로벌 네비게이션, 로컬 네비게이션, Footer 네비게이션, OS 또는 브라우저 콘트롤, 문장속의 링크 총 6가지로 구성된다. 네비게이션을 설계하기 위한 고려사항은 다음과 같다.

    1. 쉽게 익힐 수 있어야 한다.
    2. 피드백을 제공해야 한다.
    3. 문맥으로 표시되어야 한다.
    4. 대안을 제시해야 한다.
    5. 행동과 시간을 절약할 수 있어야 한다.
    6. 명확한 시각적 메시지를 제공해야 한다.
    7. 명확하고 이해할 수 있는 레이블을 제공해야 한다.
    8. 사이트의 목적에 적합해야 한다.
    9. 사용자의 목적과 행동을 지원해야 한다.

  • 외관 : 시각적, 청각적, 촉각적 특징

    웹사이트의 외관은 컨텐츠와 구조, 스타일 3박자가 잘 갖추어져야 좋은 커뮤니테이션 도구로서 의미가 있다. 웹사이트의 외관을 설계하기 전에 먼저 컨텐츠가 어떤 성격을 갖고 있으며 정보의 양은 어느 정도이며 사용자 타겟이 누구인지를 정확히 파악해야 전략적인 스타일과 좋은 Look & Feel을 만들 수가 있다.

    1. 컨텐츠를 이해해야 한다.
    2. 웹사이트 디자인은 브러우저를 통해 보여진다는 것을 고려해야 한다.
    3. 프레임의 선택을 통해 고정된 공간과 유동적인 공간을 구분해야 한다.
    4. 레이아웃의 기본인 그리드(Grid)를 적극적으로 활용해야 한다.
    5. 네비게이션 영역과 컨텐츠 영역을 그룹핑하여 서로의 규칙을 만들어야 한다.
    6. 구조의 확장개념으로 인터렉티브 테크놀로지를 이용해야 한다.

  • 인터랙션: 입출력 기술, 피드백

    웹사이트에서 이루어지는 가장 큰 인터랙션은 피드백이라 할 수 있다. 피드백은 크게 다음과 같이 세가지 종류로 나뉘어 진다.

    Lexical Feedback

    클릭했을 때 메뉴 아이템이 활성화된다던가 클릭이 가능한 메뉴에서 마우스 커서의 모양이 바뀐는 것과 같이 가장 일반적인 피드백

    Syntactic Feedback

    메인 메뉴를 선택하면 서브메뉴가 보여지는 것과 같이 메뉴체계에서 많이 쓰이는 피드백

    Semantic Feedback

    파일을 마우스로 드래그 하여 옮겨 놓을 수 있는 것과 같이 보이지 않는 의미론적인 피드백



    웹사이트 인터페이스 설계시 위와 같은 세가지 피드백을 상황에 맞도록 사용자에게 전달해야 한다.
• 웹사이트 인터페이스 설계 가이드라인

웹사이트 인터페이스 설계의 기본 개념은 작업 지원 수준, 사용편리성, 미학적인 구성 이렇게 세가지로 구성된다.

첫번째 작업 지원 수준에 대한 원칙은 웹사이트의 인터페이스는 반드시 사용자의 기대에 부응해야 하고, 사용자가 원하는 작업을 지원해야 한다. 작업 지원 수준에 대한 가이드라인은 사용자 분석과 기능분석 과정에서 명확해 진다.

두번째 사용편리성의 기본원칙은 인터페이스는 배우기 쉽고 기억하기 쉬워야 하며 사용하면서 유쾌해야 한다. 또한 사용자의 실수를 유발하지 않아야 한다.

마지막 미학적인 구성의 기본원칙은 인터페이스는 사용자와 시각적으로 커뮤니케이션을 해야 하며 시각적인 커뮤니케이션을 통해 사용자의 정보 흡수와 작업수행을 도와야 한다. 이때 너무 많은 정보로 사용자를 압도하는 일이 있어서는 안된다.


——————–
출처:코리아인터넷닷컴

답글 남기기