การออกแบบและพัฒนาเว็บไซต์ 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 Internet technology and services 2

ก้าวสู่ยุคอินเทอร์เน็ต  สร้างความได้เปรียบเหนือคู่แข่ง  ออกแบบเว็บไซต์ที่ดี ให้ตรงกับเป้าหมายและลักษณะของเว็บไซต์

องค์ประกอบของการออกแบบเว็บไซต์อย่างมีประสิทธิภาพ  ความเรียบง่าย  มีความสอดคล้องสม่ำเสมอ  มีเอกลักษณ์  เนื้อหาเป็นประโยชน์  มีระบบเนวิเกชั่นที่สะดวกเข้าใจง่าย Internet technology and services 4

5

บุคคลกรที่เกี่ยวข้องกับการพัฒนาเว็บไซต์  เว็บมาสเตอร์  บรรณารักษณ์ ( Information Architecture )  นักออกแบบ  HTML CSS JavaScript Programmer  Developer Programmer  System Admin  Content editor writer Internet technology and services 6

ความผิดพลาดในการออกแบบ 10 อันดับ  ใช้โครงสร้างหน้าเว็บเป็นระบบเฟรม  ใช้เทคโนโลยีสูงเกินไป  ใช้ตัวหนังสือหรือรูปภาพที่เคื่อไหวมาก เกินไป  ชื่อของเว็บไซต์ URL ยากหรือยาว เกินไป  ไม่มีชื่อของเว็บไซต์อยู่ที่หน้าแรกของ เว็บเพจ  มึความยาวของหน้ามากเกินไป  ขาดระบบเนวิเกชั่นที่มีประสิทธิภาพ  สีของลิ้งค์ไม่เหมาะสม  ข้อมูลเก่า  เว็บเพจแสดงผลช้า  ต้องปรับปรุงเว็บไซต์ให้ก้าวหน้าอยู่ เสมอ Internet technology and services 7

อะไรคือ 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

ขั้นตอนการออกแบบ : 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

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

ขั้นตอนการออกแบบ : Task Analysis & Contextual Inquiry  สำรวจจากงานที่มีมาก่อนหน้านี้  สร้างบทบาทของตัวละครที่มาใช้เว็บ  ทดสอบ ideas ก่อนที่จะลงมือพัฒนาจริง Internet technology and services 11 ?

ขั้นตอนการออกแบบ : Rapid Prototyping  สร้างแบบจำลองขึ้นมาจากความคิด  เทคนิคขั้นพื้นฐานดั้งเดิม  paper sketches  cut, copy, paste  video segments  เครื่องมือที่ใช้สร้างแบบจำลอง แบบโต้ตอบ  HTML, Visual Basic, HyperCard, Director, etc. Internet technology and services 12 Fantasy Basketball

ขั้นตอนการออกแบบ : Evaluation  การทดสอบและประเมินผลจากผู้ใช้จริง  สร้างแบบจำลอง  Low-cost techniques  expert evaluation  walkthroughs Internet technology and services 13

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

การสำรวจในส่วนของ Web Design  สัมภาษณ์ผู้ออกแบบเว็บไซต์ 11 คน  มุ่งเน้นเรื่องการออกแบบในส่วนพื้นที่การทำงาน  มุ่งเน้นเฉพาะส่วนที่สนใจ ข้อเท็จจริงต่างๆ เช่น  “ ระยะเวลาในการพัฒนาเว็บ ครั้งล่าสุด ”  ข้อผิดพลาด ที่ต้องนำมาวิเคราะห์และหาข้อเท็จจริง Internet technology and services 15

การสำรวจในส่วนของ 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

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

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

Web Site Design Process Internet technology and services 19 กระบวนการผลิต ปรับแต่งการออกแบบ การออกแบบสำรวจ สิ่งที่ค้นหา

Design Process: สิ่งที่ค้นหา Internet technology and services 20 ประเมินความต้องการ  เข้าใจความต้องการของผู้ใช้  กำหนดขอบเขตของการ พัฒนา  ลักษณะของผู้ใช้งาน  ประเมินเว็บไซต์ที่มีอยู่หรือ การแข่งขัน กระบวนการผลิต ปรับแต่งการออกแบบ ออกแบบสำรวจ สิ่งที่ค้นหา

