The document outlines a presentation on UI/UX design patterns specifically for emergent learning technologies, led by experts Chad Udell and Evan Scronce. It discusses the significance of design patterns, their applications in both UI and UX, and highlights various emergent technologies such as AI, VR, and IoT. Additionally, it explores how these technologies can influence design approaches to enhance user interaction and experience.

1. FR106 - UI/UX Design Patterns for Emergent Learning
Technologies
Fri, Jan 26 | 8:30 AM - 9:30 AM | LL20A
Chad Udell
Managing Partner
Evan Scronce
Director of Experience

2. ● Managing Partner at Float
● Faculty for over 10 years at Bradley University in
Interactive Media
● Awarded eLearning Guild Guild Master,
recognition for contributions to the industry
● Author of Learning Everywhere: How Mobile
Content Strategies are Transforming Training
● Editor and Author of Mastering Mobile Learning:
Tips and Techniques for Success - Chad Udell
and Gary Woodil, Dr. Ed.D. (contributing authors
from the Float team)
● Director of Experience Design at Float
● Faculty at General Assembly in Chicago where I
teach Design Thinking
● I specialized in Experience Design. I’ve designed
for some of the most influential companies such
as Google, Ford, Motorola and American Express
● Designed experiences for ergonomic
environments, customer ecosystems, AR, VR,
and mobile apps
Introductions
Chad Evan
2

3. What are
Emergent
Technologies?
Some clarifications
Something that is new?
Yes, of course.
More Importantly...
Something that is
changing the way that
previous things got done
3

4. Establishing
Emergence
Who’s tracking this stuff
anyway?
● Government funded research
programs (SBIR, STTR)
● University conferences and
symposiums
● Granting and Charity organizations
● Futurists
● Wired and other publications like
the The Verge, Vox, Gizmodo,
ARS Technica
● Gartner Hypecycle
4

5. 5

6. What are
Design
Patterns?
Think of them as recipes
● re-usable form of a solution to a design
problem
● first used in architecture by Christopher
Alexander
● used consciously and subconsciously
everywhere
● an excellent tool for acclimating yourself in
a new discipline
● respects and embraces the context
● easily shared and learned
6

7. What’s in a pattern?
Both UI and UX can be present in a design pattern.
Some examples from architecture:
● centralized entrance vs independent doors for each office from the street
● open stairs in a vestibule vs stairs at ends of halls
● lightweight concrete as a material
● a street cafe in urban planning
● wide sidewalks vs. narrow or none
● roundabouts
● push vs. pull doors
A Pattern Language / https://www.patternlanguage.com/
7

8. Let’s talk about patterns.
Both UI and UX can be present in a design pattern.
Open Discussions on Design Patterns
● What is a pattern you encounter often?
● What are the details of it?
● How does it help you interact with the item in question?
● What happens when the pattern is ignored or an “anti-pattern” is used?
Startup Vitamins / https://www.startupvitamins.com
8

9. What’s in a pattern?
Both UI and UX can be present in a design
pattern. Patterns can be purely visual or
simple tactile gestures such as the “pull”
image to the right.
Some examples from software:
● pull to refresh
● camera interfaces
● tab navigators
● search
● lists and tables
● pagination
● hamburger menu
Interactive Labs / https://dribbble.com/ 9

10. Stylized design patterns
The UX & UI can be romanticized to “better”
the affordances mobile has matured into.
Some examples:
1. Menus
2. Refresh
3. Sub-Menus
4. Actions
5. Search
6. Utility
10cloud / https://dribbble.com/
10

11. Familiarity & Affordance
As humans we use semantic and episodic memory. As
designers we trigger these memories/facts to enable
our designs to be successful.
We do this with:
● User Interface Design Patterns are used to
choose the right input type, form validation
method or navigation component.
11

12. Persuasive Design
Patterns
Using simple psychology in the UI to persuade users
to do something we want them to.
Examples:
● Notification bubbles (Top image) This create
urgency and annoys the user enough they feel
they must click on it
● Big beautiful images of something you cannot
get. (Bottom image). Did you notice the sold
sign?
Soho bike / https://dribbble.com/
12

13. More Persuasive
Design Patterns
The largest retailers try these patterns too. They work.
Examples:
● Scarcity (Amazon) showing there are only 4
left in stock
● Framing (Internet company) they highlight the
most profitable plan – in hopes users select
the product the company favors.
Virgil Pana / https://dribbble.com/
13

14. Ease of use.
We always hear “make this easy to use”. What does
ease of use mean?
● It’s when you use design elements that are
familiar, natural and repeated across the entire
site or product.
Focus Lab / https://dribbble.com/
14

