[Ewd]class05 0405

2012 KGIT [CLASS 05 | 0405]

익스프레시브 웹 응용 디자인
Expressive Web Application Design

Expressive Web Application Design | WEEK 2 : FLEX.HTML5

TODAY WE WILL COVER,

01. Design Application
02. Content Display


| Design Application


001. Application Structure

Application
Structure

Information Process Creation
Structure Structure Structure


Information
Structure

- Online 상점 제품 Browsing
- 경영 대시보드
- 뉴스 리더기
사용자  New Information
- 미디어 플레이어등

특별한 노력 없이도 적절한 정보
를 바로 얻을수 있게 하는 것



- 데스크톱 저작 도구
- 비디오 편집기 사용자  새로운 컨텐츠 생산 및 수정
- 음악 시퀀스 편집기 등

Process
Structure Creation
Structure

특정업무 수행. 단계별 정보 제공. 자유로운 형태의 수정.
정보 받는 것에 집중 프로세스보다 선형적이지 않음


BUT,
Multi Structure Application 가능


002. Apply Structure
* Information Structure
= 사용자의 주요 목표가 각기 다른 정보를 브라우징하고 비교 이해하는데 사용
컨텐츠가 주 화면을 차지함

보조기능

Hub & Spoke Model

모든 정보와 조절기능 중앙 허브에 통합

* Information Structure
= 사용자의 주요 목표가 각기 다른 정보를 브라우징하고 비교 이해하는데 사용

Hub & Spoke Model

 다양한 정보배열로 사용자의
니즈를 충족시키기 위해
멀티 뷰 제공


* Process Structure
= 사용자의 기본 목표가 간단하고 능률적이고 구조화된 정보를 제공하는 것일 경우, 프로세스 구조가 적합하다.

! 주의하기 *
1) 진정으로 필요한가? (선택 VS 필수) 선택방법 = 작업의 단계가 어떻게 나누어 졌는지에 따라 변경
2) 자동적일수는 없을지? 즉, 한단계의 옵션을 변경하는 것이 다른 것에 어떤 영향을 미치는지 보여주는 것이 중요
3) 반복적이지는 않은지?
**
프로세스의 다른 단계를 네비게이션할수 있는 방법 제시
잘못 입력한 부분 변경 및 아직 준비가 안된 정보 Skip 및 얼마나 남았는지 예측

***
입력된 정보에 대한 유동성 제공
유효하지 않은 정보 입력 가능/정보 저장/임시정보

***
컨트롤가 위젯을 위한 공간 배정


* Creation Structure
= 사용자의 주 목표가 완전히 새로운 컨텐츠를 만들거나 기존 컨텐츠에 중요한 변화를 주는것에 적절

! 주의하기
1) 한정된 업무에만 사용
2) 목적 중심= Process Structure적합
3) 컨텐츠=중앙 | 컨트롤=가장자리
4) 직접 조작, 편집기능 우선시
5) 기능의 수와 사용자 경험과는 반비례

PicniK=창작구조. 주된 기능만 제공.컨텍스트에서 옵션 제공. 사진 편집기능 간단히


003. Fluid Navigation
Flow Experience
= 화면이 바뀔때 모션 사용 + 사용자의 업무 이해하여 목표를 Application에 끼워넣기

* 불필요한 네비게이션 제거 :
 더 많은 시간을 Contents와의 Interaction 또는 작업을 완성하는데 시간 투자
 계층 구조나 사이트맵에서 페이지와 화면을 정리하는 것을 탈피 사용자의 주 업무화면으로 직접 플로우 매핑
 디자이너의 목표 = 사용자들이 정확한 컨텐츠를 가능한 빠르고 쉽게 찾을수 있도록 Navigation을 디자인


Flow Experience

* * 사용자의 하나의 목표 = 하나의 화면
 기능의 계층화가 아닌 사용자 업무와 유연한 경험을 바탕으로 Flex Application Navigitaion 디자인
 “집=Application”과 “방=화면과 Page”들이라고 생각 (Cooper & Reiman 2003)


Flow Experience

* * * 와이어 프레임=구조 & 스토리보드=사용자 Task & 프로토타입 = 사용자 인터랙션
* * * * 계층적 사이트맵이 아닌 허브와 바퀴살의 Navigation Model 참조


004. Entry Point
Good Entry Point
= 첫 화면에서 사용자의 목표 달성 방법 제시 즉 좋은 대문, No Skip Intro

* 인터랙션 없이도 사용자 목표와 관련된 유용한 작업과 정보를 나타내는 Entry Point 디자인
 Information Structure=의미있는 Contents, 관련 Contextual Contents, 유익한 정보 즉각적으로 보여줌
 Process Structure = 사용자의 목표를 위해 지원하는 업무 명확히 나열
 Creation Structure = 기존 작업에서 시작
 No Login Process & No Loading Animation


005. Visual Hierachy
Application의 주 원소(하급구조)
= 개별 화면 구조. 비주얼 계층을 효과적으로 활용하여 잘구조화된 화면 설계

* 견고한 비주얼 계층을 채택. 페이지의 중요한 요소와 소통 후 다음작업으로 인도
 색, 모양, 질감, 방향, 크기, 위치등의 비쥬얼 변수를 적용하여 중요도에 대해 사용자와 Interaction
 각 화면에 대한 명확한 이해 및 목적 확인
 사용자가 어떻게 목표를 달성할 것인지 명확하게 인지.
 색=유해한 작동 금지. 크기=가장 중요한 부분 부각. 위치=폼의 요소 순서대로 보게 유도


| Contents Display


02. Contents Display
001. Information Design
* 사용자가 컨텐츠에 가지는 “질문”에 맞게 Contents를 Display하자
 다양한 질문이라면 Multi View로써 질문에 대한 해답을 다각화 하자

* * Contents Display를 제일 우선 그리고 나중에 Crome(Component)
 먼저 정적 Contents Display에 만족 후, 사용자의 질문에 답할수 있는 최소의 Navigation, Filter, Control 추가

1) 실제 Sample Display, 느슨한 정렬 2) 사용자 목적에 맞는 정렬 3) 동적 요소, Interactive한 Navigation요소 추가


001. Information Design
* 관련 높은 정보 하나의 컨텐츠로 디스플레이 통합화.
 정보를 몇가지 화면이나 상태로 나누지 말것
 일반적인 작업 공간은 Master/Detail 또는 Organizer/Workspace로 나뉘는데 이것을 하나로 통합
 모든 컨텐츠를 한공간에 넣으려면 신중하고 기술력있는 커뮤니케이션 디자인 필요. 시각즉 계층 활용

1) 메세지와 목록의 통합화.


002. Contents Navigation Control
* 전통적인 Content Organization Strategy 는 검색 찾는 것 뿐만 아니라 알아보기 쉽도록 만들자
 전통적인 카테고리 중심의 컨텐츠 네비게이션은 소량의 정보일경우 오히려 부적합
 특히 목적이 불분명 할 경우 네비게이션 혼돈으로 목표에서 이탈

* * 사용자가 변경하는 즉시 검색 및 필터 컨트롤을 응답하게끔 하여 컨텐츠 탐색 지원
 전통적인 검색/네비게이션/결과페이지로 나누지 말것
 간접적으로 컨텐츠를 조작하게 하라. (Drag & Drop, Affordance)


003. Feed Back & Contents
* Modeless Feedback이 컨텐츠와 통합되는 것이 팝업 대화상자보다 낫다
 팝업 대화상자는 사용자들에게 성가신 경험이다.
 시각적 방해뿐만 아니라 즉각적인 주목을 요한다.
 Modeless Feedback을 통해 사용자의 흐름을 깨지 않고 정보를 통합화


02. Contents Dislay
004. Control & Contents
* 어포던스를 이용해 컨텐츠의 어떤 아이템이 인터랙티브한지 명확히 보여주자.
 호버(Hover), Click, Drag에 Interactive하게 반응
 Cromless Control의 단점은 찾기 어렵다는 점.


02. Contents Dislay
004. Control & Contents
* 사용자가 조작하는 컨텐츠의 컨텍스트에 컨트롤을 디스플레이하자
 모든 컨트롤 대신 사용자가 흥미를 느끼는 기능을 중심으로 Mouse Overlay / Display
 In-Context Control


02. Contents Dislay
005. Control Design
* 애플리케이션 컨텐츠의 시각적 스타일과 전반적인 웹 애플리케이션 브랜드와 맞춰야 한다.
 Flex에서는 스타일링(styling) 과 스키닝(skinning) 매카니즘으로 쉽게 활용가능
스타일링= 기본 컨트롤 모양의 속성을 변경해 표준 모양에 변화
스키닝= Adobe Creative Suite 도구를 사용해 만든 모양을 표준 모양과 바꾸는 것

 일반적인 컨트롤 라이브러리의 주된 장점 중 하나는 표준화 . 표준이 아닌 컨트롤은 사용자들이 인터페이스의 크롬을 어떻
게 조작하는지에 집중하게 하므로 진정 원하는 컨텐츠와 업무에 집중하는데 방해

 적절한 상용 컨트롤이 있을 경우 자신만의 컨트롤을 재구현하면 안된다. 대신 컨트롤을 필요에 맞게 커스터마이즈 하라.


| GUI SKINING
http://www.adobe.com/cfusion/exchange/index.cfm?l=-1&loc=en_us&exc=15&event=productHome&Submit=Filter
http://fleksray.org/Flex_skin.html
http://www.scalenine.com/
http://ntt.cc/2010/05/11/40-beautiful-themes-skins-for-adobe-flex-apps.html


Q&A


FOR Next Week
** Skin연구
!! 다음주 부터 각각 자신이 디자인해온 Interface를 중심으로
수업이 진행될 예정이니 꼭 Interface Design과 간단한 아이디어/와이어프레임을 준비해올 것.


[Ewd]class05 0405

Recommended

Recommended

More Related Content

Similar to [Ewd]class05 0405

Similar to [Ewd]class05 0405 (20)

More from jylee6977

More from jylee6977 (17)

[Ewd]class05 0405