Post on 27-Jan-2016
description
High-Fidelity Prototyping
IS 485, Professor Matt Thatcher
2
Agenda Administrivia High-fidelity prototyping
– terminology– brief overview of tools
3
“Culture” of Prototyping(Relationship bet. the prototype and the final
product)
Rapid prototyping – prototype is “thrown away”– collect info on requirements and test different designs
Evolutionary prototyping– initial prototype is constructed, evaluated, and evolved
continually until it becomes the final system– most extensive form of prototyping
Incremental prototyping– allows large system to be installed in phases to avoid
delays between specifications and delivery
4
“Dimension” of Prototyping (Degree or depth of the prototype’s functionality)
Full prototype– complete functionality (lower performance)
Horizontal prototype– shows the user-interface but has no
functionality behind the action buttons/menus
Vertical prototype– contains all the high level and low level
functionality for a restricted part of a system
5
Dimensions
Hardware
User Interface
Systems SoftwareData base and Telecommunications
Applications Software
HorizontalPrototype
VerticalPrototype
6
Constructing a Hi-Fi Model Review all relevant user design doc’n
– task analysis, paper prototypes, user test results, other feedback, etc.
Using a “tool”, define windows, controls, and screen layout– Microsoft Access – physical layout, toolbox, and properties
Develop inter-window navigation– Microsoft Access – macros and modules
Develop text entry / display logic Develop additional functionality as called for
in the prototype plan– Microsoft Access – bound, unbound, and calculated controls
7
Constructing a Hi-Fi Model Unit test the prototype
– make sure each button click does what it is suppose to do
Complete doc’n to identify functionality that will not be prototyped at this time
Determine technical constraints Review prototype with the team
before review with users
8
Clothes-Shopper Revisited(Tool = Visual Basic)
9
Clothes-Shopper(Profile Setup)
10
Clothes-Shopper(Early Main Page)
11
Clothes-Shopper(Later Main Page)
12
13
14
Clothes-Shopper(The Next Iteration)
vs.
What’s the difference?
Old
New
15
16
17
Early Design
Brainstorm different representations
Choose a representation
Rough out interface style
Scenario-centered walkthrough (Storyboarding)
Low-fidelity prototypes
User testing
High-Fidelity horizontal prototypesFine-tune UI, screen design, color, fonts, dialog, etc.
High-Fidelity vertical prototypes
Add more functionality, perform more usability testing, and do more redesign
Limited field testing and alpha/beta testing
High-Fidelity full prototypes or working systems
Late Design
Heuristic evaluation
User testing
Heuristic evaluation
18
Why Do We Use Tools to Prototype?
Faster Easier to incorporate testing changes Easier to involve variety of specialists Separation of UI code from application
code– easier to change and maintain
Don’t have to worry about:– code– quality assurance– code management
19
Prototyping Tools Hypermedia systems
– Hypertext Mark-Up Language (HTML), Hypercard (Apple), Dreamweaver (Macromedia), FrontPage (Microsoft), Go Live (Adobe), Visio (Microsoft)
Graphical/animation tools– Director (Macromedia), Flash (Macromedia)
Programming tools (UI builders)– Visual Basic, JAVA
Other tools– Access, Excel, PowerPoint, Word (all Microsoft)
20
HTML Set of logical codes (markup) that define the
appearance of a web document and its content– tags, elements, attributes– <FONT=“blue” SIZE=“+1”>This text would be blue and one
size larger than normal</FONT> – <body BGCOLOR=“#FFFFFF”>
Problems with hand coding html documents– takes time to learn– not visual
» while html may be preferred by programmers it is not necessarily preferred by designers for this reason
– more difficult to create and maintain certain elements, like tables
– programming issues and frustrations for novices– more difficult to incorporate multimedia, animation, etc.
21
HTML(Creating a basic document)
<html>
<head><title> </title></head>
<body></body>
</html>
22
HTML(Sample coding)
23
HTML(Forms)
• <INPUT TYPE=“Text”>• creates a text box• attributes include Type, Name, Value, Size, etc.• other types include
• “Checkbox”, ”Password”, ”Radio”, ”Button”, “Submit”, “Reset”, etc.
• JavaScript• adds functionality to the web page • we’ll see examples in a few slides
24
Hypermedia Systems Computer applications that structure
information in a navigable form– html code is generated automatically as text, images,
buttons, etc. are added usually by drag-and-drop operations
Advantages– common tools– relatively low cost– easy to learn, use, and maintain– easy to reach a high level of software quality– scripting languages to add functionality– can be used to implement final UI (“evolutionary”)
25
Apple HyperCard(Overview)
Main components– stacks (e.g., book of pages or a rolodex of cards) – cards (e.g., pages in a book, cards in a rolodex,)– backgrounds (template shared by cards in a stack)– buttons, fields, icons, menus, graphics
Creating and modifying objects– features (or properties)– behavior (scripts)– paint tools
26
Apple HyperCard(The Look)
27
Apple HyperCard(Scripting Language = HyperTalk)
Script for a button– simple, English-like, not as powerful as other
scripts
28
Macromedia Dreamweaver(Overview)
Main components– document window (the screen area or real
estate)– object palette (graphics, tables, links, form
controls, and other common web elements)– properties inspector (defines appearance of
objects)– launcher (site management) and mini-launcher
» has its own ftp program built in which makes it faster and easier to publish the site
29
Macromedia Dreamweaver(The Look)
30
Macromedia Dreamweaver(JavaScript and Behaviors)
JavaScript– scripting language that adds functionality to
your webpage– controls and modifies html elements– it is part of the web page (embedded in the
html code) and is run by the browser Behaviors
– pre-defined (or pre-build) bundles of JavaScript code that perform common functions
– similar to “macros” from Microsoft Access which are pre-defined bundles of VisualBasicScript
31
JavaScript(Directs user to a webpage based on browser
version)
32
JavaScript(Another example)
33
JavaScript(Results from previous slide)
34
Microsoft Frontpage(Overview)
Main parts– editor (i.e., screen area)– properties– editor views (normal, preview, html)– views bar (hyperlinks, navigation, reports, etc.)
35
Microsoft Frontpage(The Look)
36
Microsoft Frontpage(Visual Basic Scripting)
37
Adobe Go Live(Overview)
Similar to Dreamweaver but– DW is used much more by professional
designers and developers– DW is considered easier to learn and more
intuitive– Go Live does not have site management tools
UI is similar to other Adobe products Main parts
– layout gird (i.e., screen area)– object palette (e.g., widgets)– inspector palette (e.g., properties)
38
Adobe Go Live(The Look)
39
Director(Overview)
Director– commonly used by designers– intended for multimedia applications
» used for movies, interactive games, and animations, audio, images, etc. on CDs, websites, and kiosks
» lacks a good standard widget set– can create a database in Director (but not that great)
5 main components– stage that displays what the end user will see– toolbars for creating and changing artwork– property inspector and text inspector for setting properties– score to organize movie contents (frame)– cast stores reusable items (buttons for interactivity and navigation,
movie clips for complex animation, and graphics)– behaviors are pre-built modules of code– Lingo script
40
Director(The Look)
Stage
Score
Cast
41
Director(Scripting Language = Lingo)
Lingo– optimized for animation– not as powerful for functionality as VB
42
Flash(Overview)
Similar to Director– marketed as a web development tool– primarily used in movie, animation, and sound applications
or to add animation to an existing website– used often for websites, CD-ROM, Kiosks
Easy to put Flash animation in DW applications
Main components:– stage that displays what end user will see– toolbars for creating and changing artwork– panels for modifying properties of elements– timeline to organize movie content (frames)– library stores reusable items (buttons for interactivity and
navigation, movie clips for complex animation, and graphics)– smart clips are pre-build modules of code– action script
43
Flash(The Look)
44
Visual Basic Lots of widgets
– aka, controls or designer created standard interface elements
Simple language (Basic) Slower than other UI builders sets Modifies properties Associates widgets with programs that
operate when they are invoked by a user of an interface
45
Visual Basic(The Look)
46
JAVA Developed by Sun Microsystems Cross platform
– PC, Mac, Unix
47
Microsoft Access(Overview)
Main components– physical layout (i.e., screen area)– tool box– properties– macros (pre-built, easy-to-use code)– modules (visual basic script)
Microsoft motif applications Web applications Extremely versatile tool
48
Microsoft Access(The Look)
49
Microsoft Access(The Look)
50
Microsoft Access(The Look)
51
Microsoft Access(The Look)
52
Other Prototyping Tools Excel, Word, PowerPoint, etc.
– widgets sets– easily connect to code via “callbacks”– “commercial” strength languages
Visio– see “Visio – The Designer’s Nail Gun”
53
Determining Which Prototyping Tool to Use
Hardware requirements Ease of use (programming skill) Widget set Graphic sophistication Environment (e.g., Windows, UNIX, Macintosh) Prototyping techniques Price/cost Organizational fit (e.g., other tools used by the
design team, company, etc.)
54
General Pricing of Prototyping Tools
HTML Free
HyperCard $99
Visual Basic $109
FrontPage $169
Access $339
DreamWeaver $399
Go Live $399
Flash $499
Visio Professional $499
Director $1,199
55
Summary Low-fi prototypes don’t go far enough Hi-fi prototypes
– give users a more realistic example of the interaction– give users a better impression– encourage getting the details right (which do matter)
Culture and dimensions of hi-fi prototyping Choose appropriate prototyping tools
– depends on a whole lot of factors
Set up user reviews and sign-off procedures
56
Next Time