1. 2014 Industry Implementation Trends
User Experience
2014 Industry Implementation Trends
UX Guy - Mark Swaine
Web:
Behance:

2. What is (UX) User Experience?
“User experience is the net sum of every interaction
a person has with an organization, be it marketing material, a customer service call, or the product or service itself. A user’s impressions are shaped by an organizations beliefs and practices as much as by the purpose and the value it’s products hold in his or her life”.
Robert Hoekman Jnr

3. State of Industry

4. Client Education & Acceptance (is Key)
Speed of Industry
Emphasis on User
Internet of Things
Brand Context
Unlimited Options
Time
Apocalypse
Ongoing Work /
Maintenance

5. Client Education & Acceptance (is Key)
Needs to be acceptance of time and budget
Industry is moving too fast for clients to maintain best practice knowledge
New work produced will constantly need maintenance, ownership, updates, new features and technical support.
Clients need to be much more tentative to industry pace and their brand context.
Clients need to be accepting of pace of industry and technological change for implementation of their brand.

6. Client Education & Acceptance (is Key)
Clients need to be more understanding of labor intensive industry – (man hours, time, cost, constant technical issues, discovery, maintenance, testing, iteration, code updates, mobile agnostics etc.) – it is ongoing and always will be.
If a client asks to come down in price on small or large projects – walk away – (client has no respect or understanding for the industry, your time, hard work, technical time consuming issues and expertise required)

7. UX Implementation Trends

8. Lean – Agile - Iteration
“Create a prototype, then use it as a user would.
You’ll see what’s missing. You’ll see what’s wrong.
Repeat.”
Robert Hoekman Jnr

9. Deliverables, Requirements, Assumptions, Hypothesis…
The client may have set deliverables, requirements and outcomes to work from…
You may need to start with assumptions about the product / project – (what you believe to be true)
Lean Approach - create & validate Hypothesis - including, experimental assumptions, outcomes, personas and product features.
Test and learn what creates
Value…

10. Participatory Sketching
Opportunity to collaborate with key project stakeholders
Explore, Create & Invent
Identify, create and prove key use cases
Identify Pain Points
Help Build the Brief with Client
Research & Analysis

11. Rapid Prototyping Low Fidelity Prototypes – Paper / Sort Cards
Create Rapid Interactive Wireframe Prototypes
Iterate and develop in Lean Agile Mode
Receive and monitor real time feedback from key user demographics

12. Discovery
We don’t know in any meaningful way whether a product feature is effective until it is in the marketplace.
Engage the customer during the ux, design and development process.
Find out what the users are doing with your product and why?
The most difficult answers about your product will be answered by customers in the marketplace.

13. Identifying Contextual Differentiators
Smartphone
Tablet
Desktop
Action / Task Oriented
Agnostic Paradigms
Context of Content
Simplified Navigation
What the user wants.
Key User Tasks
Agnostic Paradigms
Context of Content
Tablet = Browsing / Couch Commerce
Site speed, CSS, Retina Images and Resolutions
Key User Tasks
Context of Content
Calls to Action
Content Scale and Stack

14. Kill Documentation (time waste)
Time wasting on documentation creation
Prototype instead – more beneficial
Learn more by prototyping the user experience

15. Test & Iterate Quickly
“You can Achieve a big vision – but in small increments.
It requires a commitment to iteration”
Eric Ries

16. The User

17. What is (UX) User Experience Design?
“User experience design as a discipline is concerned with all the elements that together make up that interface, including layout, visual design, text, brand, sound and interaction. It works to coordinate these elements to allow for the best possible interaction by users”.
Don Norman

18. (UX) Key Questions Why is the product being made?
Who is it being made for?
What are the stakeholders goals for the project?
How do the requirements fit within the wider business objectives of the organization?
Who are the competitors?
How is success going to be measured?

19. Know Thy User Users can be, ‘Experienced’, ‘Expert’, ‘Novice’
or ‘Power Users’
The more fluid and responsive the experience is
the more emotionally, invested users will become
Ask only for limited input from users
Users are not stupid
Create emotional connections
Users want novelty

20. Know Thy User Build healthy long-term relationships with users
User’s will ask why doesn't my brand / site / app know me?
Build users trust incrementally and look for soft commitments along the way
Reduce input forms, user fatigue
Hide technology from the user

21. Simplicity Make it feel snappier – always go back to engineering
Reduce chances for users to make mistakes
Stop making people passengers and more partners of the user experience
Stop commanding users what to do
Reduce everything thoughtfully

22. Tell a Story - User Research
Contextual research
In-depth interviews
Social analytics
Online interviews
Analytics / tracking
Street interviews
Usability Review
Competitor Analysis
Visual Style
Focus Groups
Talk to Existing Users
On Location
Third Party Studies
Use Eye Tracking Labs

23. Create Personas User Background:
Age range, native language, physical and or cognitive limitations
Experience:
How familiar are your users with similar systems? Will they need to learn?
Behavior:
What motivates users. Do they share any behavioral traits?
Desires and Concerns:
What do they want to achieve, what concerns do they have?

24. Focus on Outcomes Not Deliverables
Real people use your products and services, real people with different wants, needs, abilities, environments and a million other possible variables that need to be factored in… “Businesses cannot treat their customers as passive consumers any longer, every company is in the user experience business” “If you take the time to understand how people think, then design solutions around their true needs and behavior – your design will be far more likely to perform better with them.”

