• Save


Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Like this? Share it with your network


Digital Portfolio Production Session II



Slide presentation on elements of Interaction and Presentation Design for creating digital portfolios.

Slide presentation on elements of Interaction and Presentation Design for creating digital portfolios.



Total Views
Views on SlideShare
Embed Views



2 Embeds 237

http://aaablogs.uoregon.edu 141
http://blogs.uoregon.edu 96



Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • Main Menu <br /> Gallery system <br />
  • <br />
  • Whether the user can get what they need depends on getting them oriented right from the start. <br /> <br /> The first screen should tell the user what they are going to do, see or experience. <br /> <br /> Use a balance of images and words that provide enough guidance to be useful without too much detail. <br />
  • <br />
  • Every route in your flow chart represents an access route you will need to create. <br /> <br /> Provide direct access where ever possible. <br /> <br /> Consider a variety of access types: menus lists, timelines, icons, buttons, maps <br />
  • New - Major leap; change of scene <br /> Within - new material in same topic should be subtle to keep user anchored and in control <br /> <br /> Users become disoriented if content jumps from screen to screen. Where am I? How do I get back? <br /> <br /> Solution - Bring new material to current screen <br />
  • Random Access: Less is More <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • Process of looking at the closeup view of individual controls and the big picture of how all the controls work together <br />
  • <br />
  • 1. Avoid content exceptions/find universal solutions. <br /> <br /> 2. What mode am I in? Be careful with button states. <br /> <br /> 3. What does this button do? Don&#x2019;t change a buttons function on different screens. Keep it consistent. <br />
  • <br />
  • <br />
  • Walk through the flow chart & put on paper all the actions and options available on screen. <br /> <br /> Do you need to consider timing? <br />
  • <br />
  • <br />
  • Come up with a visual language that will make the content list, flow chart and storyboard come to life, work together and support the functions of each screen. <br /> <br /> Keep it simple <br /> Keep it consistent <br /> Know when to break the rules <br />
  • <br />
  • <br />
  • The Elements of Style <br />
  • <br />
  • Design a collection of screens not individual screens <br /> How will they work together and be visually interesting? <br /> Examples <br /> distinct images in a montage on the main screen, used individually in topic screens <br /> Distinct colors in the main screen, used individually as key colors in topic screens <br /> a hierarchical family of images, such as a clock and clock parts or a tree and leaves. <br />
  • <br />
  • Come from the world of print <br /> Be aware of, know when to break <br /> Scan from top left to bottom right <br /> assume that larger items are more significant <br /> assume that items &#x201C;above&#x201D; have primacy over items &#x201C;below&#x201D; <br /> Look for &#x201C;more to come&#x201D; signals at the bottom center or right <br />
  • Layout Effects: <br /> How good it looks <br /> How easy it is to understand <br /> How easy it is to use <br /> The purpose of interface elements are: <br /> structural <br /> Informational &#x2013; images, text <br /> functional &#x2013; buttons <br />
  • <br />
  • The elements are the building blocks of the interface <br /> Their family relationship produces a sense of continuity and consistency <br />
  • Backgrounds provide location and context <br /> they influence look, balance & location of all elements on the screen <br /> fill empty space so other elements are not floating <br /> do not need to fill screen <br /> should be integrated and not compete with content <br />
  • Windows often hold media <br /> Panels enhance structural features or add depth or color <br />
  • Can be any part of the screen or image <br /> has to reveal purpose at first glance <br /> need to mach style & composition of the screen <br /> should be proportional in importance to the function it represents <br /> For Layout cluster controls by function <br /> use consistent positioning <br /> when there are many controls <br /> if same controls used frequently <br /> several controls have a similar look & feel <br />
  • Special button that symbolically depicts what it does <br /> Instantly recognizable <br /> meaning is cross-cultural <br /> scalable <br /> simple <br />
  • standalone <br /> component - should be created seperately <br /> Integration techniques <br /> drop shadow <br /> alpha transparency mask <br /> soft or irregular edges <br /> <br />
  • Text is always content <br />
  • Preserving Formats <br /> bitmap - can&#x2019;t be edited, searched or indexed <br /> Flash text - Increases storage and bandwidth in addition to the above <br /> PDF <br /> Scrolling Fields <br /> no custom formatting <br /> anti-aliasing can be an issue <br /> can negatively impact design <br />
  • <br />
  • How large should the video window be? <br /> How long should the video play? <br /> <br />
  • Elements that change <br /> Elements that move <br /> Elements that appear/disappear <br /> Screen transitions <br />
  • <br />
  • <br />
  • <br />

