Presented on Nov 3, 2009 at Øredev in Malmo, Sweden. What is the fastest way to get from a product idea to a rich internet application? By breaking down the communication barriers between designers and developers. This talk takes a quick look at how to build a shared vocabulary and use prototyping to bypass extensive wireframes and development specs. Take a look at 5 simple and effective prototyping tools: Balsamiq Mock-ups + Nakpee Any wireframes + Protoscript Prototcasting (using click-throughs and screencasts to convey requirements) Atlas and other development environments + visual layout editors This presentation goes hand in hand with our book (Bill Scott & Theresa Neil) called Designing Web Interfaces: Principles and Patterns for Rich Interaction.

1. // Call the function to create the markup structure;
<div id="lightbox-nav">
<a href="#" id="lightbox-nav-
// Get page sizes
var arrPageSizes = ___getPageSize();
// Style overlay and show it
$('#jquery-overlay').css({
backgroundColor: settings.overlayBgColor,
opacity: settings.overlayOpacity,
width: arrPageSizes[0],
height: arrPageSizes[1]
}).fadeIn();
// Get page scroll
var arrPageScroll = ___getPageScroll();
// Calculate top and left offset for the jquery-lightbox div
$('#jquery-lightbox').css({
top: arrPageScroll[1] + (arrPageSizes[3] / 10),
left: arrPageScroll[0]
}).show();
// Assigning click events in elements to close overlay
$('#jquery-overlay,#jquery-lightbox').click(function() {
});
Designers
vs. Developers
Coming together to
build the best RIAs
Øredev 2009
Theresa Neil
UI Designer
Austin, Texas

2. I’m an Interface
designer in
Austin, Texas
Web, mobile and
desktop app design-
mostly rich internet
applications (RIAs)
- My Design Blog
- Designing Web
Interfaces Blog

3. What’s the goal?
Move from this
To this- as fast as
possible
0:00 / 4:59
0:00 / 4:59
0:00 / 4:59
?
Clips
Notes
Tags
Info
Add to...
Download
Video Title
description
Digital Tutors

4. How can we do this?
Need a shared vocabulary:
learning both sides of the screen
Iterative Prototyping:
move away from exhaustive tech specs
common controls for RIAs
interaction patterns
reference library
interactive sketching notation
protoscript
protocasting
Ext Js Designer
Balsamiq Mockups + Napkee
1
2
3
4
1
2
3
4
Creating a Shared
Vocabulary
The real conflict is based on a lack
of shared and agreed vocabulary
Lea Alcantara

5. 20+
Shared Vocabulary: Common Controls for RIAs
popular UI
frameworks ,
libraries, and
toolkits

6. Shared Vocabulary: Common Controls
~40 essential UI
controls
Designers
Explore these
frameworks and play
with the controls
Developers
Look outside of the
framework you use
to see what else is
evolving

7. Shared Vocabulary: Common Controls
~40 essential UI
controls
Designers
Explore these
frameworks and play
with the controls
Developers
Look outside of the
framework you use
to see what else is
evolving
Rich UI
Control
Inline Edit
Text
Save Cancel
Text

8. Shared Vocabulary: Common Controls
~40 essential UI
controls
Designers
Explore these
frameworks and play
with the controls
Developers
Look outside of the
framework you use
to see what else is
evolving
Rich UI
Control
Inline Edit
Text
Save Cancel
Text Rich UI
Control
Sparklines

9. Shared Vocabulary: Common Controls
~40 essential UI
controls
Designers
Explore these
frameworks and play
with the controls
Developers
Look outside of the
framework you use
to see what else is
evolving
Rich UI
Control
Inline Edit
Text
Save Cancel
Text Rich UI
Control
Sparklines
Rich UI
Control
Calendar/Event Scheduler
Dec 2009
30
3
29
1
2
31
28
24
21
23
25
27
26
22
20
18
14
17
19
16
15 12
9
11
8
7
10
13
S
6
F
5
T
4
W
3
T
2
1
M
30
S

