// 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 NeilUI Designer Austin, Texas

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

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

TagsInfo

Add to...

Download

Video Titl

e

descripti

on

Digital T

utors

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

20+

Shared Vocabulary: Common Controls for RIAs

popular UI frameworks , libraries, and

toolkits

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

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

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

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

12

31

2824

21

23

25

2726

2220

18

14

17

19

1615 12

9

11

87

10

13

S6

F5

T4

W3

T2

1

M30

S

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

12

31

2824

21

23

25

2726

2220

18

14

17

19

1615 12

9

11

87

10

13

S6

F5

T4

W3

T2

1

M30

S

Rich UI Control

DialogsRecord Locator/Paginator

1 of 2 recordsGo to record

Rich UI Control

Tooltips: Advanced

Formatted text

Rich UI

Control

Vertical Brows

er, Category C

hooser

Rich UI ControlDynamic Filtering

Rich UI ControlCharts/Graphs

2,500 visitors

Rich UI Control

Drag and Drop Manager

Rich UI

ControlCarousel/CoverflowRich UI

ControlCollapsible Panels

x

Rich UI ControlFish 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

ControlGantt ChartRich UI Control

Portals

Rich UI

ControlDialogsRich UI ControlMagnify

2

Slider

Rich UI

Control

888

Progress Indicator

Loading... 65%

Rich UI Control

View ToggleToolbar Rich UI

Control

Rich UI

Control

Zoom and Pan

Rich UI

ControlRating

Rich UI

Control

Table/Data Grid: A

dvanced

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 Deta

il

Rich UI

ControlHover Actions

Action +Rich UI ControlRule Builder/Predicate Editor

AnyMatch 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 Aitem Bitem Citem Ditem E

Rich UI ControlDate Picker: Advanced

To

Date Range

30 329 1 23128

2421 23 25 272622

201814 17 191615

129 1187 10 13

S6

F5

T4

W3

T21

M30S

December 2009

Select Today

30 329 1 23128

2421 23 25 272622

201814 17 191615

129 1187 10 13

S6

F5

T4

W3

T21

M30S

January 2010

Select Today

Rich UI

ControlDocking

Rich UI Control

Growing Textarea

Rich UI

Control

Hot Keys

shift

Z X

fn control option command

Rich UI ControlMultiple Document Interface (MDI)

Rich UI

ControlTabs: Advanced

Rich UI ControlFeedback

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

Shared 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

Shared Vocabulary: Interaction Patterns

100+pattern

s 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

Shared Vocabulary: Interaction Patterns

100+pattern

s 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

Shared Vocabulary: Interaction Patterns

100+pattern

s 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

Shared Vocabulary: Interaction Patterns

100+pattern

s for rich

interactions

distilled into six principles

3. Stay On The Page

5. Use Transitions4. 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

Shared Vocabulary: Interaction Patterns

100+pattern

s for rich

interactions

distilled into six principles

3. Stay On The Page

5. Use Transitions4. 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

Shared Vocabulary: Interaction Patterns

+100 patterns for ric

h

interactions

distilled into six principles

3. Stay On The Page

5. Use Transitions4. Provide Invitations

6. React Immediately

1. Make It Direct

Fidelity MyPlan

reacts immediately to

changing inputs

2. Keep It Lightweight

Shared Vocabulary: Interaction Patterns

+100 patterns for ric

h

interactions

distilled into six principles

3. Stay On The Page

5. Use Transitions4. 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

Shared Vocabulary: Reference Library

Can include

books (PDFs)

expert’s sites

live applications

RSS feeds

videos/ screencasts of good

examples

Online, Collaborative,

Live

Shared Vocabulary: Reference Library

Can include

books (PDFs)

expert’s sites

live applications

RSS feeds

videos/ screencasts of good

examples

Online, Collaborative,

Live

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’

Shared Vocabulary: Interaction Sketching Notation

Emerging visual language

Coherent sketching system

Tells a clearer story

Shared Vocabulary: Interaction Sketching Notation

Emerging visual language

Coherent sketching system

Tells a clearer story

by Jakub Linowski, of Wireframes Magazine

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.

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

Iterative Prototyping:HTML+ Protoscript

OmniGraffle

wireframes

protoscript- a

lightweight version of

JQuery for prototyping

HTML

Iterative Prototyping: Protocasting

OmniGraffle

wireframes with click

through links

screencast

this technique works with

any wireframing tool you

already use

MockLinkr

makes any

wireframes

clickable

Iterative Prototyping: Balsamiq + Napkee

Balsamiq

Mockups

Napkee

created mockups with

Balsamiq

Iterative Prototyping: Balsamiq + Napkee

Balsamiq

Mockups

Napkee

Imported to Napkee for

web code

Iterative Prototyping: Balsamiq + Napkee

Balsamiq

Mockups

Napkee

Can also get Flex code

Iterative Prototyping: Balsamiq + Napkee

Balsamiq

Mockups

Napkee

finished product

Iterative 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

@theresaneil

Thank you

ResourcesTodd 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