25. “Users will never forget how you made them feel”
Remember
“Users will never forget how you made them feel”
Maya Angelou

26. Design

27. “Design without constraints is decoration”.
Robert Hoekman Jnr

28. Design Trends – Flat UI Design
No drop shadows, bevels, gradients and no depth
Every element is clean, crisp including buttons
and navigation menus
Flat interfaces are easy for users to understand
and interact with
Use simple interface elements such as icons
Simple, easy to click and tap
Simple shapes – rectangle and circles
Use of bold simple Colors
Color of the Year in Web
Pantone Emerald

29. Design Trends – Flat Design – Color Palette
flatuicolors.com

30. Typography Considerations
Look and Feel of type used should suit the overall tone and message
Use simple font pairings
Flat design uses no more than two font pairings (novelty font for headings)
Use sharp, crisp, bold clear typefaces
San Serif Typefaces are typically used in flat design
Flat design focuses on simplicity – so should your text (content)
Reduce use of drop shadows, gradients – strong color contrast, (black & white)
Give type / paragraphs plenty of room to breathe – lots of white space
Good starting place – Google Fonts:

31. Flat UI Design
Flat UI Design Trends

32. Flat UI Design
Flat UI Design Trends

33. Square: http://www.square.com
Flat UI Website Design
Square:

34. United Pixel Workers: http://www.unitedpixelworkers.com/
Flat UI Website Design
United Pixel Workers:

35. Get Cellar App: http://www.getcellarapp.com/
Flat UI Website Design
Get Cellar App:

36. Mobile First

37. Mobile First (Project Depending)
No longer an afterthought
Prepares brand thinking for the explosive growth in mobile apocalypse
Forces brand focus and prioritization – under mobile constraints
Allows for new and innovative brand experiences built on capabilities and paradigms of devices
Start with presumptions of connectivity, context interaction, and location

38. Mobile First (Project Depending)
“The simple guideline is whatever you are doing – do Mobile First”
Eric Schmidt,
“We’re just now starting to get into Mobile first. What we are finding is that the designers on mobile are really embracing the constraints and that it is actually teaching us a lot about how to design back to the desktop”
Kate Aronowitz, Facebook Director of Design,

39. Responsive Design (RWD)

40. Responsive Design Is responsive design needed? Still in it’s infancy
Content Dictates
It is ‘Future Friendly’
More Time = More Cost
Can be content Managed Across All Devices
Use Best Practice in HTML5 & CSS3 Media Queries
Many frameworks, templates and solutions…

41. Responsive Design
Not always applicable to use – learn and know your context, content and mobile considerations first.
Be conscious of user connectivity capabilities – when
using heavy content, retina images, video.
Test, iterate and test again - take into account of site speed load times in low connectivity
Be concisions of agnostic paradigms for different hardware and OS’s.

42. Responsive Design (Sample 1)
boldandnoble.com

43. Responsive Design (Sample 1)
boldandnoble.com

44. Responsive Design (Sample 2)
skinnyties.com

45. Responsive Design (Sample 2)
skinnyties.com

46. Responsive Design (Mobile Samples)
thisiszone.com
starbucks.com
cibc.com

47. Tool Trends

48. Tools Worth Looking At…
Traditional
Paper and Pen
Post it Notes
UI Stencils (uistencils.com)
Desktop
Sketch App
Balsamiq
Visio
Omnigraffle
Axure
Just in Mind
Easel
Divshot
Briefs
Skeleton (HTML Prototyping)
Mind Node
Proto.io
UXPin
App Sketcher (HTML Prototyping)
Adobe Brackets (Coding)
Mobile
Pop
App Cooker
Blueprint
Interface HD
Adobe Proto
iMockups
SketchyPad
Livewires
Launch
Briefscase

49. Summary

50. Summary
We need to figure out what we’re making before we start production
Collaborate more with Key Stakeholders (The Client)
Work as collaborative product teams – daily engagement
Agile workflows - continuous development, continuous deployment, continuous integration and continuous iteration.
Release early and often – receive market feedback
All that matters is the quality of the product, as measured by the market’s
reaction to it.

51. Glossary

52. Glossary User Experience Design (UXd) How the user thinks and feels
Information Architecture (IA)
How the system is organized
User Interface Design (UI)
How the content is organized
Interaction Design (IX)
How the user and device act and react
Responsive Website Design (RWD)
Optimal fluid grid based website design that will flow and stack on any screen size / resolution / device.
Adaptive Website Design (AWD)
Web design to scale to predetermined set of screens and devices.
Customer Experience (CX)

53. But wait… there’s more! But wait... there's more!
Next week Wednesday we'll be hosting the Seasoned Course in the Whole Connector room.
And if you happen to be in the Detroit area in June, check out the UX Thursday Detroit we're sponsoring.
Led by UIE's own Jared Spool, UX Thursday is six presentations from local superstars and keynotes from two leading UX experts. Learn what you can do to make the world better one iteration at a time.
Visit uxthursday.com for more info

54. 2014 Industry Implementation Trends
User Experience
2014 Industry Implementation Trends
UX Guy - Mark Swaine
Web:
Behance: