Transcript Human-Computer Interaction for Universal Computing

Internet technology and services
การออกแบบและพัฒนาเว็บไซต ์
Athitha Chokananrattana
Computer Science
July, 2009
Internet technology and services
Outline
1. Best practices for designing usable interfaces
2. Web site design practice
3. Informal tools for Web site design
4. Evaluating Web interfaces
5. Patterns for Web design
2
กาวสู
้
่ ยุคอินเทอรเน็
์ ต
 สร้างความไดเปรี
้ ยบเหนือคูแข
่ ง่
 ออกแบบเว็บไซตที
่ ี ให้ตรงกับเป้าหมายและลักษณะของเว็บไซต ์
์ ด
Internet technology and services
องคประกอบของการออกแบบเว็
บไซตอย
ประสิ ทธิภาพ
่
์
์ างมี
 ความเรียบงาย
่
 มีความสอดคลองสม
า่ เสมอ
้
 มีเอกลักษณ ์
 เนื้อหาเป็ นประโยชน์
 มีระบบเนวิเกชัน
่ ทีส
่ ะดวกเขาใจง
าย
้
่
4
Internet technology and services
5
Internet technology and services
บการพัฒนาเว็บไซต ์
บุคคลกรทีเ่ กีย
่ วของกั
้
 เว็บมาสเตอร ์
 บรรณารักษณ ์ ( Information Architecture )
 นักออกแบบ
 HTML CSS JavaScript Programmer
 Developer Programmer
 System Admin
 Content editor writer
6
Internet technology and services
ความผิดพลาดในการออกแบบ 10 อันดับ
 ใช้โครงสรางหน
้
้ าเว็บเป็ นระบบเฟรม
 มึความยาวของหน้ามากเกินไป
 ใช้เทคโนโลยีสงู เกินไป
 ขาดระบบเนวิเกชัน
่ ทีม
่ ป
ี ระสิ ทธิภาพ
 ใช้ตัวหนังสื อหรือรูปภาพทีเ่ คือ
่ ไหวมาก
เกินไป
 สี ของลิง้ คไม
์ เหมาะสม
่
 ชือ
่ ของเว็บไซต ์ URL ยากหรือยาว
เกินไป
 ไมมี
ื่ ของเว็บไซตอยู
่ น้าแรกของ
่ ชอ
์ ที
่ ห
เว็บเพจ
 ขอมู
้ ลเกา่
 เว็บเพจแสดงผลช้า
 ตองปรั
บปรุงเว็บไซตให
้
์ ้กาวหน
้
้ าอยู่
เสมอ
7
Internet technology and services
อะไรคือ Usability?
 Ease of learning
 faster the second time and so on...
 Fast recall
 remember how from one session to the next
 Productivity
 perform tasks quickly and efficiently
 Minimal error rates
 if they occur, good feedback so user can recover
 High user satisfaction
 confident of success
8
Internet technology and services
ขัน
้ ตอนการออกแบบ: Iterative Design
Design
Test
Analyze
 Getting it right the first time is hard
 Prototyping tools can be the key to success
9
Internet technology and services
Best Practices for Designing Usable
Interfaces:
Customer-centered Design
“Know thy Customer”
 Cognitive abilities
 visual & aural perception
 physical manipulation
 memory
 Organizational / job abilities
 Keep customers involved throughout project
10
Internet technology and services
ขัน
้ ตอนการออกแบบ: Task Analysis & Contextual
Inquiry
 สารวจจากงานทีม
่ ม
ี ากอนหน
่
้ านี้
 สร้างบทบาทของตัวละครทีม
่ าใช้เว็บ
 ทดสอบ ideas กอนที
จ
่ ะลงมือพัฒนาจริง
่
?
11
Internet technology and services
ขัน
้ ตอนการออกแบบ: Rapid Prototyping
 สร้างแบบจาลองขึน
้ มาจากความคิด
 เทคนิคขัน
้ พืน
้ ฐานดัง้ เดิม
 paper sketches
 cut, copy, paste
 video segments
 เครือ
่ งมือทีใ่ ช้สร้างแบบจาลอง
แบบโตตอบ
้
 HTML, Visual Basic, HyperCard,
