Designing effective ux in web apps
Upcoming SlideShare
Loading in...5
×
 

Designing effective ux in web apps

on

  • 740 views

 

Statistics

Views

Total Views
740
Views on SlideShare
740
Embed Views
0

Actions

Likes
0
Downloads
5
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Designing effective ux in web apps Designing effective ux in web apps Presentation Transcript

  • Designing Effective Web Application User Experiences Nova UX | Kettul 1 1Thursday, July 18, 13
  • Who is this guy? Tim Mannino Lead Developer @ kettul @kettuldesign 2 2Thursday, July 18, 13
  • What’s covered •Defining UX... Again. •A brief history of web apps and technical UX •Web apps vs websites vs native apps •Web apps vs native apps •Great UX failures or How I Stopped the Government from Ruining the Internet •Halftime! Let’s build a great UX from scratch! •What to do and what not to do in UX •Planning, building, and testing for good UX •The future of UX •UX Trivia! 3Thursday, July 18, 13
  • Defining UX... Again. UX is.... “...a person's perceptions and responses that result from the use or anticipated use of a product, system or service” 4 4Thursday, July 18, 13 UX in the web is a combination of IA, Web Design, Usability, UI, Web Development Give a brief overview of the people and elements that go into UX It’s not just for computers! UX example: the feel of driving a car. UI: the car itself.
  • 5Thursday, July 18, 13 Graphic of background... Spectrum of UX. Source: IA, http://img.dare.co.uk/wp/spectrum-of-user-interface-design.gif
  • A brief history of ux 6Thursday, July 18, 13 UX isn’t tethered to just the web but rather deals with the focus of customer experience, usability, and emotional response to products. The Human Factors field began to emerge around World War II as researchers began to realize that humans interacting with technical systems was no trivial endeavor. Operators using technical systems, even when their lives depended upon accurate and reliable results, eventually hit obvious human limitations.
  • 7Thursday, July 18, 13 The first UX meeting These findings lead to research asking: What do human limitations mean for systems design? How can systems be designed to help aid these limitations? Formal study of originated from many fronts. European and Scandinavian labor unions issued studies surrounding occupational health and ergonomic research. Less training - more efficient employees!
  • old school! Woot! 8Thursday, July 18, 13 In the beginning the underlying principals of UX began as simple observations and as time passed the topic shifted from human factors to user-centered design. 80’s and 90’s! Usability focuses on the UI being effective, efficient and satisfactory to the user. As more organizations adopted user-centered design teams began paying attention to details beyond usability. Engineers Psychologists User Research Visual and Graphic Designers Testers
  • Examples of modern UX Design •AOL •Search •user-generated content •iphone • source: http://uxmag.com/articles/the-six-greatest-breakthroughs-in-ux-history 9Thursday, July 18, 13 Modern examples: AOL, search, user-generated content, iPhone
  • 10Thursday, July 18, 13 AOL
  • 11Thursday, July 18, 13 Search (google)
  • 12Thursday, July 18, 13 User-generated content
  • 13Thursday, July 18, 13 iPhone
  • An even briefer history of web apps 14Thursday, July 18, 13 An even briefer history of web apps
  • 1995 | Netscape introduces JS 15Thursday, July 18, 13 1995 - Netscape introduces JS Allows programmers to add some dynamic elements to the user interface that ran on the client side. So instead of sending data to the server in order to generate an entire web page, the embedded scripts of the downloaded page can perform various tasks such as input validation or showing/hiding parts of the page.
  • 1996 | MAcromedia introduces flash 16Thursday, July 18, 13 1996 - Macromedia introduces Flash A vector animation player that could be added to browsers as a plug-in to embed animations on the web pages. It allowed the use of a scripting language to program interactions on the client side with no need to communicate with the server.
  • 1999 | the “web app” is born 17Thursday, July 18, 13 1999 - The “web app” is born the "web application" concept was introduced in the Java language in the Servlet Specification version 2.2. [2.1?].[3][4] At that time both JavaScript and XML had already been developed, but Ajax had still not yet been coined and theXMLHttpRequest object had only been recently introduced on Internet Explorer 5 as an ActiveX object.
  • 2005 | Ajax comes into its own 18Thursday, July 18, 13 2005 | Ajax is coined Ajax had already been developed but the term wasn’t really used until this point. Web apps began to see huge shifts in overall design and UX.
  • 2011 | html5 is finalized 19Thursday, July 18, 13 2011 | HTML5 is finalized provides graphic and multimedia capabilities without the need of client side plugins. HTML5 also enriched the semantic content of documents. The APIs and document object model (DOM) are no longer afterthoughts, but are fundamental parts of the HTML5 specification. WebGL API paved the way for advanced 3D graphics based on HTML5 canvas and JavaScript language. These have significant importance in creating truly platform and browser independent rich web applications.
  • 20Thursday, July 18, 13 Good thing we’ve moved on to better things!
  • Web apps vs Websites vs native apps 21Thursday, July 18, 13 Overview outlining the differences between web apps, websites, & native/mobile apps. Let’s get the terminology right, at least for tonight!
  • Web Apps vs Native Apps 22Thursday, July 18, 13 Remember the talk about native apps? Of course, there are still plenty of native apps out there - we use them everyday.
  • Web Apps vs Native Apps 23Thursday, July 18, 13 Native apps we use everyday. PS, Gmail, Word
  • Web Apps vs Native Apps 24Thursday, July 18, 13 Web apps or a mix of both are great too! Creative Cloud, Gmail, Office365. All this is old news now though.. So why a web app and not just a website?
  • Web apps vs websites 25Thursday, July 18, 13 We all know the difference between a website and a web app right? Just like “UX” and “UI” the definitions mean different things for different people. Web apps are basically websites designed to act as interactive applications accessible via a browser as opposed to native to a device or specific OS. Whereas a website alone could just be static and informational. Of course, the lines are blurred many times with many exceptions. So why should we design and build web apps instead of native apps?
  • Reach. Time. Cost. 26Thursday, July 18, 13 Reach. Time. Cost.
  • Reach 27Thursday, July 18, 13 Audience reach (see graphic.) Of course, this doesn’t really differentiate between native vs. Web - it just backs up what we already know. That you should be designing and building for mobile.
  • Time 28Thursday, July 18, 13 Why build 3-4 versions of an app when you can build one and distribute it across all devices? App speed is a factor, of course, native always wins out still. And focus in one specific grain should not be discounted.
  • Cost 29Thursday, July 18, 13 Going hand in hand with time, cost is always a significant issue. It’s typically cheaper to build and maintain a native app on one platform but you need highly skilled devs in specific languages/environments, whereas web dev is typically easier (opinion!) Maintaining one codebase is easier as well so should definitely be considered if you’re short on staff, resources, etc. If you have the staff and funding however, you prob. should go native (opinion)!
  • 30Thursday, July 18, 13 Now that we’ve talked a lot about what we already know...Let’s get into the good stuff!
  • Failures of UX Design Do or do not. There is no try. 31 31Thursday, July 18, 13 Failures of UX - Do or do not. There is no try. Sure, that’s easy to say but trying at good UX/UI typically results in half-baked, not so great, or just plain horrible design. You either succeed with it or you don’t. That being said, trying and testing is a part of success so the previous statement is not exactly true.
  • Don’t be cheeky. 32Thursday, July 18, 13 The truth is, many designers get lazy from time to time. You learn a few trends, cool Photoshop techniques and find some awesome license-free fonts, get an ego, and you think you can throw together a great app. We’ve all seen it. So what do we do?
  • Planning. Focus. More Planning. Iteration. Iteration. Focus. Testing. Iteration. 33Thursday, July 18, 13 Planning and focus is more important than application. Wireframes, scripting, storyboards, workflows, however you plan and conceptualize, it’s imperative for successful app design. Create as many iterations as you can and test, test, test! Source it out as much as you can to focus groups - not people you know! Examples of poor planning and hasty/lazy execution in pseudo-web apps:
  • WRDA ONLINE 34Thursday, July 18, 13 Wisconsin Register of Deeds - deed registration - deed alteration and filing - account lookup
  • US Court of Appeals 35Thursday, July 18, 13 US Court of Appeals - case lookup - fee payments - e-filing
  • Kingdom of Cambodia 36Thursday, July 18, 13 Cambodia - animated gifs - flashing text
  • Illinois.gov 37Thursday, July 18, 13 Illinois.gov - just about anything that needs to be done thru state govt? - jobs, college, income taxes - taxes, bill search, etc. - silverlight??
  • What’s the theme here? 38Thursday, July 18, 13 All examples of poor government websites. The reason government websites/apps usually suck? They typically attract designers and developers more interested in a steady career as opposed to say, an envelope-pushing startup. Of course, there are many exceptions to this and I mean no offense to anyone that may be a government employee.
  • No offense. Really. 39Thursday, July 18, 13 Many times, the issue is not the quality of the designer, but rather the red tape they have to put up with in order to design, as dictated by non-designers in higher positions and inflexible bureaucratic structures in place that hinders good design. In part, government is not dependent on good UX the way private industry is. They don’t need to sell their product in the same way, thus do not feel the pressure businesses in the private sector do. (Enough harping on government, I apologize :)
  • The silver Lining? The White House’s Open Government Directive, issued in December 2009, mandated that federal departments and agencies develop and implement open government plans to advance transparency of their data and encourage participation and collaboration. Since then, agencies have been rolling out everything from new wikis to redesigned Web sites to IT dashboards to comply with the directive and make government data more accessible. Source: http://fcw.com/articles/2010/07/06/12-bad-government-web-sites.aspx 40 40Thursday, July 18, 13 Many times, the issue is not the quality of the designer, but rather the red tape they have to put up with in order to design, as dictated by non-designers in higher positions and inflexible bureaucratic structures in place that hinders good design. In part, government is not dependent on good UX the way private industry is. They don’t need to sell their product in the same way, thus do not feel the pressure businesses in the private sector do. (Enough harping on government, I apologize :)
  • The silver Lining? The White House’s Open Government Directive, issued in December 2009, mandated that federal departments and agencies develop and implement open government plans to advance transparency of their data and encourage participation and collaboration. Since then, agencies have been rolling out everything from new wikis to redesigned Web sites to IT dashboards to comply with the directive and make government data more accessible. Source: http://fcw.com/articles/2010/07/06/12-bad-government-web-sites.aspx 41 41Thursday, July 18, 13 Many times, the issue is not the quality of the designer, but rather the red tape they have to put up with in order to design, as dictated by non-designers in higher positions and inflexible bureaucratic structures in place that hinders good design. In part, government is not dependent on good UX the way private industry is. They don’t need to sell their product in the same way, thus do not feel the pressure businesses in the private sector do. (Enough harping on government, I apologize :) Drupal! Not to say drupal has a good UX. Horrible out of the box actually.
  • HAlftime! Let’s build a great UX from scratch! 42 42Thursday, July 18, 13 Halftime!
  • Let’s build... an online store! 43Thursday, July 18, 13 Ok, what do we need?
  • The Essentials •Products •Checkout •Categories/Search/Tagging 44Thursday, July 18, 13 Products - what’s a store without stuff to sell. Check. Checkout - Because people have to actually buy the stuff you’re selling. Categories/Search/Tagging - How are people going to find what they need to buy?
  • The good to have •Reviews/Ratings •Descriptions •Suggestions •Followup 45Thursday, July 18, 13 Reviews/Ratings - who doesn’t like to see what other people have experienced? Descriptions - We have to know what these products are all about!! Suggestions - It’s awesome to get focused suggestions on products you may like! Followup - Email receipts, shipment tracking, shipment confirmation, easy return info, etc.
  • That extra something •Selling •Fast checkout •Used items •Notoriety 46Thursday, July 18, 13 Selling - what if I could sell stuff on the same store I’m buying! Woot! Fast checkout - 1-Click... Woot Woot! Used items - I don’t want to pay full price on a book... There’s a button for that! Notoriety - Well, who doesn’t want that?
  • Ok, we’ve got everything. Now what? 47Thursday, July 18, 13 Now what? We need to consult our process.
  • Planning. Focus. More Planning. Iteration. Iteration. Focus. Testing. Iteration. 48Thursday, July 18, 13 Keep focusing. Get your team together:
  • The UX Team •UX All-Rounder •IA •Visual Designer •Usability Expert •Content Strategist •Front-End Dev • Source: http://www.1stwebdesigner.com 49Thursday, July 18, 13 The UX Team UX All-Rounder IA Visual Designer Usability Expert Content Strategist Front-End Dev Multiple people fill multiple roles sometimes.
  • 50Thursday, July 18, 13 Consult your process. Everyone’s process is different. What works for you and your team may not work for others. Waterfall vs Agile processes are great to learn, implement, and argue about! Iterations, testing, prototypes. We’ll get more into that in a bit. So after all that testing, those iterations, that focus.. the core components of the store we never forgot about? What do we have?
  • Source: http://www.lukew.com/ff/entry.asp?178 51Thursday, July 18, 13 Amazon. Discuss a bit about what they went through. Why they provide a great UX without having a great design. And why copying them is good or bad.
  • 52Thursday, July 18, 13 We’ve discussed some examples of poor execution and touched on why planning is so essential. What are the key things you shouldn’t do when designing effective UX in a web application?
  • What not to do •Don’t restrict your toolbox (code, framework) •Don’t launch too early (unfinished) •Don’t launch too late (too nitpicked) •Don’t employ too small a team (maybe? Exceptions...) •Don’t employ too large a team (too many hands in the pot) •Don’t rest on your laurels (innovate, push the envelope) •Don’t be an island (get feedback, lots of feedback) •Don’t be lazy (do good work, it shows) 53Thursday, July 18, 13
  • What to do •Plan (wireframes, storyboards, mind maps, workflows, etc.) •Focus (don’t lose site of end goal) •Adapt (be flexible. Tech changes all the time, change with it.) •Read (keep up on blogs, trends, design award sites) •Copy (don’t plagiarize but don’t reinvent the wheel either. Established conventions are established for a reason.) •Don’t copy (popular doesn’t mean good) •Keep trying (I know I said there is no try but there are always exceptions to the rule) •Get back up and do it again after failure (some designs will fail, some will be your fault, some will be the client’s (if doing client work), it’s ok.. Keep at it. • 54Thursday, July 18, 13
  • Designing Effective UX 55Thursday, July 18, 13 It can be extremely rewarding to successfully create a solid, functional UX that not only is used as intended, but is popular among its intended userbase. Here are the key points in what you should consider when designing effective UX:
  • Designing effective UX - Planning know your audience 56 56Thursday, July 18, 13 Know your audience. Have an intended demographic. This doesn’t mean that only this demographic will use your app, but it gives you focus as to who you’re targeting and who you can best serve with your design. Examples: Your app is to help teachers with lesson plans, classroom materials, learning interactivity (e.g. LearnZillion). Your focus is public-sector educators but could include private-sector, tutors, even commercial businesses that may be able to use the system/resources in their office environment.
  • Designing effective UX - Planning Ask questions 57 57Thursday, July 18, 13 Who, What, Why, When, Where, How. Ask questions about who your audience is, what they’re looking to achieve, why they would use your app, when they would use it (in what situation, environment?), where your audience lives and where they’d use your app, how they’d access it and how easy it would be. Keep asking questions... What problem does your audience have? How will your app fix it? How fast can it fix it? Is it a multi-step process?
  • Designing effective UX - Planning Ask more questions 58 58Thursday, July 18, 13 Ask the hell out of your app!! Number one goal for UX: Make users happy (or produce an emotional response... Usually positive). How can you make them happy? Fix, enrich, better. Why is Apple so popular? Define the problem you’re trying to solve!
  • Designing effective UX - Planning find the outer limits 59 59Thursday, July 18, 13 Track, log, and get feedback to find out how users are using your app UserVoice, eye tracking heatmaps, Analytics, etc. Take user errors and build them into your framework Focus on one device at a time (unless you have the budget/team size...)
  • Designing effective UX - Planning cut the bullshit 60 60Thursday, July 18, 13 Trim the fat and get to the core of what your app is and what it intends to do. Don’t fluff it up with extra features it doesn’t need. Without a great core idea, even the nicest design app will fail. Sometimes, a great idea is so great you don’t even need good design, if the UX is solid enough to get people to use your app effectively. Examples: Amazon.com, Google (especially early), eBay
  • Designing effective UX - Planning Read. read. read. 61 61Thursday, July 18, 13 Read.
  • Designing effective UX - building Use your team and resources effectively 62 62Thursday, July 18, 13 UX can be done by one person but usually doesn’t work too well. Don’t get lost in the details - see the big picture and endgame. Choose your framework and code carefully but not too carefully. Be flexible - remember UX isn’t about what’s hot right now, it’s about garnering an emotional response in your audience.
  • Designing effective UX - building Wireframe, storyboard, prototype 63Thursday, July 18, 13 Let your IA guy do his job. Let your dev team do their job. Storyboard the workflow as if you’re scripting a film. Example: see pictures Sources: http://www.uxapprentice.com/strategy/, http://www.michelletchin.net/, Moqups
  • Designing effective UX - building Copy. But don’t really. 64Thursday, July 18, 13 It’s great to follow trends. Don’t reinvent the wheel. But don’t plagiarize and don’t copy bad UI elements unnecessarily. Do everything with a purpose. Examples: Slideshows, Check ins, infinite scrolls, mega menus, etc.
  • Designing effective UX - building Be Consistent 65Thursday, July 18, 13 Follow your goal, track your changes, and be consistent in your overall brand. If you begin to deviate too much, you run the risk of looking wishy washy and could end up in failure. Don’t be boring. Entice your audience with new features within your core scope but don’t get carried away. People want to use apps because they solve a problem, enrich their lives, or make them happy. People will give up on your app if it’s boring or becomes stagnant. Examples: Facebook, Instagram, Yahoo!
  • A brief future of ux •The Devil is in the Details •Prevent human error •Content is King 66Thursday, July 18, 13 The Devil is in the Details Be as focused and detailed as possible. Consumers are savvier (and pickier) than ever - 1st world problems! Prevent human error Simple, straightforward, and foolproof is key. Don’t let people fail - Apple vs Android discussion! Content is King Make the experience about the content, about the value to the user. Be personable and emotion-driven and it will keep them coming back for more.
  • UX Trivia! What famous UX designer once designed toilets? 67 67Thursday, July 18, 13 What famous UX designer once designed toilets? Jony Ive
  • UX Trivia! What is Fitt’s law? 68 68Thursday, July 18, 13 Fitts's law (often cited as Fitts' law) is a model of human movement primarily used in human–computer interaction and ergonomics that predicts that the time required to rapidly move to a target area is a function of the distance to the target and the size of the target. Examples: time it takes to point with the mouse (or finger) to specific UI elements.
  • UX Trivia! What is the name given to design elements meant to imitate real-life textures and products? 69 69Thursday, July 18, 13 What is the name given to design elements meant to imitate real-life textures and products? Skeumorphic
  • UX Trivia! What popular mobile UI element (and something we use on desktops everyday) was invented in 1873? 70 70Thursday, July 18, 13 What popular mobile UI element (and something we use on desktops everyday) was invented in 1873? QWERTY keyboard layout
  • Q & A Tim Mannino Lead Developer @ kettul @kettuldesign 71 71Thursday, July 18, 13