1. 2014 Industry Design Implementation Trends UX Guy - Mark Swaine Twitter: @UX_UI_Guy Behance: behance.net/markswaine Linkedin: ca.linkedin.com/in/markswaine Web: www.uxguy.com Mobile & Web Design

2. User Experience Design “No matter how perfect your design, users will find its flaws. No matter how thorough your plan, users will do what you did not intend. Expect this.” Robert Hoekman Jnr

3. Education

4. Education, education, education OS & device fragmentation Think about screen input ask User behaviours are constantly in motion HTML 5 / Responsive frameworks Site speed, networks and user frustrations

5. Keep updated on Android, iOS & Windows 8 OS & Device Fragmentation – Many Devices & OS versions in use Agnostic Paradigms: Different Interface layouts Hardware input paradigms Design guidelines Think about screen resolutions Battery Life How the app / site performs Heavy image, animation and code Older devices have poor battery life

6. Design Inspiration Look for inspiration from real world working apps and websites Try not to reference Behance or Dribble platforms – misleading Look at sites like, fwa, ui parade, awwwards, themeforest, grid assault, webdesigninspiration, pixelden, siteinspire, mobilepatterns, inspired ui, smashingmagazine, pttrns

7. More current trends…

8. Lean UX “A user’s desire is not to stay on your website, it is to leave your website. Design for that.” Robert Hoekman Jnr

9. Trends for consideration Flat UI Design will grow Scrolling - (storytelling) Micro UX effects – (transitions, rollover effects, nav) Making the most of one page websites Bigger imagery and video (desktop) Storytelling – (most sites disjointed, IA)

10. Trends for consideration Reducing user typing / input (forms) Users will expect mobile to be better than desktop Users appreciate a little magic (microinteractions) Use of sound – when completing tasks, comforting for users

11. Trends for consideration Kill the carousel Every website has one Users tend to gloss over Don’t understand the interaction Make navigation obvious Content contextual – mostly rubbish

12. Storytelling the brand experience http://www.gmc.com/incrediblethinking/

13. Sound Wearbales will have major influence on micro interaction patterns in the future - glass, smartwatches, bracelets... Will drive quicker interactions and snappier experiences Potential to become annoying to users and the public

14. UX Mobile Gestures

15. Lean UX “The less the user must do, the more you both gain.” Robert Hoekman Jnr

16. Up to 49% of people use ‘One thumb’ to complete all tasks 36% use two hands (index finger) 15% use two thumbs Stephen Hoober Common Gestures – Patterns & Trends

17. One Thumb Access is important Think about how to design apps and mobile experiences using one thumb where possible Rethink your design always for the realities of mobile use Always consider touch target sizes, spacing and allow for fat fingers Luke Wroblewski Common Gestures – Patterns & Trends

18. Stop making gestures invisible – make hidden gestures known – (incrementally) 4 most common gesturers used and understood: Scrolling – (familiar to desktop) Swipe – (images, menus) Tap – (not like desktop) Pinch / Zoom – (People need to zoom in on mobile sites)

19. Common Gestures – Patterns & Trends Mobile gestures can sometimes be difficult to remember and hard for users to complete tasks if not guided i.e. 1. Swipe left to delete 2. Tap the + button to add an item 3. Tap and hold to re-order Coach marks don’t work – users skip through them – educate them incrementally

20. Iconography

21. Icons can can have double meaning Too many are not used consistently - between sites & apps Most common understood icons, ‘play’ & ‘close (x)’ Be careful… Use icons that are consistent with other sites and apps Use contextually

22. Hamburgers… Still not understood universally Some users think it to be part of the design Sometimes stumbled upon and used accidentally Can be perceived as dragable, list icon, text row, not always navigation… A/B Test

23. Stephen Hoober Test…

24. Details are in the Design

25. Can force designers to think more about the details within the ‘look and feel’ Keep them within context of use Going the extra length with design detail can make you love an app or site It can create stickiness, delight and some emotional attachment to the site or app

26. Details are in the Design Set tone – when opening or closing an app or site Enrich the experience with subtle animation, transition, sound or functionality that surround the bigger key features of the product They can be come part of the overall branding and sometimes more the most remembered part of the experience...

27. WWF Together iPad App

30. Lean UX

31. “At Neo, we define a vision for the product: what problem are we trying to solve; how will we define success? We iterate from initial concepts towards a final state, based on rapid feedback cycles with our target audience our design aesthetic and brand values” Jeff Gothelf

32. Lean UX “Lean UX is the practice of bringing the true nature of a product to light faster, in a collaborative, cross functional way that reduces the emphasis on thorough documentation while increasing the focus on building a shared understanding of the actual product experience being designed.” Jeff Gothelf

33. (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?

34. Build quickly, learn quickly… Generate solutions quickly Team colloaboration Build and discover quicker with fast iterations Find out what is wrong with the intiial product designs as quickly as possible Adjust the UX MVP’s and test again

35. Hypothesis Statement Declare Assumptions What the team believes to be true Hypothesis Descriptions of assumptions of product for expirementation Outcomes Feedback to validate or invalidate the hypothesis Personas Models of the key demographic types Features What will drive outcomes (business goals) Jeff Gothelf

36. Business Assumptions Worksheet I believe my customers have a need to... These needs can be solved with... My intial customers are... I will make money by... My biggest product risk is... What features are important... Jeff Gothelf Lean UX - Book

37. Lean UX “The answers to most difficult questions the team will face will not be answered in a conference room. Instead, they will be answered by customers in the field.” Jeff Gothelf

38. Cross Functional Team Engineering Product Management Interaction Design (Ixd) Visual Design Content Strategy Marketing QA

39. Rapid Prototyping Low fidelity: Paper, sticky jots, wireframes, clickable wireframes Mid & High fidelity: Test designs with levels of interaction, visuals and content, forms, use of real data - similar to final product. Simulate and validate the most important product features and business goals (outcomes) Show stakeholders progress (Demo Day)

40. MVP - Build, measure, learn… Minimize effort into MVP proven ideas The business goals of the product will achieve the desired outcomes Test Hypothesis - Build MVP’s and validate proposed solutions

41. MVP - Build, measure, learn… Collect what you learn from the MVP and iterate / evolve the solution Removal of features (waste) that don’t help achieve the business goals Show to stakeholders, customers and potential customers

42. Lean UX “All that matters is the quality of the product, as measured by the markets reaction to it.” Jeff Gothelf

43. Tools

44. Tools Worth Looking At… Traditional Paper and Pen Post it Notes UI Stencils (uistencils.com) Mobile Pop App Cooker Blueprint Interface HD Adobe Proto iMockups SketchyPad Livewires Launch Briefscase 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)

45. Books

46. Books… http://www.peachpit.com/ https://rosenfeldmedia.com/books/ http://www.fivesimplesteps.com/ http://www.abookapart.com/ http://www.smashingmagazine.com/books/ http://www.nngroup.com/books/mobile-usability/

47. What’s on my shelf…

48. Glossary

49. 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

50. 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

51. 2014 Industry Design Implementation Trends UX Guy - Mark Swaine Twitter: @UX_UI_Guy Behance: behance.net/markswaine Linkedin: ca.linkedin.com/in/markswaine Web: www.uxguy.com Mobile & Web Design