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.
Intro + Examples
Human Interface Principles
Platform Characteristics
UX Guidelines
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2015.
http://www.ivanomalavolta.com
A presentation given at the UX Futures Group. The goal was to expand on a popular meme decrying the tendency to reduce User Experience design to User Interface design and UI engineering.
A presentation given at Devcon 2013: an overview of common user search behaviors and how to design for them, including address to current user research (personas) and findings about how they use both mobile search and portal search applications
Intro + Examples
Human Interface Principles
Platform Characteristics
UX Guidelines
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2015.
http://www.ivanomalavolta.com
A presentation given at the UX Futures Group. The goal was to expand on a popular meme decrying the tendency to reduce User Experience design to User Interface design and UI engineering.
A presentation given at Devcon 2013: an overview of common user search behaviors and how to design for them, including address to current user research (personas) and findings about how they use both mobile search and portal search applications
Lead conversions: It's all in the detail pageKelley Howell
This presentation was designed to convey:
1. General research on the search user experience
2. Specific results from usability testing and competitive usability testing
3. Show product managers and designers which design patterns and solutions will help improve lead conversions and maintain a good user experience
A presentation prepared for business leaders at an organization where I was hired (on contract) to create a user experience lanaguage, upgrade the interaction design, and conduct usability and user research.
Coding qualitative data for non-researchersKelley Howell
We were pleasantly surprised by the success of a Net Promoter Survey. Thus, our good problem to have was: a lot more qualitative data to sift through than we expected. Our contingency plan was to gather product managers, interns, and analysts and teach them how to code (label) qualitative data. We did this by running two "war room" session. We grabbed our laptops and tackled the coding all together in two day-long sustained sessions.
SlideShare now has a player specifically designed for infographics. Upload your infographics now and see them take off! Need advice on creating infographics? This presentation includes tips for producing stand-out infographics. Read more about the new SlideShare infographics player here: http://wp.me/p24NNG-2ay
This infographic was designed by Column Five: http://columnfivemedia.com/
Haiku Deck For SlideShare Reviewers GuideHaiku Deck
SlideShare and Haiku Deck Team Up for Presentation Creation and Sharing -- Millions of Users Can Now Create Beautiful Visual Presentations Directly from SlideShare
No need to wonder how the best on SlideShare do it. The Masters of SlideShare provides storytelling, design, customization and promotion tips from 13 experts of the form. Learn what it takes to master this type of content marketing yourself.
10 Ways to Win at SlideShare SEO & Presentation OptimizationOneupweb
Thank you, SlideShare, for teaching us that PowerPoint presentations don't have to be a total bore. But in order to tap SlideShare's 60 million global users, you must optimize. Here are 10 quick tips to make your next presentation highly engaging, shareable and well worth the effort.
For more content marketing tips: http://www.oneupweb.com/blog/
Are you new to SlideShare? Are you looking to fine tune your channel plan? Are you using SlideShare but are looking for ways to enhance what you're doing? How can you use SlideShare for content marketing tactics such as lead generation, calls-to-action to other pieces of your content, or thought leadership? Read more from the CMI team in their latest SlideShare presentation on SlideShare.
How to Make Awesome SlideShares: Tips & TricksSlideShare
Turbocharge your online presence with SlideShare. We provide the best tips and tricks for succeeding on SlideShare. Get ideas for what to upload, tips for designing your deck and more.
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2015.
http://www.ivanomalavolta.com
User-Centered Design
The Elements of User Experience
Navigation Model
Wireframes
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2014.
http://www.ivanomalavolta.com
The Elements of User Experience
Navigation Model
Wireframes
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2015.
http://www.ivanomalavolta.com
First users: Heuristics for designer/developer collaborationJonathan Abbett
From the University of Illinois Web Conference 2013.
Ask a web designer who his “first users” are, and he’ll probably name early adopters, stakeholders, or usability testers. Designers rarely consider their actual first users: the web developers they work with to build their designs. Over the last year, I’ve performed an informal user research project where the “users” were software development teams of all shapes and sizes. Drawing on these discussions and my background as a former web developer, I’ve created a set of friendly heuristics (in the tradition of Jakob Nielsen and Louis Rosenfeld) that designers can use to make their design materials far more useful for developers. I’ll show how these heuristics will encourage holistic solutions rather than piecemeal design work, surface critical implementation issues sooner, and establish a stronger basis for designer/developer collaboration.
The whole point of a good GUI (Graphical User Interface) is being able to understand what is going on without reading every single detail. That is why we prefer big red crosses to say "Don't do that you oaf!" instead of a line of text that says "I think you may want to reconsider your options."
Lead conversions: It's all in the detail pageKelley Howell
This presentation was designed to convey:
1. General research on the search user experience
2. Specific results from usability testing and competitive usability testing
3. Show product managers and designers which design patterns and solutions will help improve lead conversions and maintain a good user experience
A presentation prepared for business leaders at an organization where I was hired (on contract) to create a user experience lanaguage, upgrade the interaction design, and conduct usability and user research.
Coding qualitative data for non-researchersKelley Howell
We were pleasantly surprised by the success of a Net Promoter Survey. Thus, our good problem to have was: a lot more qualitative data to sift through than we expected. Our contingency plan was to gather product managers, interns, and analysts and teach them how to code (label) qualitative data. We did this by running two "war room" session. We grabbed our laptops and tackled the coding all together in two day-long sustained sessions.
SlideShare now has a player specifically designed for infographics. Upload your infographics now and see them take off! Need advice on creating infographics? This presentation includes tips for producing stand-out infographics. Read more about the new SlideShare infographics player here: http://wp.me/p24NNG-2ay
This infographic was designed by Column Five: http://columnfivemedia.com/
Haiku Deck For SlideShare Reviewers GuideHaiku Deck
SlideShare and Haiku Deck Team Up for Presentation Creation and Sharing -- Millions of Users Can Now Create Beautiful Visual Presentations Directly from SlideShare
No need to wonder how the best on SlideShare do it. The Masters of SlideShare provides storytelling, design, customization and promotion tips from 13 experts of the form. Learn what it takes to master this type of content marketing yourself.
10 Ways to Win at SlideShare SEO & Presentation OptimizationOneupweb
Thank you, SlideShare, for teaching us that PowerPoint presentations don't have to be a total bore. But in order to tap SlideShare's 60 million global users, you must optimize. Here are 10 quick tips to make your next presentation highly engaging, shareable and well worth the effort.
For more content marketing tips: http://www.oneupweb.com/blog/
Are you new to SlideShare? Are you looking to fine tune your channel plan? Are you using SlideShare but are looking for ways to enhance what you're doing? How can you use SlideShare for content marketing tactics such as lead generation, calls-to-action to other pieces of your content, or thought leadership? Read more from the CMI team in their latest SlideShare presentation on SlideShare.
How to Make Awesome SlideShares: Tips & TricksSlideShare
Turbocharge your online presence with SlideShare. We provide the best tips and tricks for succeeding on SlideShare. Get ideas for what to upload, tips for designing your deck and more.
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2015.
http://www.ivanomalavolta.com
User-Centered Design
The Elements of User Experience
Navigation Model
Wireframes
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2014.
http://www.ivanomalavolta.com
The Elements of User Experience
Navigation Model
Wireframes
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2015.
http://www.ivanomalavolta.com
First users: Heuristics for designer/developer collaborationJonathan Abbett
From the University of Illinois Web Conference 2013.
Ask a web designer who his “first users” are, and he’ll probably name early adopters, stakeholders, or usability testers. Designers rarely consider their actual first users: the web developers they work with to build their designs. Over the last year, I’ve performed an informal user research project where the “users” were software development teams of all shapes and sizes. Drawing on these discussions and my background as a former web developer, I’ve created a set of friendly heuristics (in the tradition of Jakob Nielsen and Louis Rosenfeld) that designers can use to make their design materials far more useful for developers. I’ll show how these heuristics will encourage holistic solutions rather than piecemeal design work, surface critical implementation issues sooner, and establish a stronger basis for designer/developer collaboration.
The whole point of a good GUI (Graphical User Interface) is being able to understand what is going on without reading every single detail. That is why we prefer big red crosses to say "Don't do that you oaf!" instead of a line of text that says "I think you may want to reconsider your options."
Navigation
Forms
Search, sort & filter
Tools
Invitations
Feedback & Affordance
Anti-Patterns
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2014.
http://www.ivanomalavolta.com
Interface design is not something that belongs solely in the world of Apple. Your website and applications can all benefit greatly from an understanding of how your users might navigate your product.
Presented At the Sydney NETUG on August 18th by Adam Cogan
Usability and Accessibility Have a Conversation: How Accessibility and UI/UX ...3Play Media
Starting with Jesse James Garrett's model of User Experience, this webinar will examine where accessibility and usability dovetail in areas such as user research, information architecture, persona, wireframes, visual design, and user testing. By understanding more about each other, we may better navigate each other's challenges and solve each other's problems more effectively.
Web UI Design Patterns and best-practices guide from http://www.uxpin.com -- the best online wireframing, UX & product management suite available anywhere.
As part of a series of bi-weekly training on UX design and architecture, I presented a three part series on application design frameworks and best practices for interaction design patterns for desktop and mobile
Working Together: the UX role in a Scaled Agile FrameworkKelley Howell
Working together is supposed to be made much easier in an Agile environment. Indeed, collaborating well is the whole point of moving to an Agile framework. It works great on small teams, but how does it work when you have large teams and very complex products, where many interdependent teams, products, and systems have to coordinate? We use Scaled Agile Framework, or SAFE. This is one way the UX practitioner will be working with the team.
User Story Mapping for Minimum Lovable ProductsKelley Howell
I gave this presentation at the UX Agile Summit, 2017.
If you have ever sat there staring at your screen or a white board, wondering where to start. If you've ever wondered how you could possibly organize all these user stories into some kind of well-organized plan for iteratively releasing your product, this talk is for you!
In this talk, I will share a way you can generate user stories, organize your backlog, and plan out releases in a way that will ensure that the product is not just minimally viable, but minamally lovable.
Understanding Users: Using metrics and surveys to understand our consumersKelley Howell
To help business analysts and product managers understand how to interpret quantitative data, I put together a two part presentation to help them understand UX and Product Metrics: lead counts, unique visitors, lead conversion rates, and more
Understanding the Search User Experience @Kelley Howell
To help our graphic designers, product managers, and business analysts solve user problems and better understand our users, I created a series of trainings and workshops. The goal was to communicate the findings of user and usability research to the team.
In 2007, I helped found the UX Future Group, a user group internal to my organization. It was inspired by the work of people like Cynndd Bowls in Undercover UX. The idea was to evangelize for the adoption of UX methods and strategies in the organization. A user group was one way to do that by showing ground-up support for more user research, usability testing, and user centered design practices.
The user group primarily catered to visual designers, product managers, and UI engineers since there was no formal UX role at the company. This was a presentation about the results of a survey I conducted about the UX training and development needs our teams were looking for.
This is an older presentation given in 2009. The goal was to advocate for the adoption of microformats to improve markup, SEO positioning, and modularize web development. The talk was first given at local user groups: Refresh Hampton Roads and the Web Usability and Standards User Group. Later, I gave the workshop to an internal audience: the UI Engineering team and, later, to a UI/UX Future Group
I presented a series of workshops on Object Oriented CSS for two local user groups, Refresh Hampton Roads and Web Usability and Standards User Group. I later adapted the presentation for internal use, using it to evangelize for the adoption of OOCSS across the organization.
The presentation is used to introduce product design and development teams to user story mapping, personas, and scenarios. The technique draws on the work of Jaff Patton who integrates elements of user centered design, agile user stories, backlog management, and product management.
Designing for Mobile: UX for designers and developersKelley Howell
During 2010, I was tapped to create the first mobile web experience for five different sister organizations, part of a larger conglomerate. After doing so, I shared what I'd learned about UX research and UX design for mobile devices.
Unleash Your Inner Demon with the "Let's Summon Demons" T-Shirt. Calling all fans of dark humor and edgy fashion! The "Let's Summon Demons" t-shirt is a unique way to express yourself and turn heads.
https://dribbble.com/shots/24253051-Let-s-Summon-Demons-Shirt
Can AI do good? at 'offtheCanvas' India HCI preludeAlan Dix
Invited talk at 'offtheCanvas' IndiaHCI prelude, 29th June 2024.
https://www.alandix.com/academic/talks/offtheCanvas-IndiaHCI2024/
The world is being changed fundamentally by AI and we are constantly faced with newspaper headlines about its harmful effects. However, there is also the potential to both ameliorate theses harms and use the new abilities of AI to transform society for the good. Can you make the difference?
7 Alternatives to Bullet Points in PowerPointAlvis Oh
So you tried all the ways to beautify your bullet points on your pitch deck but it just got way uglier. These points are supposed to be memorable and leave a lasting impression on your audience. With these tips, you'll no longer have to spend so much time thinking how you should present your pointers.
Expert Accessory Dwelling Unit (ADU) Drafting ServicesResDraft
Whether you’re looking to create a guest house, a rental unit, or a private retreat, our experienced team will design a space that complements your existing home and maximizes your investment. We provide personalized, comprehensive expert accessory dwelling unit (ADU)drafting solutions tailored to your needs, ensuring a seamless process from concept to completion.
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.)
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
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
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
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
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
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
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
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
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
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
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
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
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?