15. Placement
Placement of consistent elements is an important part
for successful patterns.
● Action buttons always in the same place
● A way to get Help
● Contact
● Navigation
● Visuals & Animation
15

16. 16

17. Emergent
Technologies
Things starting to make waves...
1. 3D printing and scanning
2. Affective computing
3. Artificial Intelligence and Machine Learning
4. Augmented and Virtual Reality
5. Big Data and Analytics
6. Blockchain
7. Haptics
8. Internet of Things
9. Location-based computing
10. Personalization
11. Robotics
12. Wearable and Embodied computing
17

18. Emergent
Technologies
Things starting to make waves...
1. 3D printing and scanning
2. Affective computing
3. Artificial Intelligence and Machine
Learning
4. Augmented and Virtual Reality
5. Big Data and Analytics
6. Blockchain
7. Haptics
8. Internet of Things
9. Location-based computing
10. Personalization
11. Robotics
12. Wearable and Embodied computing
18

19. AI/Bots
Some patterns to consider.
1. Human language
2. Personality
3. Discovery
4. Ambience
Isil Uzum / https://dribbble.com/
19

20. Some patterns to consider.
1. Reduction of friction
2. Holochess
3. Tricorder
4. X-Ray vision
5. Heads Up Display
Ramotion / https://dribbble.com
AR
Ramotion / https://dribbble.com/
20

21. Heads-Up Display
Source:
Inside Out: Interaction Design for Augmented Reality
by Joe Lamantia
http://www.uxmatters.com/mt/archives/2009/08/inside-out-interaction-design-for-augmented-reality.php
Video:
https://www.youtube.com/watch?v=Jk8MxgjnkDM 21

22. Tricorder
Source:
Inside Out: Interaction Design for Augmented Reality
by Joe Lamantia
http://www.uxmatters.com/mt/archives/2009/08/inside-out-interaction-design-for-augmented-reality.php
Video:
https://www.youtube.com/watch?v=VGtCQWROytw
Star Trek © 2018 CBS Studios
22

23. Holochess
Source:
Inside Out: Interaction Design for Augmented Reality
by Joe Lamantia
http://www.uxmatters.com/mt/archives/2009/08/inside-out-interaction-design-for-augmented-reality.php
Video:
https://www.youtube.com/watch?v=GnecDFgW8YM
Star Wars TM & © Lucasfilm Ltd. All Rights Reserved
23

24. X-Ray Vision
Source:
Inside Out: Interaction Design for Augmented Reality
by Joe Lamantia
http://www.uxmatters.com/mt/archives/2009/08/inside-out-interaction-design-for-augmented-reality.php
Video:
https://www.youtube.com/watch?v=YoNfq-eIX_0
Superman © 2018 DC Comics 24

25. VR
Some patterns to consider.
1. Immersion
2. Fantasy vs. Reality
3. Ultra-realism vs. Non-realism
4. Active participant or observer
25
VR

26. Immersion
Vs.
Google Cardboard HTC Vive Pro
26

27. Fantasy vs. Realism
Vs.
https://vrscout.com/projects/i-almost-believed-i-could-fly-at-vrla/ https://www.vrroom.buzz/vr-news/trends/construction-operator-training-vr
27

28. Ultra-realism vs. Non-realism
Vs.
https://www.youtube.com/watch?v=J9in7wFqf0E https://www.youtube.com/watch?tv=kVL9yKwx_aY
https://www.loading-human.com/unrealistic-elements-keep-players-grounded-vr-gaming-experience/
28

29. Passive Observer vs. Active Participant
Vs.
https://www.youtube.com/watch?v=rlXK6oW8AwI https://www.youtube.com/watch?v=y26yB5V8rxE
29

30. IoT
Some patterns to consider.
1. Point of View
2. Security
3. Integration
4. Connectivity
Ramotion / https://dribbble.com
30

31. 1. Point of View
2. Security
3. Integration
4. Connectivity
Ramotion / https://dribbble.com
31

32. IoT
Some patterns to consider.
1. Point of View
2. Security
3. Integration
4. Connectivity
Ramotion / https://dribbble.com
32

33. IoT
Some patterns to consider.
1. Point of View
2. Security
3. Integration
4. Connectivity
Ramotion / https://dribbble.com
33

34. IoT
Some patterns to consider.
1. Points of View
2. Security
3. Integration
4. Connectivity
Fordpass / https://www.fordpass.com
34

35. @visualrinse - @gowithfloat - @designdiversi
35
In Closing - Q&A/Discussion
gowithfloat.com