Director, etc.
Fantasy Basketball
12
Internet technology and services
ขัน
้ ตอนการออกแบบ: Evaluation
 การทดสอบและประเมินผลจากผู้ใช้จริง
 สร้างแบบจาลอง
 Low-cost techniques
 expert evaluation
 walkthroughs
13
Internet technology and services
Outline
1. Best practices for designing usable interfaces
2. Web site design practice
3. Informal tools for Web site design
4. Evaluating Web interfaces
5. Patterns for Web design
14
Internet technology and services
การสารวจในส่วนของ Web Design
 สั มภาษณผู
์ ้ออกแบบเว็บไซต ์ 11 คน
 มุ่งเน้นเรื่ องการออกแบบในส่ วนพื้นที่การทางาน
 มุ่งเน้นเฉพาะส่ วนที่สนใจ ข้อเท็จจริ งต่างๆ เช่น
 “ระยะเวลาในการพัฒนาเว็บ ครั้งล่าสุ ด”
 ข้อผิดพลาด ที่ตอ้ งนามาวิเคราะห์และหาข้อเท็จจริ ง
15
Internet technology and services
การสารวจในส่วนของ Web Design
(2)
 ผู้ออกแบบเว็บไซตประกอบไปด
วย
้
์
 จากบริ ษทั 5 คน + รับจ้างอิสระ 1 คน
 4 design firms
 1 Internet portal
 และกลุ่มคนอาชีพที่เกี่ยวข้อง
 information architects
 creative directors/project managers
 graphic designers
 all-of-the-above (esp. smaller firms)
16
Internet technology and services
Design Specialties
 Information design
 structure, categories of
information
 Navigation design
Information
Design
Navigation
Design
 interaction with information
structure
 Graphic design
 visual presentation of
information and navigation
(color, typography, etc.)
Graphic
Design
17
Internet technology and services
Design Specialties (2)
 Information
Architecture
User Interface
Design
Usability
Evaluation
 การออกแบบเนวิเกเตอร์และการออกแบบเนื้อหา
 User Interface Design
 การออกแบบหน้าจอ การทดสอบเว็บไซต์
Information
Design
Navigation
Design
Information
Architecture
Graphic
Design
18
Internet technology and services
Web Site Design Process
สิ่ งที่คน้ หา
การออกแบบสารวจ
ปรับแต่งการออกแบบ
กระบวนการผลิต
19
Internet technology and services
Design Process: สิ่ งทีค
่ นหา
้
สิ่ งที่คน้ หา
ออกแบบสารวจ
ประเมินความตองการ
้
 เข้าใจความต้องการของผูใ้ ช้
 กาหนดขอบเขตของการพัฒนา
 ลักษณะของผูใ้ ช้งาน
 ประเมินเว็บไซต์ที่มีอยูห่ รื อการแข่งขัน
ปรับแต่งการออกแบบ
กระบวนการผลิต
20
Internet technology and services
Design Process: ออกแบบสารวจ
สิ่ งที่คน้ หา
ออกแบบสารวจ
ออกแบบหน้าเว็บไซต์
• สร้างแบบจาลองอย่างง่ายๆ
• ออกแบบข้อมูลแนะเนวิเกชัน่
• ออกแบบกราฟฟิ กในเบื้องต้น
• เลือกต้นแบบเพื่อทาการพัฒนา
ปรับแต่งการออกแบบ
กระบวนการผลิต
21
Internet technology and services
ขัน
้ ตอนเบือ
้ งตน
้
 ระดมสมอง
 ร่ างการออกแบบเว็บไซต์ในแบบฟอร์ม
 ออกแบบราง
่
 วาดหน้าจอที่ตอ้ งการคร่ าวๆ
 การวาดแบบรางเป็