Design Process: ออกแบบสำรวจ Internet technology and services 21 ออกแบบหน้าเว็บไซต์ สร้างแบบจำลองอย่างง่ายๆ ออกแบบข้อมูลแนะเนวิ เกชั่น ออกแบบกราฟฟิกใน เบื้องต้น เลือกต้นแบบเพื่อทำการ พัฒนา กระบวนการผลิต ปรับแต่งการออกแบบ ออกแบบสำรวจ สิ่งที่ค้นหา

ขั้นตอนเบื้องต้น  ระดมสมอง  ร่างการออกแบบเว็บไซต์ในแบบฟอร์ม  ออกแบบร่าง  วาดหน้าจอที่ต้องการคร่าวๆ  การวาดแบบร่างเป็นเรื่องที่สำคัญที่ควรมีการใส่ รายละเอียด Internet technology and services 22

Design Process: ปรับแต่งการออกแบบ Internet technology and services 23 เริ่มพัฒนา เพิ่มรายละเอียด เพิ่มกราฟฟิก ตรวจสอบรายละเอียด กระบวนการผลิต ปรับแต่งการออกแบบ ออกแบบสำรวจ สิ่งที่ค้นหา

Design Process: Production Internet technology and services 24 เตรียมรายละเอียด โครงสร้าง ทั้งหมด * สร้างไฟล์ * สร้างโครงสร้างตาม รายละเอียดมากที่สุดเท่าที่ เป็นไปได้ กระบวนการผลิต ปรับแต่งการออกแบบ ออกแบบสำรวจ สิ่งที่ค้นหา

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, © Morgan Kaufmann, 1998

Multiple Views  นักออกแบบเว็บไซต์จะต้องออกแบบโครงร่างของหน้าเว็บเพจทั้งหมดของ เว็บไซต์ ในหลายมุมมอง เรียกว่า multiple levels of detail  Web sites are iteratively refined at all levels of detail Internet technology and services 26 Site MapsStoryboardsSchematicsMock-ups

Site Maps  High-level, coarse-grained view of entire site Internet technology and services 27

Storyboards  Interaction sequence, minimal page level detail Internet technology and services 28

Schematics  Page structure with respect to information and navigation Internet technology and services 29

Mock-ups  High-fidelity, precise representation of page Internet technology and services 30

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

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)

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

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

Sketching Internet technology and services 35 All designers sketched... at all levels

Sketching  Reasons for sketching  “work through” ideas & explore design space  design exploration not supported by current tools  collaborative situations Internet technology and services 36

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 กระบวนการผลิต ปรับแต่งการออกแบบ ออกแบบสำรวจ สิ่งที่ค้นหา

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

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

Two Informal Web Design Tools Informed by Designers’ Practices  Designers’ Outpost  information architecture  DENIM  navigation/interaction design Internet technology and services 40

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

Two Informal Web Design Tools Informed by Designers’ Practices  Designers’ Outpost  information architecture  DENIM  navigation/interaction design Internet technology and services 42

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

DENIM Internet technology and services 44 Canvas Zoom Slider

DENIM: Site Map View Internet technology and services 45

DENIM: Storyboard View Internet technology and services 46

DENIM: Sketch View Internet technology and services 47

DENIM: Run Mode Internet technology and services 48

Internet technology and services 49 Video

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

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

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

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

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

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

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

How to Run a Remote Usability Test with WebQuilt  Recruit users  Design & distribute tasks (via )  Auto-collect! Watch & wait as users perform tasks & proxy logs data  Visualize, analyze  Use the results to redesign Internet technology and services 57

Internet technology and services 58

Internet technology and services 59

Internet technology and services 60

Internet technology and services 61

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

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

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

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

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?

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

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

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

Pattern Examples Navigation bar Internet technology and services 74

Pattern Examples Navigation bar Internet technology and services 75

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

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

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

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

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

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

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

Web Design: Processes, Tools, & Patterns Prof. James A. Landay EECS Department, UC Berkeley

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

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

Informal Prototyping & Evaluation Tools Internet technology and services 86 CrossWeaver Denim Suede Outpost WebQuilt Damask

References Web Design, Prof. James Landay, EECS Dept., UC Berkeley IEOR 170, April 10, 2002 Internet technology and services 87