A series of UX trainings created for several cross-functional teams creating both mobile and desktop products: visual designers, product managers, business analysts, developers, and interaction designers. The training was the foundation for a very large redesign/reconstruction project for a CRM and a dahsboard application. The principles and layouts draw on the pioneering work of Theresa Neil and Bill Scott.

1. Application Design:
Principles & layouts

2. Catalogue web

3. Brochure web

4. Web applications
Rich interactivity of
software applications
Media-rich, hyper-
connected Web+
live save • drag/drop • slider
• preview • direct editing •
undo • dynamic refresh •
immediate feedback •
resize • collapse • etc
hyperlinks • book marks •
graphics • back button •
search • multi-media •
device agnostic • access
anywhere

5. 6 Rules for interaction design
(Add in rules from software design)
#1 Make It Direct
where there is output, there should be input – Alan Cooper
#2 Keep It Lightweight
application should stay out of the user’s way
#3 Stay In the Page
application should stay out of the user’s way
#4 Provide An Invitation
use animations and user events to invite discovery
#5 Use Transitions
help user understand beginnings, endings
#6 React Immediately
provide feedback as soon as possible (auto suggest, live search, etc.)

6. Just add…
Ajax … CSS3 … HTML5 … jQuery

7. 4 Elements of app design
A better way: application design

8. Four application layers

9. Design for all four layers
Application structure
Screen layouts
UI Controls
Interactions

10. a
3 types of application pattern

11. Rich application structure
Hierarchical Hub + spoke

- HTML paging paradigm
- Heavy navigation
- Several screens per goal
- hyperlinked, hyper-connected
- Screen flow mapped to user
work patterns
- One screen per user goal

12. Three application patterns
Patterns solve problems - help people achieve
goals
1. Information pattern
2. Process pattern
3. Creation pattern
(note: from Designing for Flex by Rob Adams)

13. 1 The information pattern
 Use when people need to find, browse,
manipulate, and interpret information
 95% of the time people are seeking information
 maps, news readers, dashboards, media
players, classified listings, stores

14. Find books and video
(information pattern)
Safari Books

15. News + magazines
(information pattern)

16. Map search
(information pattern)

17. Vacation rental search
(information pattern)

18. Email client
(information pattern)

19. Information Pattern: design principles
 Information is the primary focus; everything else
is a distraction
 Everything else should fade to background, be
de-emphasized, or revealed in context of use
(e.g., on intention)
 Make the information the central hub, use
spokes to provide tools for information
management
 Offer tools for sorting, filtering, & multiple views
(e.g., map, listing, thumbnail, gallery)

20. Information Pattern: design principles
 Use typographic design and editorial design
techniques to make information easy to skim
 Data visualization techniques are important as a
way to concentrate the most information into
screen space

21. Hub and spoke architecture
(an aside)
Use hub and spoke pattern (as a singleton or
looped together) to allow people to stay anchored
to primary information

22. Hub and spoke architecture
(an aside)

23. 2 The process pattern
 Use when people need to provide structured
data (e.g., normative, legal, business logic)
• normative: Web standards such schema.org
rules for product listings, reviews, addresses
• legal: tax preparation, healthcare, and financial
transaction data
• logical: information dependencies on audience
segmentation (e.g. age, language, region)
 Classified listings, blog posts, shopping cart,
customize a car, order pizza, tax software, bill
payment, banking

24. Mobile app generator
(process pattern)

25. Tax preparation
(process pattern)

26. Project management
(process pattern)

27. Email newsletter management
(process pattern)

28. Shopping cart/checkout
(process pattern)

29. Order take out / delivery
(process pattern)

30. Process pattern: design principles
Since workflow is complex and often infrequent:
 Use invitations to complete – show where titles,
headings, images, content should go
 Make clear what has been/what needs to be
completed
 Use steps to make process apparent
 Provide clear navigation
 Show completion status
 Allow maximum autonomy to skip steps
 Always keep end goal visible

31. Invitations to complete

32. Keep goal visible