นเรือ
่ งทีส
่ าคัญทีค
่ วรมีการใส่
่
รายละเอียด
22
Internet technology and services
Design Process: ปรับแตงการออกแบบ
่
สิ่ งที่คน้ หา
ออกแบบสารวจ
เริ่ มพัฒนา
• เพิ่มรายละเอียด
• เพิ่มกราฟฟิ ก
• ตรวจสอบรายละเอียด
ปรับแต่งการออกแบบ
กระบวนการผลิต
23
Internet technology and services
Design Process:
Production
สิ่ งที่คน้ หา
ออกแบบสารวจ
เตรี ยมรายละเอียด โครงสร้างทั้งหมด
* สร้างไฟล์
* สร้างโครงสร้างตามรายละเอียดมากที่สุด
เท่าที่เป็ นไปได้
ปรับแต่งการออกแบบ
กระบวนการผลิต
24
Internet technology and services
Information Architecture Comes First
 Post-Its & large surfaces (i.e., affinity diagrams)
+
+
+
+
+
haptic UI
brainstorming
collaborative
persistent
immersive
 hard to share,
edit,
make digital
Reprinted by permission from Contextual Design by Hugh Beyer & Karen
Holtzblatt, InContext Enterprises, http://www.incent.com,
© Morgan Kaufmann, 1998
25
Internet technology and services
Multiple Views
 นักออกแบบเว็บไซตจะต
องออกแบบโครงร
างของหน
์
้
่
้ าเว็บเพจทัง้ หมดของ
เว็บไซต ์ ในหลายมุมมอง เรียกวา่ multiple levels of detail
 Web sites are iteratively refined at all levels of detail
Site Maps
Storyboards Schematics
Mock-ups
26
Internet technology and services
Site Maps
 High-level, coarse-grained view of entire site
27
Internet technology and services
Storyboards
 Interaction sequence, minimal page level detail
28
Internet technology and services
Schematics
 Page structure with respect to information and navigation
29
Internet technology and services
Mock-ups
 High-fidelity, precise representation of page
30
Internet technology and services
Prototypes, Specifications &
Guidelines
 Prototypes
 Usually interactive
 Specifications & Guidelines
 written documents
 interactive specification
 spec is integrated with prototype
 Specifications = guidelines
 “factor of 10” difference
31
Internet technology and services
A Timeline
(8-13 Weeks)
32
Internet technology and services
A Timeline
(8-13 Weeks)
Information Navigation
Design
Design
Graphic
Design
33
Internet technology and services
A Timeline
(8-13 Weeks)
Site Maps
Storyboards
Schematics
Mock-ups
Information Navigation
Design
Design
Prototypes
Specifications
Graphic
Design
34
Internet technology and services
Sketching
All designers sketched
... at all levels
35
Internet technology and services
Sketching
 Reasons for sketching
 “work through” ideas & explore design space
 design exploration not supported by current tools
 collaborative situations
36
Internet technology and services
Implications for Design Tools
 Extend sketching farther into process
 “mature” designers lamented diminished sketching
 sketching encourages broad exploration of design space
 Improve tools for early process
 Poor support for design exploration & info/nav design
สิ่ งที่คน้ หา
ออกแบบสารวจ
ปรับแต่งการออกแบบ
Information Navigation
Design
Design
Graphic
Design
กระบวนการผลิต
37
Internet technology and services
Implications for Design Tools
 Integrate representations
 juggling multiple tools is cumbersome
 difficult to maintain consistency
 Project management
 design histories and variations
 team processes
38
Internet technology and services
Outline
1. Best practices for designing usable interfaces
2. Web site design practice
3. Informal tools for Web site design
4. Evaluating Web interfaces
5. Patterns for Web design
39
Internet technology and services
Two Informal Web Design Tools Informed
by Designers’ Practices
 Designers’ Outpost
 information architecture
 DENIM
 navigation/interaction
design
40
Internet technology and services
Designers’ Outpost:
A Tangible Interface for Designing Information Architectures
 Combines the physical & virtual
 physical post-its, virtual feedback
 Supports existing practice
 affordances of paper
 collaboration
 large, persistent representation
 Adds advantages of e-media
 editing, reuse, distribution
 hand-off later to other tools
 Has an informal user interface
 only recognizes where notes are,
not what is on them
41
Internet technology and services
Two Informal Web Design Tools Informed
by Designers’ Practices
 Designers’ Outpost
 information architecture
 DENIM
 navigation/interaction
design
42
Internet technology and services
DENIM:
Designing Web Sites by Sketching
 Integrates multiple views
 site map – storyboard – page sketch
 Supports informal
interaction
 sketching,
 recognizes pages &
