Design of Hypermedia Applications

Slides:



Advertisements
Similar presentations
User Experience Krista Van Laan. Agenda What is User Experience? How does a User Experience team support the rest of the organization? What processes.
Advertisements

Tool-Support for Interdisciplinary and Collaborative User Interface Specification IADIS 2008 Amsterdam – Workgroup HCI University of Konstanz – Thomas.
Web Page Design Critical Elements for a Well Designed Web Page.
TU/e technische universiteit eindhoven Hera: Development of Semantic Web Information Systems Geert-Jan Houben Peter Barna Flavius Frasincar Richard Vdovjak.
Chapter 4 Planning Site Navigation. 2 Principles of Web Design Chapter 4 Objectives Understand navigation principles Build navigation schemes that meet.
CS 501: Software Engineering Fall 2000 Lecture 2 The Software Process.
Virtual University - Human Computer Interaction 1 © Imran Hussain | UMT Imran Hussain University of Management and Technology (UMT) Lecture 16 HCI PROCESS.
Multimedia Specification Design and Production 2013 / Semester 1 / week 7 Lecturer: Dr. Nikos Gazepidis
Lifecycle models For more info on these models – see text
Vrasidas C.(2002) Systematic approach for designing hypermedia environments for teaching and learning International Journal of Instructional Media.
Web Design Graphical User Interface Navigation. Website Prototyping Plan your website Take time to plan the goal And outcome for your site Based on target.
Saul Greenberg CPSC 481 Foundations and Principles of Human Computer Interaction James Tam.
Part 1: Introducing User Interface Design Chapter 1: Introduction –Why the User Interface Matters –Computers are Ubiquitous –The Importance of Good User.
P2-WIREFRAME Presented by Rahul Potghan Sonal Kulkarni.
User Centered Web Site Engineering Part 2. Iterative Process of User-Centered Web Engineering Prototype Evaluate Discovery Maintenance Implementation.
UI Standards & Tools Khushroo Shaikh.
Principles of Web Design for Online Educators Rodger Hergert Illinois Online Network May 18, 2005.
Saul Greenberg CPSC 481 Foundations and Principles of Human Computer Interaction James Tam.
Design Modeling for Web Applications
Prototyping Professor: Tapan Parikh TA: Eun Kyoung Choe
OOHDM Hypermedia Research Work Designing Web-based applications with Object Oriented Hypermedia Design Method OOHDM.
Software Engineering Incorporating Interface Design Into Software Engineering.
MSc Publishing on the WWW Web Design Week 2. Aims and Objectives To introduce the stages of web design and implementation To introduce needs analysis.
Chapter 4 Planning Site Navigation. Principles of Web Design 2nd Ed. Chapter 4 2 Principles of Web Design Chapter 4 Objectives Create usable navigation.
User Centered Web Site Engineering Part 2. Developing Site Structure & Content Content View Addressing content Outlining content Creating a content delivery.
Objectives By the end of today’s class you will be able to… –Describe the major steps in the interaction design process –Explain the importance of iterative.
DENIM A Sketching Tool for Prototyping Web and Desktop UIs Mark Newman and Jimmy Lin Group for User Interface Research UC Berkeley July 8, 1999.
Louisa Lambregts, What Makes a Web Site Successful and Effective? Bottom Line... Site are successful if they meet goals/expectations.
Web Design Process CMPT 281. Outline How do we know good sites from bad sites? Web design process Class design exercise.
Section 2.1 Compare the Internet and the Web Identify Web browser components Compare Web sites and Web pages Describe types of Web sites Section 2.2 Identify.
Problemsolving 2 Problem Solving: Designing a website solution Identifying how a solution will function Taking into account the technical constraints a.
Dr. Thomas Website User Interface Design Comp 6620 Rahul Potghan Sonal Kulkarni.
 What is a wireframe?  What features are important?  Which wireframe tools might you want to try?
