ดาวน์โหลดงานนำเสนอ
งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ
ได้พิมพ์โดยPann Preecha ได้เปลี่ยน 9 ปีที่แล้ว
1
การออกแบบและพัฒนาเว็บไซต์ Athitha Chokananrattana Computer Science July, 2009 Internet technology and services
2
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 Internet technology and services 2
3
ก้าวสู่ยุคอินเทอร์เน็ต สร้างความได้เปรียบเหนือคู่แข่ง ออกแบบเว็บไซต์ที่ดี ให้ตรงกับเป้าหมายและลักษณะของเว็บไซต์
4
องค์ประกอบของการออกแบบเว็บไซต์อย่างมีประสิทธิภาพ ความเรียบง่าย มีความสอดคล้องสม่ำเสมอ มีเอกลักษณ์ เนื้อหาเป็นประโยชน์ มีระบบเนวิเกชั่นที่สะดวกเข้าใจง่าย Internet technology and services 4
5
5
6
บุคคลกรที่เกี่ยวข้องกับการพัฒนาเว็บไซต์ เว็บมาสเตอร์ บรรณารักษณ์ ( Information Architecture ) นักออกแบบ HTML CSS JavaScript Programmer Developer Programmer System Admin Content editor writer Internet technology and services 6
7
ความผิดพลาดในการออกแบบ 10 อันดับ ใช้โครงสร้างหน้าเว็บเป็นระบบเฟรม ใช้เทคโนโลยีสูงเกินไป ใช้ตัวหนังสือหรือรูปภาพที่เคื่อไหวมาก เกินไป ชื่อของเว็บไซต์ URL ยากหรือยาว เกินไป ไม่มีชื่อของเว็บไซต์อยู่ที่หน้าแรกของ เว็บเพจ มึความยาวของหน้ามากเกินไป ขาดระบบเนวิเกชั่นที่มีประสิทธิภาพ สีของลิ้งค์ไม่เหมาะสม ข้อมูลเก่า เว็บเพจแสดงผลช้า ต้องปรับปรุงเว็บไซต์ให้ก้าวหน้าอยู่ เสมอ Internet technology and services 7
8
อะไรคือ 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 Internet technology and services 8
9
ขั้นตอนการออกแบบ : Iterative Design Getting it right the first time is hard Prototyping tools can be the key to success Internet technology and services 9 Design Test Analyze
10
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 Internet technology and services 10
11
ขั้นตอนการออกแบบ : Task Analysis & Contextual Inquiry สำรวจจากงานที่มีมาก่อนหน้านี้ สร้างบทบาทของตัวละครที่มาใช้เว็บ ทดสอบ ideas ก่อนที่จะลงมือพัฒนาจริง Internet technology and services 11 ?
12
ขั้นตอนการออกแบบ : Rapid Prototyping สร้างแบบจำลองขึ้นมาจากความคิด เทคนิคขั้นพื้นฐานดั้งเดิม paper sketches cut, copy, paste video segments เครื่องมือที่ใช้สร้างแบบจำลอง แบบโต้ตอบ HTML, Visual Basic, HyperCard, Director, etc. Internet technology and services 12 Fantasy Basketball
13
ขั้นตอนการออกแบบ : Evaluation การทดสอบและประเมินผลจากผู้ใช้จริง สร้างแบบจำลอง Low-cost techniques expert evaluation walkthroughs Internet technology and services 13
14
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 Internet technology and services 14
15
การสำรวจในส่วนของ Web Design สัมภาษณ์ผู้ออกแบบเว็บไซต์ 11 คน มุ่งเน้นเรื่องการออกแบบในส่วนพื้นที่การทำงาน มุ่งเน้นเฉพาะส่วนที่สนใจ ข้อเท็จจริงต่างๆ เช่น “ ระยะเวลาในการพัฒนาเว็บ ครั้งล่าสุด ” ข้อผิดพลาด ที่ต้องนำมาวิเคราะห์และหาข้อเท็จจริง Internet technology and services 15
16
การสำรวจในส่วนของ 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) Internet technology and services 16
17
Design Specialties Information design structure, categories of information Navigation design interaction with information structure Graphic design visual presentation of information and navigation (color, typography, etc.) Internet technology and services 17 Information Design Navigation Design Graphic Design
18
Design Specialties (2) Information Architecture การออกแบบเนวิเกเตอร์และการ ออกแบบเนื้อหา User Interface Design การออกแบบหน้าจอ การ ทดสอบเว็บไซต์ Internet technology and services 18 Information Architecture User Interface Design Usability Evaluation Information Design Navigation Design Graphic Design
19
Web Site Design Process Internet technology and services 19 กระบวนการผลิต ปรับแต่งการออกแบบ การออกแบบสำรวจ สิ่งที่ค้นหา
20
Design Process: สิ่งที่ค้นหา Internet technology and services 20 ประเมินความต้องการ เข้าใจความต้องการของผู้ใช้ กำหนดขอบเขตของการ พัฒนา ลักษณะของผู้ใช้งาน ประเมินเว็บไซต์ที่มีอยู่หรือ การแข่งขัน กระบวนการผลิต ปรับแต่งการออกแบบ ออกแบบสำรวจ สิ่งที่ค้นหา
21
Design Process: ออกแบบสำรวจ Internet technology and services 21 ออกแบบหน้าเว็บไซต์ สร้างแบบจำลองอย่างง่ายๆ ออกแบบข้อมูลแนะเนวิ เกชั่น ออกแบบกราฟฟิกใน เบื้องต้น เลือกต้นแบบเพื่อทำการ พัฒนา กระบวนการผลิต ปรับแต่งการออกแบบ ออกแบบสำรวจ สิ่งที่ค้นหา
22
ขั้นตอนเบื้องต้น ระดมสมอง ร่างการออกแบบเว็บไซต์ในแบบฟอร์ม ออกแบบร่าง วาดหน้าจอที่ต้องการคร่าวๆ การวาดแบบร่างเป็นเรื่องที่สำคัญที่ควรมีการใส่ รายละเอียด Internet technology and services 22
23
Design Process: ปรับแต่งการออกแบบ Internet technology and services 23 เริ่มพัฒนา เพิ่มรายละเอียด เพิ่มกราฟฟิก ตรวจสอบรายละเอียด กระบวนการผลิต ปรับแต่งการออกแบบ ออกแบบสำรวจ สิ่งที่ค้นหา
24
Design Process: Production Internet technology and services 24 เตรียมรายละเอียด โครงสร้าง ทั้งหมด * สร้างไฟล์ * สร้างโครงสร้างตาม รายละเอียดมากที่สุดเท่าที่ เป็นไปได้ กระบวนการผลิต ปรับแต่งการออกแบบ ออกแบบสำรวจ สิ่งที่ค้นหา
25
Information Architecture Comes First Post-Its & large surfaces (i.e., affinity diagrams) + haptic UI + brainstorming + collaborative + persistent + immersive hard to share, edit, make digital Internet technology and services 25 Reprinted by permission from Contextual Design by Hugh Beyer & Karen Holtzblatt, InContext Enterprises, http://www.incent.com, © Morgan Kaufmann, 1998
26
Multiple Views นักออกแบบเว็บไซต์จะต้องออกแบบโครงร่างของหน้าเว็บเพจทั้งหมดของ เว็บไซต์ ในหลายมุมมอง เรียกว่า multiple levels of detail Web sites are iteratively refined at all levels of detail Internet technology and services 26 Site MapsStoryboardsSchematicsMock-ups
27
Site Maps High-level, coarse-grained view of entire site Internet technology and services 27
28
Storyboards Interaction sequence, minimal page level detail Internet technology and services 28
29
Schematics Page structure with respect to information and navigation Internet technology and services 29
30
Mock-ups High-fidelity, precise representation of page Internet technology and services 30
31
Prototypes, Specifications & Guidelines Prototypes Usually interactive Specifications & Guidelines written documents interactive specification spec is integrated with prototype Specifications = guidelines “factor of 10” difference Internet technology and services 31
32
A Timeline (8-13 Weeks) Internet technology and services 32 Discovery (1-2 Weeks) Design Exploration (1-2 Weeks) Design Refinement (4-6 Weeks) Production (2-3 Weeks)
33
A Timeline (8-13 Weeks) Internet technology and services 33 Discovery (1-2 Weeks) Design Exploration (1-2 Weeks) Design Refinement (4-6 Weeks) Production (2-3 Weeks) Information Design Navigation Design Graphic Design Activity
34
A Timeline (8-13 Weeks) Internet technology and services 34 Discovery (1-2 Weeks) Design Exploration (1-2 Weeks) Design Refinement (4-6 Weeks) Production (2-3 Weeks) Information Design Navigation Design Graphic Design Activity Site Maps Storyboards Schematics Mock-ups Prototypes Specifications
35
Sketching Internet technology and services 35 All designers sketched... at all levels
36
Sketching Reasons for sketching “work through” ideas & explore design space design exploration not supported by current tools collaborative situations Internet technology and services 36
37
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 Internet technology and services 37 Navigation Design Information Design Graphic Design กระบวนการผลิต ปรับแต่งการออกแบบ ออกแบบสำรวจ สิ่งที่ค้นหา
38
Implications for Design Tools Integrate representations juggling multiple tools is cumbersome difficult to maintain consistency Project management design histories and variations team processes Internet technology and services 38
39
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 Internet technology and services 39
40
Two Informal Web Design Tools Informed by Designers’ Practices Designers’ Outpost information architecture DENIM navigation/interaction design Internet technology and services 40
41
Designers’ Outpost: A Tangible Interface for Designing Information Architectures Internet technology and services 41 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
42
Two Informal Web Design Tools Informed by Designers’ Practices Designers’ Outpost information architecture DENIM navigation/interaction design Internet technology and services 42
43
DENIM: Designing Web Sites by Sketching Integrates multiple views site map – storyboard – page sketch Supports informal interaction sketching, recognizes pages & links, not content Internet technology and services 43
44
DENIM Internet technology and services 44 Canvas Zoom Slider
45
DENIM: Site Map View Internet technology and services 45
46
DENIM: Storyboard View Internet technology and services 46
47
DENIM: Sketch View Internet technology and services 47
48
DENIM: Run Mode Internet technology and services 48
49
Internet technology and services 49 Video
50
DENIM Summary DENIM supports web design practice from initial information architecture to testing integrated multiple views informal sketching UI Internet technology and services 50 DENIM adds to current practice –lo-fi interactive prototypes –advantages of electronic media Downloaded over 6500 times –get at http://guir.berkeley.edu/denimhttp://guir.berkeley.edu/denim
51
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 Internet technology and services 51
52
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 Internet technology and services 52
53
Usability Testing Common usability testing techniques laboratory experiments interviews & ethnographic observations surveys focus groups Good qualitative data Problems with these techniques time & effort are costly small sample sizes – quantitative results? unrealistic test situations How can we integrate usability testing in design, so we can find problems earlier? Internet technology and services 53 Design Test Analyze
54
Remote Usability Testing 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 Internet technology and services 54 Remote Usability Data Logging log
55
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 Internet technology and services 55
56
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 Internet technology and services 56
57
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 Internet technology and services 57
58
Internet technology and services 58
59
Internet technology and services 59
60
Internet technology and services 60
61
Internet technology and services 61
62
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 Internet technology and services 62
63
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 Internet technology and services 63
64
Internet technology and services 64
65
Internet technology and services 65
66
Internet technology and services 66
67
Internet technology and services 67
68
Internet technology and services 68
69
Outline Best practices for designing usable interfaces Web site design practice Informal tools for Web site design Evaluating Web interfaces Patterns for Web design Internet technology and services 69
70
Design in the Pervasive Computing Era Future computing devices won’t have the same UI as current PCs 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 Internet technology and services 70 I-Land by Streitz, et. al. How does one design for this environment? What will these interfaces look like?
71
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 Internet technology and services 71
72
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” Internet technology and services 72
73
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” Internet technology and services 73
74
Pattern Examples Navigation bar Internet technology and services 74
75
Pattern Examples Navigation bar Internet technology and services 75
76
Pattern Solution Captures essence on how to solve problem Navigation bar Generality of solution fits informal approach! Internet technology and services 76 First-level navigation Second-level navigation
77
Damask: Using Patterns for Cross Device UI Design Designer sketches design browses through patterns merges device-specific pattern generalization into design Internet technology and services 77
78
Damask: Using Patterns for Cross Device UI Design Designer sketches design browses through patterns merges device-specific pattern generalization into design Internet technology and services 78 Shopping cart PC version
79
Damask: Using Patterns for Cross Device UI Design Designer sketches design browses through patterns merges device-specific pattern generalization into design Internet technology and services 79
80
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 Internet technology and services 80
81
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 Internet technology and services 81 Shopping cart Cell-phone version
82
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 Internet technology and services 82
83
Web Design: Processes, Tools, & Patterns Prof. James A. Landay EECS Department, UC Berkeley http://guir.berkeley.edu
84
Informal vs. Formal Representations Informal visual representation communicates “unfinished” encourages creativity faster to create Internet technology and services 84 Formal visual representation –communicates “finished” –inhibits creativity (detailing) –slower to create
85
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 Internet technology and services 85
86
Informal Prototyping & Evaluation Tools Internet technology and services 86 CrossWeaver Denim Suede Outpost WebQuilt Damask
87
References Web Design, Prof. James Landay, EECS Dept., UC Berkeley IEOR 170, April 10, 2002 Internet technology and services 87
งานนำเสนอที่คล้ายกัน
© 2024 SlidePlayer.in.th Inc.
All rights reserved.