links, not content
43
Internet technology and services
DENIM
Canvas
Zoom
Slider
44
Internet technology and services
DENIM: Site Map View
45
Internet technology and services
DENIM: Storyboard View
46
Internet technology and services
DENIM: Sketch View
47
Internet technology and services
DENIM: Run Mode
48
Internet technology and services
Video
49
Internet technology and services
DENIM Summary
 DENIM supports web design practice
 from initial information architecture to testing
 integrated multiple views
 informal sketching UI
• DENIM adds to current
practice
– lo-fi interactive prototypes
– advantages of electronic
media
• Downloaded over 6500 times
– get at http://guir.berkeley.edu/denim
50
Internet technology and services
Outline
1. Best practices for designing usable interfaces
2. Web site design practice
3. Informal tools for Web site design
4. Evaluating Web interfaces
5. Patterns for Web design
51
Internet technology and services
Usability on the Web
 Many Web sites have usability problems
 users give up, have difficulty finding information
 usability is one key factor to success, particularly for e-commerce
sites
 Mobile computing adds further challenges
 small screen sizes
 limited and/or new
interaction techniques
 devices used in environments
beyond the desktop
52
Internet technology and services
Usability Testing
 Common usability testing techniques




laboratory experiments
interviews & ethnographic observations
surveys
focus groups
 Good qualitative data
Design
Test
 Problems with these techniques
 time & effort are costly
 small sample sizes – quantitative results?
 unrealistic test situations
Analyze
 How can we integrate usability testing in design, so we
can find problems earlier?
53
Internet technology and services
Remote Usability Testing
log
Remote
Usability
Data Logging
log
 Tools for task-based Web usability testing
 clickstream analysis
 qualitative feedback via IM & surveys
 Pros
 semi-automatic – requires one time set up of tasks/questionnaires
 large number of participants
 Cons
 capture of detailed interactions requires client-side solutions
 device dependent (i.e., only works for IE 5 on Windows)
 limited to site owners if data collected on server
54
Internet technology and services
WebQuilt: Clickstream Logging
 Proxy-based logger rewrites links
 Pros






extensible, scalable
allow for unobtrusive, “naturalistic” user interaction
multi-platform, multi-device compatibility
fast & easy to deploy on any Website
nearly invisible to user
can be used in conjunction w/ online survey tools
 Cons
 complex Javascript links can occasionally “escape” from Proxy
55
Internet technology and services
WebQuilt: Visual Analysis
 Goals
 link page elements to user actions
 identify behavior/nav. patterns
 highlight potential problems areas
 Solution
 interactive graph based on web content
 nodes represent web pages
 edges represent aggregate traffic between pages




designers can indicate expected paths
color code common usability interests
filtering to show only target particpants
use zooming for analyzing data at varying granularity
56
Internet technology and services
How to Run a Remote Usability Test with
WebQuilt
 Recruit users
 Design & distribute tasks (via email)
 Auto-collect! Watch & wait as users perform tasks & proxy logs
data
 Visualize, analyze
 Use the results to redesign
57
Internet technology and services
58
Internet technology and services
59
Internet technology and services
60
Internet technology and services
61
Internet technology and services
Visual Analysis
 How can we use WebQuilt to understand what people did &
uncover usability issues?
 identify deviations from expected path
 look for navigational patterns
 explore where people exited
 look for places where users spent a lot of time or not very much time
62
Internet technology and services
Pilot Usability Study
 Pilot usability study
 10 users asked to find
 Anti-lock brake information on the latest Nissan Sentra
model
 The Nissan dealer closest to them
 Edmunds.com PDA web site
 Visor Handspring equipped with a OmniSky wireless
modem
63
Internet technology and services
64
Internet technology and services
65
Internet technology and services
66
Internet technology and services
67
Internet technology and services
68
Internet technology and services
Outline
 Best practices for designing usable interfaces
 Web site design practice
 Informal tools for Web site design
 Evaluating Web interfaces
 Patterns for Web design
69
Internet technology and services
Design in the Pervasive Computing Era
 Future computing devices won’t
UI as current PCs
have the same
 wide range of devices
 small or embedded in environment
 often w/ “alternative” I/O & w/o screens
 information appliances
 lots of devices per user
 all working in concert
