The Art of Interface Design Anne Morgan Spalter. Inter-related Components of Interface Design Task analysis and user testing Software engineering Functional.

Slides:



Advertisements
Similar presentations
The Art of Interface Design CS6540/5540 HCI Fall 2009 Anne Morgan SpalterRich Riesenfeld Brown UniversityUniversity of Utah.
Advertisements

Lesson 15 Presentation Programs.
1 Official Interface Guidelines by David Catmull User interface documentation published by Apple and Microsoft.
Basic Design Considerations Intention of the piece __________ Color Proportion Hierarchy Grouping __________ Consistency.
Tailoring Needs Chapter 3. Contents This presentation covers the following: – Design considerations for tailored data-entry screens – Design considerations.
The Art of Interface Design CS6540/5540 HCI Fall 2010 Anne Morgan SpalterRich Riesenfeld Brown UniversityUniversity of Utah.
MULTIMEDIA Development Team.
The Art of Interface Design HCI CS6540/5540 Fall 2007 Anne Morgan SpalterAdapted and Revised by Brown UniversityRich Riesenfeld.
Presenting your paper with PowerPoint: Module 8. Why write with PowerPoint? To supplement an oral presentation To incorporate visual and audio media into.
SIMS 213: User Interface Design & Development Marti Hearst Thurs Feb 8, 2001.
CMPUT 301: Lecture 25 Graphic Design Lecturer: Martin Jagersand Department of Computing Science University of Alberta Notes based on previous courses by.
Designing Your Page Step 1: Design for a Computer Medium A computer screen is not a printed page. Readability changes depending on color, layout and format.
The Art of Interface Design HCI CS6540/5540 Fall 2004 Anne Morgan SpalterAdapted and Revised by Brown UniversityRich Riesenfeld.
MS3308 Cw1 assessment guide CW1 Deadlines CW1 (Strategy and Scope) DEADLINE ONE: 14th Nov CW1 (Structure and Skeleton) DEADLINE TWO: 28-Nov-2013.
Where Do I Start REFERENCE: LEARNING WEB DESIGN (4 TH EDITION) BY ROBBINS 2012 – CHAPTER 1 (PP. 3 – 14)
Computer Art Semester Review Answer the following questions using the PDF documents supplied. The Links to these files are located on our class website.
Why planning? In order to make a successful project good communication is key! The process of planning and designing a project involves many people from.
Website Design BTT1OC/2OC. What is web design? O A web site is a digital page consisting of HTML (hypertext markup language) files, images, movies, sound,
CGMB 113 / CITB123: MULTIMEDIA TECHNOLOGY
Multimedia Design. Table of Content 1.Navigational structures 2.Storyboard 3.Multimedia interface components 4.Tips for interface design.
CMPD 434 MULTIMEDIA AUTHORING
EQ 10: Lifelong Learning By: Marcus Peyton. Part 1: Tools used in the course.
Lecture Set 3 Introduction to Visual Basic Concepts Part A – User Interfaces and Windows Forms – The Toolbox.
Retouched and repaired photography. “hand” tinted black and white photography There are two main methods of “adding” color to an image. –Hand Coloring…
Making a Virtual Book With PowerPoint 2007 How to make a virtual book Using PowerPoint 2007 This is not a presentation template. This is not the venue.
William H. Bowers – Designing Look and Feel Cooper 19.
Designing User Interfaces User Interface: People’s perception of “The Product” Good UIs have two well-integrated conceptual parts: –Form / Visual Design.
Introduction to Interactive Media 02. The Interactive Media Development Process.
Multimedia & The World Wide Web winny HCI 201 Multimedia and the www.
Microsoft Wang Li, Wang Yini, Li YIcheng.  This is a presentation about Microsoft Windows7 guidelines  Wang Li K8wali00  Li Yicheng K8liyi00  Wang.
Multimedia Production Team
CIS—100 Chapter 9—PowerPoint 1. The PowerPoint User Interface 2 There is a tall band across the screen that contains many, very visual commands arranged.
ENG 171 Department of Multimedia and Graphic Arts
FORM AND FUNCTION Every publication begins as an idea: a subject or message with a function but no form. Real estate, sports, and cooking are all ideas/topics.
Guidelines and Prototypes CS774 Human Computer Interaction Spring 2004.
MULTIMEDIA DEVELOPMENT
Introduction to Interactive Media The Interactive Media Development Process.
Chapter 3 Multimedia Skills
CHAPTER TWO THE MAKING OF MULTIMEDIA: AND MULTIMEDIA DEVELOPMENT TEAM
CHAPTER TEN AUTHORING.
Design Principles The good and the bad Alyssa Mendiola Summer 2009.
Chapter 6: NavigationCopyright © 2004 by Prentice Hall 6. Navigation Design Site-level navigation: making it easy for the user to get around the site Page-level.
Introduction to Interactive Media Interactive Media Components: Text.
Designing User Interfaces User Interface: People’s perception of “The Product” Good UIs have two well-integrated conceptual parts: –Form / Visual Design.
Introduction to Making Multimedia
Creating your prototype. In this lesson students are learning about: Selecting appropriate software Creating an effective navigation system within an.
BC1Q FALL POWERPOINT NOTES 1 Microsoft PowerPoint is a program that is part of Microsoft Office.
1 MULTIMEDIA TECHNOLOGY SMM 3001 MEDIA - TEXT. 2 What is Text? the basic element of most multimedia the basic element of most multimedia consisting of.
Introduction to Interactive Media Interactive Media Tools: Authoring Applications.
VISUAL RHETORIC All the C.R.A.P. you need to know… The Purdue Writing Lab.
Chapter 3-Multimedia Skills
Lesson 3-Multimedia Skills. Overview Members of a multimedia team. Roles and responsibilities in a multimedia team.
RULES TO AVOID BAD DESIGN 1. Don’t annoy your viewers. Don't use frames unless you have to! - Frames are annoying and cause people to lose their way when.
LOGO The Steps to Creating a Business Card. California State Standards CTE Standards  AME.A.A2.1 Analyze the way in which technical design (e.g., color.
We looked at these two presentations and talked about the structure of setting up the table.
introductionwhyexamples What is a Web site? A web site is: a presentation tool; a way to communicate; a learning tool; a teaching tool; a marketing important.
The Structure of the User Interface Lecture # 9 Gabriel Spitz.
COM 205 Multimedia Applications St. Joseph’s College Fall 2004.
Imran Hussain University of Management and Technology (UMT)
Vital Elements of Designing Amazing Posters
LOGO The Steps to Creating a Business Card. California State Standards CTE Standards  AME.A.A2.1 Analyze the way in which technical design (e.g., color.
Multimedia Design.
Understanding the principles of website development
Educational Computing
Chapter 10 Development of Multimedia Project
>> Example of a digital Nōtan done in Adobe Photoshop
Mutimedia Screen Design
Interface Design Interface Design
The Art of Interface Design
COM 205 Multimedia Applications
Presentation transcript:

The Art of Interface Design Anne Morgan Spalter

Inter-related Components of Interface Design Task analysis and user testing Software engineering Functional analysis Aesthetic appeal Etc.

Looking Good—Then & Now 1 Some issues same as in traditional design –Overall composition (leading the eye, creating balance, etc.) –Use of shape/form –Use of color (not having too many different colors, using color to code features, etc.) People go to school years and do this as full- time jobs

Some Traditional Design Concerns in Digital Media Aligning elements Grouping elements properly for dialog boxes or screen design Designing clear icons Using type of screen Use (and over-use) of color Reducing clutter and visual noise Appropriate and consistent style Traditional design strategies: e.g., using small multiples, layering, narrative, metaphor [are these the type of things you’re most interested in communicating? I can give lots of example, but each could also be a whole course in and of itself. At RISD designers take a full year of typography, for instance.]

Looking Good—Then & Now 2 But some issues unique to digital media –Interaction –Animation (stuff changing over time) –Integration of different media (e.g., text, image, sound) –The need to structure a great deal of information (e.g., use of hierarchy and navigation) –Ever-changing tools, usage platforms (including new immersive spaces) These and other issues present new aesthetic design challenges [I can also give examples of these with more of a visual emphasis than Shneiderman has]

An Example I asked a student to recreate some of our java color applets in Director (as shockwave files). I told him to make them look the same as the old ones. He decided to add a bit of his own design to them and the results were very disappointing. It’s interesting because the functionality is exactly the same, but the change in aesthetics make it much less pleasurable to use the applets.

Older, Java version Not perfect but has nice feeling. This is especially important since the concept being taught is pretty simple

Exmaple 2/2

What Changed? subtle but important aesthetic differences change pleasure of using applet. New version is too big—bad use of screen real estate causes the program to hog up a lot of the screen, has unpleasant and totally irrelevant background color (greenish) behind printer, also has too much black—not nice use of gray in the older version. Printer doesn’t look realistic or diagrammatic—just like a bad 3D model, ink bottles not properly anti-aliased, many problem with perspective: ink bottle position, printer position, paper position, and “case” for sliders. The gradient banding is annoying, the sliders look like binders not sliders and application of gradient makes the colors too black, unattractive font for CMY letters on sliders. Different treatment of slider case and printer—inconsistent style is distracting. Use of black outline on paper makes it separate from printer and seem to be floating above it

And Another…

New Version

What’s Wrong This one looked better because he used more of the original design, which was a nice one, but now his two applets don’t look alike, which, for a series, is bad. And even something as subtle as the way the lights are lit up makes a big difference. Also, the use of purple around the edge of the monitor is a bad choice since it’s a color applet…

Everything Must Work Together If you don’t understand the client’s needs, it doesn’t matter how beautiful the interface looks. A good graphic interface needs to be meshed with good software engineering UI work often done in teams with programmers, cognitive scientists, artistic designers, and business people.

Resources Information Design: Edward Tufte’s book Multimedia Design: Designing Visual Interface (Mullet/Sano), Design Multimedia (Lopuck) Web Design: Lisa Weinman’s and David Siegel’s books Magazines: Print, How To (these are graphic design magazines that now address many digital design issues) Information Visualization (Ware) [some “science of graphic design”]