Chapter 4 User Experience Model. User experience model (Ux) Visual specification of the user interface Visual specification of the user interface Both.
Methods For Web Page Design 6. Methods Why use one? What it covers –Possibly all stages Feasibility Analysis Design Implementation Testing –Maybe just.
Copyright © 2003 Pearson Education, Inc. Chapter 8 – Slide 1 by Michael Kay The Web Wizard’s Guide to Flash.
Project Specification Al Futrell April 2001 Some slides from Mark Newman.
3231 Software Engineering By Germaine Cheung Hong Kong Computer Institute Lecture 12.
Patterns, effective design patterns Describing patterns Types of patterns – Architecture, data, component, interface design, and webapp patterns – Creational,
International Center for Agricultural Research in the Dry Areas Web strategy ICARDA2.0 :: re-design project 1.
What about Chapter 7?. What is the usability process? Tyldesley’s 22 possible Measurement Criteria Let’s focus on usability–A usability initiative needs.
Usability Testing & Web Design by Alex Andujar. What is Usability? Usability measures the quality of a user's experience when interacting with a Web site,
Web Site Usability. Benefits of planning usability Increased user satisfaction, which translates directly to trust and brand loyalty Increased user productivity,
EK R. Eric Kramers Senior Project Officer The Atlas of Canada Natural Resources Canada The Atlas of Canada User-Centred.
User interface design and human computer interaction Xiangming Mu.
Capturing Web Application Requirements through Goal-Oriented Analysis Presented by Chin-Yi Tsai
Chapter 9 Prototyping. Objectives  Describe the basic terminology of prototyping  Describe the role and techniques of prototyping  Enable you to produce.
Information Architecture & Design Week 3 Schedule -Syllabus Updates -Group Project Deliverables -IA Methodologies -Research Topic Presentations.
Design Process … and some design inspiration. Course ReCap To make you notice interfaces, good and bad – You’ll never look at doors the same way again.
UI Design without Prototypes ala Holtzblatt et al ITM 734 Fall 2006 Corritore.
A Blueprint for Successful Web Sites Information Architecture & Web Design Web June 18, 2003 Beth Bailey Kim Eke Elizabeth Pyatt.
Graphics and interface design Feng Liu Ph.D.. Outline Design Principles – What designer need to keep in mind Elements of design Where interface design.
1 Hypermedia Design Models & Methodologies Dr Gary Wills IAM Research Group © University of Southampton.
Kara Pharris Web Designer Site Improvements & the Usability Project Concepts for usable navigation, functionality and presentation.
Information Architecture & Design Week 9 Schedule - Web Research Papers Due Now - Questions about Metaphors and Icons with Labels - Design 2- the Web -
Project Deliverables CIS 4328 – Senior Project 2 And CEN Engineering of Software 2.
Chapter 4 RAP By: James Laney.  1.Presenting new information 2.Providing practice 3.Evaluating student learning Computer-based Tutorials.
Prof. James A. Landay University of Washington Autumn 2004 Design Patterns for the Web #1 October 21, 2004.
Information Architecture & Design Week 3 Schedule -Syllabus Updates -Group Project Finalized -Research Presentations Finalized -IA Methodologies -Class.
User-Centered Design Services for MSU Web Teams Sarah J. Swierenga, Director Usability & Accessibility Center MSU Webmasters 402 Computer Center February.
Travel Exotic India Site designed and implemented by: Krishnan Ayyer
IST 6160 Enthusiastic Studysnaptutorial.com
Planning a Website MAD2053.
COMP 208/214/215/216 – Lecture 7 Documenting Design.
Project HE Assignment Web Site Design
CIS 376 Bruce R. Maxim UM-Dearborn
Prototyping Sriram Mohan.
Chapter 4 Planning Site Navigation
Principles of HCI Design
Interface Design and Usability
Presentation transcript:

Design of Hypermedia Applications CSE4461 Hypermedia and Multimedia Technology York University, Winter 2007 Fanis Tsandilas Feb 1, 2007

Interaction Design Process Identify User Needs and Establish Requirements Develop Alternative Designs Build Interactive Versions of the Designs (Prototypes) Evaluate Prototypes final product November 22, 2018 CSE 4461

User-Centered Design Users Evaluate Identify user needs & establish requirements Users Build prototypes Develop alternative designs November 22, 2018 CSE 4461

Waterfall Process Model Requirements Design Implementation Testing Maintenance November 22, 2018 CSE 4461

Waterfall Process Model Requirements Design Implementation Testing Maintenance November 22, 2018 CSE 4461

OOHDM Methodology (Schwabe et al.) Requirements Gathering stakeholders, scenarios, use cases Conceptual Design conceptual schema, domain classes and relationships Navigational Design nodes, links, indexes, guided tours Abstract Interface Design interface classes (buttons, text fields) Implementation November 22, 2018 CSE 4461

RMM Methodology (Isakowitz et al.)

Components of Web Design User Interface Design Usability Evaluation Information Architecture Information Design Navigation Design Graphic Design (from James Landay’s lecture notes) November 22, 2018 CSE 4461

Web Design Process Jesse James Garret - The Elements of Use Experience http://jjg.net/elements/pdf/elements.pdf November 22, 2018 CSE 4461

Design Practices Scenarios Site maps Storyboards Page schematics Page mockups November 22, 2018 CSE 4461

Scenarios “Bob visits the home page of the web site to find news about music events happening this week. He has never used the site before so he…” November 22, 2018 CSE 4461

Site Maps news home page 1. home 2. login 5. create account 3. forget pass 7. news page (new user) 8. news page (old user) 4. mail pass to user news home page November 22, 2018 CSE 4461

Storyboards (from James Landay’s lecture notes) November 22, 2018 CSE 4461

Page Schematics (from D. Vogel’s lecture notes) November 22, 2018 CSE 4461

Mockups November 22, 2018 CSE 4461

Prototyping Initial Design Low fidelity prototype Evaluation Refined Design High fidelity prototype Evaluation November 22, 2018 CSE 4461