Digital Portfolio Production Session II Presentation Transcript

  • 1. Digital Portfolio Production Workshop AAA 408/508 – Session II Instructor – Scott Huette
  • 2. Interaction Design How Should It Work?
  • 3. The User Controls… • Sequence • Pace • What to look at • What to ignore
  • 4. You get to decide where and how to give that control to the user. Figuring out what the user wants to do at any given time is the basis of all interaction design.
  • 5. Critical Taks • Create a guidance system to orient the user • Design the navigation and access routes • Define what happens on every screen • Design controls for interaction • Create a storyboard
  • 6. Goals of Interaction Design • Clarity • Simplicity • Ease of Use
  • 7. Orientation and Navigation
  • 8. Navigation is about creating interfaces that help users understand… • Where they are • Where they can go • How to get there
  • 9. Good navigation design will… • minimize travel • minimize depth • minimize redundancy
  • 10. Two Levels of Access 1. Access to a new topic 2.Access within a topic
  • 11. The Price of a Link • If the link send the user to a new location access controls need to be created so the user can return without getting lost • If the link brings material from another topic the content may need to be redesigned
  • 12. Usability
  • 13. Basic Guidelines • Don’t add to the user’s burden by making them “learn” to use your product. • Don’t make them do things the product could do for itself (starting video, playing sound) unless they need to control these. • Don’t waste their time with elaborate features or multiple ways of doing things.
  • 14. Examples of Violations • Conflicting controls for similar operations • Cryptic messages • “Creative Redefinition of standard interface elements, such as menus that pop out of buttons. • Excessive and redundant media controls
  • 15. Additional Guidelines • Remove obstacles • Minimize effort • Give feedback • Be explicit • Be flexible • Be forgiving
  • 16. Presentation Design How should it look?
  • 17. Critical Tasks • Define the visual theme and style • Design a system of screen layouts • Create the structural elements of each screen (backgrounds, windows, etc.) • Create the control elements ( e.g. buttons) • Integrate the media elements (e.g. images, videos, sounds) • Create prototype screens
  • 18. Defining Your Style Style is the sum of the characteristics you can perceive about an object, a person or an experience.
  • 19. Image Style: Rendering: Sound: Effects: computer or Text: Action: bold/soft; musical style; screen manual terse; dramatic; pace of action; Sharp/flowery; narration; sound animations; rendering; instructional pace of change artistic/functional effects transitions colors; forms Typography: Video: Interaction: font style; use of type as art direction; production level of user interaction/ art values; acting engagement Graphic Media Authoring Style Style Style Interface Style
  • 20. Content Defines Style • Identify the quality or characteristic that lends substance to your project • In other words, define a coherent theme • Make every design element consistent with that theme • Unity not uniformity is the goal
  • 21. Interface Families
  • 22. Interface Conventions
  • 23. Layout
  • 24. Design Grids • Can be a benefit in a layout • adds subtle alignment • adds sense of balance • keeps elements from jumping when switching screens • creatively break the grid when appropriate
  • 25. Interface Elements
  • 26. Backgrounds
  • 27. Windows and Panels
  • 28. Buttons & Controls
  • 29. Icons
  • 30. Text
  • 31. Web Fonts
  • 32. Rules of On-Screen Type • minimum size 12 pt • high contrast • small font should have serifs and • limit amount of text on one screen strokes of even thickness • allow for more letter spacing – can be difficult to control • loose line spacing • short columns of text instead of long lines
  • 33. Good Reasons To Use Video • A personal message needs to be • You need to show an object or a communicated by a specific place from several different points individual. of view or in some other way that a single image couldn’t accomplish. • You need to show something in live action, such as an artistic • You want to teach something that performance or an instructional would be expensive or impractical role-playing scenario. for viewers to experience in a lab or other real-world setting. • You need to demonstrate something functional, such as a • You’re using video as art. tool or a vehicle.
  • 34. Animating The Screen
  • 35. The Prototype • Create a mock up in Photoshop • Create a template in Dreamweaver using the mock up as a tracing image • create a place in the shell to represent each screen • add navigation link to and from each screen • import the content graphics and media
  • 36. Portfolio Critiques • Search the Web for 3 Portfolio sites that you like or dislike • For each site list 5 things that work and 5 things that do not work • Share with the class