Centerline Digital - UX vs UI - 050613

Download Centerline Digital - UX vs UI - 050613

Post on 09-May-2015

26.727 views

Category:

Design

2 download

Embed Size (px)

DESCRIPTION

Kate Williamson and Cait Vlastakis Smith UX Designers at Centerline Digital explore the differences between UX and UI. Good UX is the manifestation of deeply understanding people. Learn more at: http://www.centerline.net

TRANSCRIPT

<ul><li>1.Whats the difference?@caitvsmith | @kateawilliamsonvsUX UI</li></ul> <p>2. UX = USER EXPERIENCEUI = USER INTERFACEUSER EXPERIENCE = USER INTERFACE 3. UIA USER INTERFACE IS: A TOOL A POINT OF INTERACTION A MEANS OF COMMUNICATION BETWEEN PERSON AND SYSTEM 4. UXUSER EXPERIENCE: IS THE INTERACTION ITSELF INCLUDES INTERFACES ADDRESSES ALL ASPECTS OF A THING AS PERCEIVED BY A PERSON 5. CONTENTALL TOGETHER NOW...Images and concept modied from Ed Leas infographic at:http://design.org/blog/difference-between-ux-and-ui-subtleties-explained-cerealUSER INTERFACE USER EXPERIENCEWhat people are looking for. The tool that serves it up. Consumption. 6. Lets apply this to a website. 7. This is a button.Its one element of an interface.PRESS MEYou know you want to. 8. All these elements together on ascreen make up a UI.American Express Open Forum Website 9. Why is My Accountlocated here? Why are thesespecic topicshighlighted?Why is it important tohighlight social sharinghere?Why are these therelated key words?Why is somecontent hiddenbehind this menu?UX answers the Why?Why is there a Log In button?Why is it important to make Rewardsso prominent?Why do we assumereaders would alsolike this content? 10. Where do you nd theanswers to why? 11. UXPeople. Good UX is themanifestation of deeplyunderstanding people.Aka: Users 12. Adaptive Path Experience Map featured athttp://adaptivepath.com/ideas/the-anatomy-of-an-experience-mapWhat understanding peoplelooks like: 13. What do UX people do? 14. EXPLORATORY DEEP DIVESTHROUGH:What UXers Do Interviews Content/IA* Audits Analytics Analyses Usability Testing Competitive Analyses{And more...} Personas Messaging Frameworks Experience Maps Site Maps Sketches/Wireframes Storyboards{And more...}GUIDING SYNTHESIS DOCUMENTSFOR DESIGN, SUCH AS:The Outputs*IA = Information Architecture 15. Tuning Your UX Ear Were not sure what people want/need. All our content is a mess. We dont know which content resonates most. Its hard for people to nd what they need. People have a hard time using [ll in the blank]. Interviews/market research/surveys Content audit/restructured information architecture Analytics analysis Information architecture audit + restructuring Usability testing/re-designThese methods are good high-level starting points to further denethe problem. Using more than one discovery method in tandem willreveal a deeper understanding of the meaning behind your ndings.The depth of these methods will vary depending on needs.WHAT CLIENTS SAY: WHAT WE HEAR: 16. WHAT DO YOU WANTTO MAKE?WHAT DO YOU WANTTO ACHIEVE?UX requires reframing this question: 17. WHAT DOYOUWANT TOACHIEVE? Satised customers Engaged prospects Smarter, more relevant content Seamless usability Improved site engagement Social shares Word-of-mouth marketing Brand recognition Long-term customer relationshipsbuilt on mutual respect 18. THANK YOU!Connect here:Here:Here:And here, too:centerline.net@caitvsmith@kateawilliamson@centerline </p>