Beyond pixels, screens and best practices designing with ux in mind

  • Published on
    16-Apr-2017

  • View
    811

  • Download
    0

Transcript

<ul><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>15 APR 2016</p><p>Presented By:</p><p>Carlo Victoriano</p><p>Beyond Pixels, Screens and Best PracticesDesigning with UX in mind</p><p>1</p><p>No. of Pages:134</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>What well cover </p><p>1. The UX we know </p><p>2. Impact of UX </p><p>3. UX Challenges we face</p><p>4. Designing with UX in mind</p><p>5. Recap</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>The UX we know</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>Definition:</p><p>User Experience Design (UXD) is the process of enhancing customer satisfaction and loyalty by improving usability, ease of use, and pleasure provided in the interaction between the customer and the product.</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>In a nutshell,capture the hearts and </p><p>minds of our users</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p> Keeps them glued to your siteUX SEO Leads users to your site</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>UX Design is.Organising Content</p><p>UX Design is arranging content and designing information architecture using card sorting</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>UX Design is. Identifying Touch Points</p><p>UX Design is creating the customer journey map and identifying touch points</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>UX Design is.Sketching Layouts</p><p>Low-fidelity wireframes to perform iterations on usability </p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>UX Design is.Simulating User Flow</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>The Good, the Bad and the Ugly</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>THE GOODUXEasy to likeEasy to understandEasy to use</p><p>THE UX HONEYCOMB</p><p>The UX Honeycomb presents different focus points in defining UX priorities. Is it more important for your website to be desirable or accessible? Usable or Credible? Each facet serves as a focal point in transforming how we see what we do, and enable us to explore beyond conventional boundaries.</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>GOOD</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>BAD</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>GOOD</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>BAD</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>BADSUPER</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>A good experience Enhances the perception of your brand Encourages customers to return Generates brand loyalty</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>A bad experience Creates frustration Discourages customers from returning Drives customers to competitors</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>Impact of UX</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>Demand for better customer experiences and the need to grow faster through differentiation have led companies to adopt design-centric ethos</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p> ESPN.com revenues jumped 35% after a homepage redesign</p><p> Time.com bounce rate dropped 15% points after implementing continuous scroll</p><p> Choosing a specific blue amounted to an additional $80 million in annual revenue for Bing</p><p> Demand for top design talent created 150,000 UX jobs- Job Trends Report: The Job Market for UX/UI Designers, 2015</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>Local UX Scene</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>Organisations and Communities</p><p>Source: http://www.interface.sg</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>Universities and Polytechnics</p><p>Source: http://www.interface.sg</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p> The UX Challenges we face </p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>User behaviour has changed drastically and is more </p><p>complicated</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>It takes more than just best practice and usability to design </p><p>good UX.</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>UX [User eXperience]addresses how a user feels when using a system.</p><p>USABILITY is about the user-friendliness and efficiency of the interface.</p><p>UI [user interface]is the interface.</p><p>UCD [user-centric design]is a philosophy that puts the user in the centre of the design and development process.</p><p>CX [ Customer Experience ]</p><p>UX, USABILITY, UI and UCD</p><p>CX</p><p>UX</p><p>Usability</p><p>UCDUI</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>Designers need to up their user-centric design game</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>Hi, </p><p>I am theUX Designer/Web Designer/SEM Expert/Front-End Developer</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>Designing with UX in mind</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>noun</p><p>the circumstances that form the setting for an event, statement, or idea, and in terms of which it can </p><p>be fully understood.</p><p>kntkst/context</p><p>TIME COST</p><p>SCOPE</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>UX ICEBERG</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>UX Ice Kacang </p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>UX Ice Kacang vs UCD Steps</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>USERS &amp; BRAND</p><p>Users and Brand forms the </p><p>foundation of the experience. </p><p>Similarly the bowl that holds the </p><p>dessert together, is the base where </p><p>everything rests. The size of the </p><p>bowl also signifies the need of the </p><p>users (small or large) which is </p><p>synonymous to factors that </p><p>designers need to take into </p><p>consideration before they start </p><p>designing.</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>User firstContent is king, Distribution is Queen, Context is the new king, Conversation/Storytelling killed the </p><p>king. But in Carbon, weve always believed that the USERS still hold the mouse.</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>Know who you are designing forWe are not designing for ourselves, we are designing for our user.</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>. Do put yourselves in your users shoes</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>Generations X,Y and Z</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>Were doing a UX Refresh!</p><p>Weve all heard these before</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>. Do put yourselves in your users shoes</p><p>Yeahhh!!!!</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>WHY?!</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>Identify your users needs and goals </p><p>Ultimately our goals would direct our design decisions. The goals serve as invaluable roadmap for everyone involved in creating a website or app, </p><p>including any third-party creatives or digital agency team members.</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>Do not assumeYou are not your user. As much as you can follow patterns from others, you should not implement things just because you can. </p><p>Speak to your users and find out what their primary tasks and objectives are, and not what you think they are. </p><p>Real answers may surprise you.</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>GQNGIUSIQNS</p><p>Can you read this?</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>GQNGIUSIQNS</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>However, context.</p><p>Try this! Imagine you are the client and you are presented with a design (next slide). What would you say? Bad UX? Terrible UX! Wheres the design?</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>Perception is selective. Our brains are wired to think as such. Dont trust what your brain tells you.</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>Do ask questions, lots of questions </p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>Quantitative ApproachAnalysis of NUMERICAL data</p><p>Qualitative ApproachAnalysis of WORDS</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>However, context.</p><p>No budget for focus group? No time? A simple dipstick survey also works. Throw in some open-ended questions and pick a gem (insights) or two.</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>INFORMATION &amp; INTERFACE DESIGN</p><p>Content is the base ingredient </p><p>(ice). To delight users, designers </p><p>are required to prepare, </p><p>organise and structure their </p><p>content(information) properly </p><p>which is very much like how ice </p><p>is packed and shaped nicely into </p><p>a mountain of ice.</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>3. Design for worst-case scenarios</p><p>Learn to Sketch </p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>You can use an eraser on a drafting table, or a sledge hammer on a construction site.</p><p>- Frank Lloyd Wright, Architect, Writer, Interior Designer</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>3. Design for worst-case scenarios</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>Identify patterns</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>Page Template or Module Blocks?</p><p>CAROUSEL</p><p>CONTENT-BLOCK</p><p>TABBED CONTENT</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>Dont start from scratch </p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>3. Design for worst-case scenarios</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>Faster, Smarter with UX</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>AESTHETICS &amp; VISUAL DESIGN</p><p>Aesthetics and Visual Design adds </p><p>life to our creation, like the colourful </p><p>and flavourful syrups added into a </p><p>dessert. By using the right layout, </p><p>colours, typography and visual </p><p>imagery, a designer is able to </p><p>evoke emotion, grab attention and </p><p>provide motivation, thus making the </p><p>experience more memorable.</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>The Lord of the Rings</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>Who inspired who?</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>Lets add some colours!Add UX into the mix, to make your works more impactful and memorable</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>Tell a storyStorytelling delivers a better user experience.</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>How are experiences created?</p><p>MemoryPerception(Senses)</p><p>Processing Information</p><p>Emotions, Attention, Motivation</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>We let the optimised images do the storytelling</p><p>http://aprilasia.com</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>Welcome to RIAU, Indonesia</p><p>http://aprilasia.com</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>However, context.</p><p>If you have concerns about loading time, use big background images responsibly. Find a way to optimise your images.</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>Remove to improveMind the users flow and minimise distractions.</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p> A designer knows he has achieved perfection not when there is nothing left to add but when there is nothing left to take away.</p><p>- Antoine de Saint-Exupery</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>The wonders of set meals</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>However, context.</p><p>Do not simplify just to make it look sleek and cool. Simplification works when you are able to help the users perform a task faster and easier.</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>Make the brandwork harder</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>How are you able to differentiate airplanes?</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>Colours, Identity andVisual CuesCan make the difference.</p><p>Which banks website is this?</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>INTERACTION DESIGN</p><p>Toppings are the wow-factor of </p><p>desserts. Not all ice kacang are </p><p>created equal, hence not all would </p><p>have the same toppings. Similarly, it </p><p>will be those additional effects and </p><p>features that you add on top of your </p><p>designs that will bring your creation </p><p>to a different level, thus making the </p><p>experience more impactful.</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>Innovate and make things happen</p><p>Necessity is the mother of invention</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>A tabbed content UI illustrates cause and effect</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>A tabbed content UI illustrates cause and effect</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>A modified Light box becomes an engaging storytelling content</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>A modified Light box becomes an engaging storytelling content</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>An link delivers a simple yet unique experience</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>http://mindef.gov.sg/safvc</p><p>An link delivers a simple yet unique experience</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>However, context.</p><p>Do not innovate just for innovations sake. Too much interactivity can disrupt user flow too!</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>What if we give a site a personality?</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>Our recent pitch exercisefor SingaporeArt Museum</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>...like Siri</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>A predictivesearchbar witha touch of branding</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>Take the opportunityto build the brandeven in unexpected places a witty 404 error page</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>However, context.</p><p>Do not cross the line and bombard your users with too much advertising, you will chase your users away.</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>TESTS &amp; VALIDATION</p></li><li><p>Carbon Interactive Pte Ltd. Proprietary and Confidential 2016</p><p>Manag...</p></li></ul>