10. Shared Vocabulary: Common Controls
~40 essential UI
controls
Designers
Explore these
frameworks and play
with the controls
Developers
Look outside of the
framework you use
to see what else is
evolving
Rich UI
Control
Inline Edit
Text
Save Cancel
Text Rich UI
Control
Sparklines
Rich UI
Control
Calendar/Event Scheduler
Dec 2009
30
3
29
1
2
31
28
24
21
23
25
27
26
22
20
18
14
17
19
16
15 12
9
11
8
7
10
13
S
6
F
5
T
4
W
3
T
2
1
M
30
S
Rich UI
Control
Dialogs
Record Locator/Paginator
1 of 2 records Go to record
Rich UI
Control
Tooltips: Advanced
Formatted text
Rich UI
Control
Vertical Browser, Category Chooser
Rich UI
Control
Dynamic Filtering
Rich UI
Control
Charts/Graphs
2,500 visitors
Rich UI
Control
Drag and Drop Manager
Rich UI
Control
Carousel/Coverflow Rich UI
Control
Collapsible Panels
x
Rich UI
Control
Fish Eye, Spotlight
Far far away, behind the word mountains,
far from the countries Vokalia and
Consonantia, there live the blind texts.
Separated they live in Bookmarksgrove right
at the coast of the Semantics, a large
language ocean.
Rich UI
Control
Gantt Chart
Rich UI
Control
Portals
Rich UI
Control
Dialogs
Rich UI
Control
Magnify
2
Slider
Rich UI
Control
888
Progress Indicator
Loading... 65%
Rich UI
Control
View Toggle
Toolbar Rich UI
Control
Rich UI
Control
Zoom and Pan
Rich UI
Control
Rating
Rich UI
Control
Table/Data Grid: Advanced
Tree: Advanced
! Item 1
! Item 2
" Item 2.1
" Item 2.2
! Item 3
Item 3.1
Item 3.2
Item 3.2
Item 3.2
Rich UI
Control
Hover Detail
Rich UI
Control
Hover Actions
Action +
Rich UI
Control
Rule Builder/Predicate Editor
Any
Match of the following:
Name contains final
Type is document ...
...
Rich UI
Control
Combobox: Multi-select
select
Search
All
Authors
Title
Genre
Scoped Search
Rich UI
Control
List: Advanced
item A
item B
item C
item D
item E
Rich UI
Control
Date Picker: Advanced
To
Date Range
30 3
29 1 2
31
28
24
21 23 25 27
26
22
20
18
14 17 19
16
15
12
9 11
8
7 10 13
S
6
F
5
T
4
W
3
T
2
1
M
30
S
December 2009
Select Today
30 3
29 1 2
31
28
24
21 23 25 27
26
22
20
18
14 17 19
16
15
12
9 11
8
7 10 13
S
6
F
5
T
4
W
3
T
2
1
M
30
S
January 2010
Select Today
Rich UI
Control
Docking
Rich UI
Control
Growing Textarea
Rich UI
Control
Hot Keys
shift
Z X
fn control option command
Rich UI
Control
Multiple Document Interface (MDI)
Rich UI
Control
Tabs: Advanced Rich UI
Control
Feedback
Sorry. You need to correct the fields
marked below before continuing.
!
Success! Message goes here. Message goes
here.
Success! Message goes here. Message goes
here.
i

11. Vocabulary: Common Controls
autocomplete
carousel
charts
calendar
framework
Links to demo
galleries for all
20+ frameworks
Don’t worry...
there is a matrix
Download the
flipbook of
patterns View the matrix
online

12. cabulary: Interaction Patterns
100+
patterns for rich
interactions
distilled into six principles
3. Stay On The Page
4. Provide Invitations
5. Use Transitions
6. React Immediately
1. Make It Direct
noteflight has a
directly editable score
1. Make It Direct
2. Keep It Lightweight

13. cabulary: Interaction Patterns
100+
patterns for rich
interactions
distilled into six principles
3. Stay On The Page
4. Provide Invitations
5. Use Transitions
6. React Immediately
1. Make It Direct
2. Keep It Lightweight
Picnik uses
contextual tools for
photo editing
2. Keep It Lightweight

14. cabulary: Interaction Patterns
100+
patterns for rich
interactions
distilled into six principles
3. Stay On The Page
4. Provide Invitations
5. Use Transitions
6. React Immediately
1. Make It Direct
Adobe Buzzword keeps
sign in, sign up and
forgot password all in
the same page
2. Keep It Lightweight
3. Stay On The Page

15. cabulary: Interaction Patterns
100+
patterns for rich
interactions
distilled into six principles
3. Stay On The Page
5. Use Transitions
4. Provide Invitations
6. React Immediately
1. Make It Direct
Gmail uses a tour
invitation to introduce
their new drag and
drop feature
2. Keep It Lightweight