I-Land by Streitz, et. al.
• How does one design for this environment?
• What will these interfaces look like?
70
Internet technology and services
Interviews with Cross-Device UI Designers
 4 designers & 1 developer at 3 different s/w firms
 2 of 3 companies: no team designed mobile & desktop
 looked at desktop UI to get ideas for tasks & flow
 few discussions with desktop designers, if any
 used Visio to diagram flows
 one put cell phone design in flow diagram, since UI is simple
 Third company
 one person designed interface for both PDA & desktop
 company believes app domain constrained enough
 each project managed completely separately
 Design patterns would allow 1 designer to do both
71
Internet technology and services
Design Patterns
 Design is about finding solutions
 unfortunately, designers often reinvent
 hard to know how things were done before & to reuse solutions
 design patterns allow designers to reuse what works well
 First used in architecture [Alexander]
 Communicate design problems & solutions
 how to create a beer garden where people socialize…
 how big doors should be & where…
 how to use handles…
 Not too general & not too specific
 use solution “a million times over, without ever doing it the
same way twice”
72
Internet technology and services
Web Design Patterns
 Design is about finding solutions
 unfortunately, designers often reinvent
 hard to know how things were done before & to reuse solutions
 design patterns allow designers to reuse what works well
 Now used in web design [van Duyne, Landay, & Hong]
 Communicate design problems & solutions
 how to make e-commerce sites where people return & buy…
 how to create a shopping cart that supports check out…
 how to create navigation bars for finding relevant content…
 Not too general & not too specific
 use solution “a million times over, without ever doing it the
same way twice”
73
Internet technology and services
Pattern Examples
Navigation bar
74
Internet technology and services
Pattern Examples
Navigation bar
75
Internet technology and services
Pattern Solution
 Captures essence on how to solve problem
 Navigation bar
First-level navigation
Second-level navigation
 Generality of solution fits informal approach!
76
Internet technology and services
Damask:
Using Patterns for Cross Device UI Design
 Designer
 sketches design
 browses through patterns
 merges device-specific pattern generalization into design
77
Internet technology and services
Damask:
Using Patterns for Cross Device UI Design
 Designer
 sketches design
 browses through patterns
 merges device-specific pattern generalization into design
Shopping cart
PC version
78
Internet technology and services
Damask:
Using Patterns for Cross Device UI Design
 Designer
 sketches design
 browses through patterns
 merges device-specific pattern generalization into design
79
Internet technology and services
Damask:
Using Patterns for Cross Device UI Design
 Designer customizes solution to fit project
 this creates another example of the pattern
 tool keeps track of transformations
80
Internet technology and services
Damask:
Using Patterns for Cross Device UI Design
 Designer picks another target device
 tool takes pattern generalization for target device, applies same
transformations
 results in generated UI for target device
 designer continues to fix & customize result
Shopping cart
Cell-phone version
81
Internet technology and services
Summary
 Iterative design is the key to good UIs
 Informal tools are the key to iterative design
 We have built several tools to support
 Web Design (Outpost & Denim)
 Speech UI Design (Suede)
 Multimodal, Cross device UI Design (CrossWeaver &
Damask)
 Web & Mobile UI Evaluation (WebQuilt)
 Positive results from evaluations & community reaction
82
Web Design:
Processes, Tools, & Patterns
Prof. James A. Landay
EECS Department, UC Berkeley
http://guir.berkeley.edu
Internet technology and services
Informal vs. Formal Representations
 Informal visual
representation
 communicates
“unfinished”
 encourages creativity
 faster to create
• Formal visual
representation
– communicates “finished”
– inhibits creativity (detailing)
– slower to create
84
Internet technology and services
Informal User Interfaces
 Take advantage of natural input modalities
 speaking
 writing
 gesturing
 sketching
 Minimize recognition of the input
 allow users to work & communicate naturally
 document rather than transform
85
Internet technology and services
Informal Prototyping & Evaluation Tools
Outpost
CrossWeaver
Denim
Damask
WebQuilt
Suede
86
Internet technology and services
References
Web Design, Prof. James Landay , EECS Dept., UC Berkeley
IEOR 170, April 10, 2002
87