1 Multimedia Design. 2  Usability  No matter how powerful or potentially useful a multimedia software application or web site design is, if it can not.

Slides:



Advertisements
Similar presentations
Project 1 ACSM PowerPoint.
Advertisements

Website usability: Studentlink Jessica Winblad Ravi Singh Ricky Sood Jendy Dennis Sahba Javedani.
1 The design of presentation slides Stephen Bostock.
Computer Applications.  Informative  Sales  Persuasive.
1 Human-Computer Interaction Screen Layout and Colour.
Altaf H. Khan. Great tool for effectively communicating ideas to an audience All electronic Easy to make last minute changes The undo feature encourages.
Creating an effective PowerPoint Presentation
User Interface Design Yonsei University 2 nd Semester, 2013 Sanghyun Park.
Starting and Customizing a PowerPoint Slide Show
11 HCI - Lesson 5.1 Heuristic Inspection (Nielsen’s Heuristics) Prof. Garzotto.
Graphic Design 2 More on the “look & feel”. Fall 2002CS/PSY Agenda Typography Color Icon.
©Ian Sommerville 2000 Software Engineering, 6th edition. Chapter 15Slide 1 User interface design l Designing effective interfaces for software systems.
Cognitive and physiological design drivers Judy Kay CHAI: Computer human adapted interaction research group School of Information Technologies.
User interface design Designing effective interfaces for software systems Objectives To suggest some general design principles for user interface design.
3.2 Presentation Software End Show Creating slide shows including audio,video and digital images End Show.
User interface design. Recap User Interface GUI Characteristics (Windows, Icons, Menus, Pointing, Graphics) User Centered Design User Interface Design.
Text Chapter 7. 7 Text in Multimedia Text is used in multimedia projects in many ways: Web pages Video Computer-based training Presentations.
Multimedia Design. Table of Content 1.Navigational structures 2.Storyboard 3.Multimedia interface components 4.Tips for interface design.
Basic Principles of DESIGN Bristol Community College Bristol Community College Paula Mailloux Sources: The Non-Designers Design Book The Non-Designers.
Heuristic evaluation IS 403: User Interface Design Shaun Kane.
Expression Web 2 Concepts and Techniques Expression Web Design Feature Web Design Basics.
Lecture Set 3 Introduction to Visual Basic Concepts Part A – User Interfaces and Windows Forms – The Toolbox.
How to ‘properly’ view STILL IMAGES English Language Arts.
System Analysis & Design Chapter VII: User Interface Design Providing interactive and easy to use interfaces is an important task of system designer using.
Charmin Suttles TEC 542.  What is an interface? ◦ Thorsen(2009) describes an interface as “the consistent color, font style, and placement of informational.
CS3205: HCI in SW Development More on Detailed Design: Guidance and Color.
Avoiding the Pitfalls of Bad Slides  Outlines  Slide Structure  Fonts  Color  Background  Graphs  Spelling and Grammar  Conclusions  Questions.
09/09/2015 PDMS 1 Human Computer Interface Janet Nichols.
POWERPOINT GUIDELINES For use during Telematic broadcasts.
Color & Mood By: Mrs. Ross. Color can effect our mood, sometimes without us even realizing it. It can even increase or decrease our pulse rate or blood.
1/28 Using PowerPoint for Academic Presentations How to… How NOT to…
Microsoft Wang Li, Wang Yini, Li YIcheng.  This is a presentation about Microsoft Windows7 guidelines  Wang Li K8wali00  Li Yicheng K8liyi00  Wang.
The Elements of Design Color Theory. elements of design the building blocks used to create a work of art. - Color - Line - Shape - Direction - Size -
Presentation Design: Starting Out. Color Basics There are two types of color models -- Reflective 1. CMYK Model Used in printing Stands for Cyan, Magenta,
Elements of a Good Presentation Consistency Common backgrounds Common graphics (icons etc.)
Ten Tips for Making Effective PowerPoint Presentations Dr. Tom Lifvendahl
The Internet Writer’s Handbook 2/e Web Page Design Writing for the Web.
Professor Michael J. Losacco CIS 1150 – Introduction to Computer Information Systems Presentations Chapter 3.
CS 4720 Usability and Accessibility CS 4720 – Web & Mobile Systems.
IS1824: Introduction to Internet Multimedia Lecture 7: Style 1 (Layout and Colour) Rob Gleasure
Designing Forms, Reports, and Screens CMIS570 Week 11.
Lecture 5(b), Slide 1 CP2030 Copyright © University of Wolverhampton CP2030 Visual Basic for C++ Programmers v Component 5(b) HCI aspects of VB programming.
Good Web Design. The Four A’s of Good Design Accessible Accurate Appropriate Appealing.
Understanding and Using Color
Color Symbolism Red: Excitement, energy, passion, love, desire, speed, strength, power, heat, aggression, danger, fire, blood, war, violence, all things.
Software Architecture
The Design of Everyday Things Darn these hooves! I hit the wrong switch again! Who designs these instrument panels, raccoons?
Visual design The “look” of your interface. Role of Graphic Design What someone initially encounters – Sets a framework for understanding content.
Principles of effective web design NOTES Flo Morris-Duffin.
User Documentation. Documentation Guidelines  Break the documentation down by tasks  Plan for an audience  State the purpose of the document  Organize.
The Meaning of Color. RED RED color of fire and blood - associated with energy, war, danger, strength, power, determination as well as love color of.
Learning From Student Projects Mark Grabe. Copyright © Houghton Mifflin Company. All rights reserved.9-2 Using Design As A Unifying Theme n Knowledge.
Microsoft Expression Web 3 Expression Web Design Feature Web Design Basics.
Software Interface Design Features / Issues. Learning Objectives Discuss the features affecting interface design.
Writing Accessible Electronic Documents with Microsoft® PowerPoint
6. (supplemental) User Interface Design. User Interface Design System users often judge a system by its interface rather than its functionality A poorly.
The World of COLOR. What is color?? the aspect of the appearance of objects and light sources that may be described in terms of hue, lightness, and saturation.
Chapter 7 Psychology: Memory.
Literary Elements Notes.
POWERPOINT GUIDELINES
User Interface Design Notes are from: Wilson, Software Design and Development The Preliminary Course. Cambridge Press. pp and Fowler,
Unit 14 Website Design HND in Computing and Systems Development
PowerPoint Slide Design
Do’s and Don’t of a Good PowerPoint Presentation
User interface design.
Designing Pages and Documents
POWERPOINT GUIDELINES
POWERPOINT GUIDELINES
POWERPOINT GUIDELINES
POWERPOINT GUIDELINES
Presentation transcript:

1 Multimedia Design

2  Usability  No matter how powerful or potentially useful a multimedia software application or web site design is, if it can not be worked by the intended user then it is worthless  Communication is at least as important as computation

3 Multimedia Design

4 Iterative Design Evaluate with real users Identify user needs or problems Design a solution Prototype the solution

5 Darn these hooves! I hit the wrong switch again! Who designed these instrument panels, racoons? Multimedia Design

6 The Interactive Cycle Evaluates and understands the display Interprets input events to make changes Data model for the application information Updates to the display Formulates goals and actions, generates inputs Updates to the display Data model changes

7 Gulfs of Understanding  Don Norman has identified two gulfs in a user’s understanding that cause the interactive cycle to break down  Gulf of Evaluation  Gulf of Execution

8 Gulf of Evaluation  Users must interpret what they see on the screen and evaluate it relative to their ultimate goals  There are many ways in which this evaluation might fail:  Ergonomic – Text too small to read Text has poor contrast with background colour

9 Gulf of Evaluation

10 Gulf of Evaluation

11 Gulf of Evaluation

12 Gulf of Evaluation  Design and layout – Items may be ineffectively grouped and so the users misses an important relationship Critical information incorrectly placed All information may appear the same without emphasis or highlights  Relevant information must not only be on the screen, but in a form which is immediately obvious

13 Gulf of Evaluation

14 Gulf of Evaluation

15 Gulf of Execution  This arises when the user does not know what sequence of input events will accomplish the desired goal  There are several things that might cause this gulf  The user does not know what the system can do  The operation of objects on the screen are not obvious e.g buttons, links, scroll bars etc.  Inadequate feedback

16 Gulf of Execution

17 Gulf of Execution

18 Gulf of Execution

19 Consistency and Simplicity  Be consistent in your use of:  Size  Colour  Location  Wording  Function  Sequencing

20 Consistency and Simplicity

21 Consistency and Simplicity

22 Consistency and Simplicity

23 Human Memory Issues  7 items +/- 2  Short term memory is approx. 30 seconds to 2 minutes  User should not need to buffer information from one screen to the next

24  If only I had turned up to the lecture I would know what is on this slide

25 Human Memory Issues  Avoid stacking  Design for task closure  Recognition rather than recall

26 Status Indicators  Whenever the system is performing a potentially lengthy process the user should be given feedback e.g status bar, hourglass, loading screen  System should have response time suitable for task

27 Design Guidelines  General text format rules:  Only use two levels of intensity  Use underlining, bold, inverse video etc. sparingly  Use no more than 3 different fonts  Serif fonts are easier to read, but sans-serif can look more modern  Capitalise as you would in normal sentences

28 Design Guidelines

29 Design Guidelines

30 Design Guidelines  Colour is perhaps the most overused feature in multimedia designs  Use no more than 4 colours on a screen  No more than 7 in an application  Generally blue or black backgrounds with white or yellow characters respectively give the best contrast, but not necessarily the best look!  Blue should not be used for text as it is one of the hardest colours to read

31 Design Guidelines  Consider colour conventions carefully  Red: passion, romance, fire, violence, aggression. Red means stop, warning or forbidden in many cultures  Purple: creativity, mystery, royalty, mysticism, rarity, associated with death in some cultures  Blue: loyalty, security, conservatism, tranquillity, coldness, sadness  Green: nature, fertility, growth, envy, go, environment  Yellow: brightness, illumination, illness, cowardice  Black: power, sophistication, contemporary style, death, morbidity, evil  White: purity, innocence, cleanliness, truth, peace, coldness, sterility

32 Colour Harmony  One of the most challenging aspects of visual design is developing effective colour harmonies that strike a balance between monotony and over stimulation

33 RGB Colour Wheel Primary colours Secondary colours Tertiary colours

34 Design Guidelines  Sound:  Use harsh and soft audio tones for warnings and positive feed back respectively  Sound can add to a site or application, but can also be annoying  It is always a good idea to provide the option to turn the sound off

35 Display Issues  Maintain display inertia  Static objects such as buttons, words and icons that appear on many screens should always appear in the same location  Location, shape and size of objects should be kept as consistent as possible

36 Display Issues  Organise the screen to manage complexity  Eliminate unnecessary information  Use concise wording or easy to recognise icons  User performance suffers when less that 25% of the screen is white space  50% white space is recommended for textual displays  Related information should be grouped logically

37 Fin