16. cabulary: Interaction Patterns
100+
patterns for rich
interactions
distilled into six principles
3. Stay On The Page
5. Use Transitions
4. Provide Invitations
6. React Immediately
1. Make It Direct
Whitestone Cheese uses
transitions to keep
their customers in the
shopping flow
2. Keep It Lightweight

17. cabulary: Interaction Patterns
+100 patterns for rich
interactions
distilled into six principles
3. Stay On The Page
5. Use Transitions
4. Provide Invitations
6. React Immediately
1. Make It Direct
Fidelity MyPlan
reacts immediately to
changing inputs
2. Keep It Lightweight

18. cabulary: Interaction Patterns
+100 patterns for rich
interactions
distilled into six principles
3. Stay On The Page
5. Use Transitions
4. Provide Invitations
6. React Immediately
1. Make It Direct
Fidelity MyPlan
reacts immediately to
changing inputs
2. Keep It Lightweight
See all
patterns at
Designing
Web Interfaces

19. Shared Vocabulary: Reference Library
Can include
books (PDFs)
expert’s sites
live applications
RSS feeds
videos/ screencasts of good
examples
Online,
Collaborative,
Live

20. Shared Vocabulary: Reference Library
Can include
books (PDFs)
expert’s sites
live applications
RSS feeds
videos/ screencasts of good
examples
Online,
Collaborative,
Live

21. Shared Vocabulary: Reference Library
Can include
books (PDFs)
expert’s sites
live applications
RSS feeds
videos/ screencasts of good
examples
Online,
Collaborative,
Live
The 50 apps we
use for reference
Full list available-
Google for
’50 Most Usable
RIAs’

22. Shared Vocabulary: Interaction Sketching Notation
Emerging visual language
Coherent sketching system
Tells a clearer story

23. Shared Vocabulary: Interaction Sketching Notation
Emerging visual language
Coherent sketching system
Tells a clearer story
by Jakub
Linowski, of
Wireframes
Magazine

24. Iterative Prototyping
Todd Zaki Warfel,
Prototyping- A Practitioners Guide
Design 70%,
prototype the rest
Iterative Prototyping
Design only enough to get
stakeholder buy-in:
Typically the information
architecture and high level
screen layouts.

25. Iterative Prototyping: Why and How
Why Prototype?
get audience feedback
quicker
prototyping lets us
(designers + developers)
work through the design
issues earlier
classic wireframes +
specs only gets you about
3/4 of the way there
Todd Zaki Warfel,
Prototyping- A Practitioners Guide
How?
AdaptivePath
Blog- Rapid
Protoyping
Tools List
+ 30 more online
tools that are still
maturing
HTML + Protoscript
protocasting

26. Prototyping:HTML+ Protoscript
OmniGraffle
wireframes
protoscript- a
lightweight version of
JQuery for prototyping
HTML

27. e Prototyping: Protocasting
OmniGraffle
wireframes with click
through links
screencast
this technique works with
any wireframing tool you
already use
MockLinkr
makes any
wireframes
clickable

28. Prototyping: Balsamiq + Napkee
Balsamiq
Mockups
Napkee
created mockups with
Balsamiq

29. Prototyping: Balsamiq + Napkee
Balsamiq
Mockups
Napkee
Imported to Napkee for
web code

30. Prototyping: Balsamiq + Napkee
Balsamiq
Mockups
Napkee
Can also get Flex code

31. Prototyping: Balsamiq + Napkee
Balsamiq
Mockups
Napkee
finished product

32. Prototyping: Atlas
Atlas: A Development
Environment and
Visual Layout Editor
One of many new
products that combines the
visual layout with the IDE
Other ones to watch:
3. Wireframe Sketcher- an
Eclipse Plugin
4. EXT Js Designer
1. Microsoft Sketchflow +
Blend
2. Flash Catalyst or Flex
Builder 3 w/ Extensions

33. @theresaneil
Thank you
Resources
Todd Zaki Warfel
Prototyping- A Practitioners Guide Rosenfeld
Media www.rosefeldmedia.com
Jakub Linowski at Wireframes Magazine
Peldi Guilizzoni at Balsamiq Studios
Enrico Berti at Napkee
Rob Jones at 2SideDesign Studio for the
computer image
Bert Timmerman for the great notebook image
Franco Breciano for sharing the Swebapps
examples
theresaneil@gmail.com
www.theresaneil.com