33. Show steps

34. Show steps

35. 3 Creation pattern
1.Use when people want to create or modify
content
2.Design apps, wireframe tools, code editors,
illustration toools, sketching tools, note capture
apps, music production

36. Sketching tool
(creation pattern)

37. Blog Writing
(creation pattern)

38. Blog Writing
(creation pattern)

39. Illustration program
(creation pattern)

40. 3. Creation pattern: design principles
1.Devote majority of screen real-estate to the
workspace
2.Use contextual tools - show when they are
needed
3.Undo/redo functions are required
4.Auto-save required
5.Emphasis on user autonomy / total control

41. Workspace dominant /contextual tools

42. Undo / redo

43. Recap – 3 application patterns
Information
Pattern
Process
Pattern
Creation
Pattern
So…
• You’ve figured out which application pattern or patterns
are best
• U <3 hub and spoke architecture
What’s next? v

44. Align user goals with layout choice(s)
1.Know which app pattern or patterns you need
2.Use the hub and spoke architecture
3.Use one goal for one screen philosophy
4.Determine what the goal is for that screen
5.Figure out which screen layout is needed

45. a
15screen layouts

46. Screen layouts

47. Form

48. Portal
– Use for brochure or catalog sites
– Use when 80/20 rule applies – 80% of users use
20% of features, but which 20% of those
features is highly varied
– Offer customization – users can turn on and off
content modules
– Customized for audience segments
– Parallax design – a type of portal
– Business apps – better to use a dashboard

49. Tabbed
– Use tabbed layouts only after other options are
exhausted. Better used as *component*
– One tab = one workflow (users shouldn’t tab
between one workflow and another)
– One screen per goal philosophy still applies
– Use tabbed layout if users need to move
between different views of same data (list view,
map view, gallery view)
– Not recommended to use tabbed view to
navigate between radically different types of
information

50. Tabbed

51. Tabbed – as component

52. Browse
– Use when people need to quickly scan and
navigation through information
– Serve primary content on the left (preferred)
– Other browsing options to right of primary
content

53. Browse

54. Master / detail
Allows user to stay on same screen
Reduces cognitive load (recognition rather than recall)

55. Master / detail

56. Master / detail

57. Master / detail

58. Dashboard
Use when you need key, at-a-glance information, real-time data,
clear entry points, lots of information

59. Dashboard

60. Dashboard

61. Dashboard

62. Palette / Canvas
offer a palette that can be floated, docked/undocked and a full
screen toggle

63. Palette / Canvas

64. Palette / Canvas

65. Search results

66. Search results

67. Search results

68. Refine data set

69. Refine data set

70. Refine data set

71. Question / Answer
- Use when there’s a lack of expertise
- Ask interview questions to get information.
- Ideal for when users want one/a few recommendations
instead of comprehensive search results

72. Question / Answer

73. Question / Answer

74. Question / Answer

75. Column browse
Use to navigate hierarchical or related data

76. Column browse

77. Spreadsheet
– Follow users’ mental model with standard table features:
 sort, hide/show columns
 rearrange columns
 group items by
 global undo/redo
 add/insert/delete rows or columns
 allow keyboard navigation
 import and export

78. Spreadsheet

79. Interactive model

80. Interactive model

81. Interactive model

82. Interactive model

83. Parallel Panels
– Stack one at a time or show all at once
(unstacked)
– Use to organize chunks of similar or
interdependent information
– Use stacks because want to retain single screen
experience
– Use when workflow is simple
– Use when end goal is highly visible

84. Parallel Panels

85. Wizard
Use for complex and infrequent task flows.

86. Wizard

87. Wizard

88. Wrap up
1. a hub and spoke model for app design
2. four basic elements of application design
3. three application type(s) our users need
4. fifteen basic screen layouts for *workflow*
5. six interaction design principles (for apps)

89. For more research-based insights,
check out the UX insights portal:
http://insights.redacted.com
Thoughts? Questions?

90. Master / detail

91. Master / detail

92. Question / Answer