Designing effective ux in web apps

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


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!


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


UX in the web is a combination of IA, Web Design, Usability, UI, Web DevelopmentGive a brief overview of the people and elements that go into UXIt’s not just for computers!

UX example: the feel of driving a car. UI: the car itself.


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


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.


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!


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.

EngineersPsychologistsUser ResearchVisual and Graphic DesignersTesters

Examples of modern UX Design

•AOL

•Search

•user-generated content

•iphone

• source: http://uxmag.com/articles/the-six-greatest-breakthroughs-in-ux-history


Modern examples: AOL, search, user-generated content, iPhone

http://uxmag.com/articles/the-six-greatest-breakthroughs-in-ux-history

http://uxmag.com/articles/the-six-greatest-breakthroughs-in-ux-history


AOL


Search (google)


User-generated content


iPhone

An even briefer history of web apps


An even briefer history of web apps

1995 | Netscape introduces JS


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


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


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


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


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.


Good thing we’ve moved on to better things!

Web apps vs Websites vs native apps


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


Remember the talk about native apps? Of course, there are still plenty of native apps out there - we use them everyday.



Native apps we use everyday. PS, Gmail, Word



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


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.


Reach. Time. Cost.

Reach


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


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


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)!


Now that we’ve talked a lot about what we already know...Let’s get into the good stuff!

Failures of UX DesignDo or do not. There is no try.

31


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.


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.


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


Wisconsin Register of Deeds

- deed registration- deed alteration and filing- account lookup

US Court of Appeals


US Court of Appeals

- case lookup- fee payments- e-filing

Kingdom of Cambodia


Cambodia

- animated gifs- flashing text

Illinois.gov


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?


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.


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




http://fcw.com/articles/2010/07/01/agencies-release-updated-versions-of-open-government-plans.aspx?sc_lang=en


http://fcw.com/articles/2010/07/06/12-bad-government-web-sites.aspx


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




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


Halftime!

Let’s build... an online store!


Ok, what do we need?

The Essentials

•Products

•Checkout

•Categories/Search/Tagging


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


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


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?


Now what?

We need to consult our process.

Planning. Focus. More Planning. Iteration.

Iteration. Focus. Testing. Iteration.


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


The UX Team

UX All-RounderIAVisual DesignerUsability ExpertContent StrategistFront-End Dev

Multiple people fill multiple roles sometimes.

http://www.1stwebdesigner.com/

http://www.1stwebdesigner.com/


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


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.

http://www.lukew.com/ff/entry.asp?178

http://www.lukew.com/ff/entry.asp?178


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)


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.

•


Designing Effective UX


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


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.


Ask questions

57


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?


Ask more questions

58


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!


find the outer limits

59


Track, log, and get feedback to find out how users are using your appUserVoice, eye tracking heatmaps, Analytics, etc. Take user errors and build them into your frameworkFocus on one device at a time (unless you have the budget/team size...)


cut the bullshit

60


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


Read. read. read.

61


Read.

Designing effective UX - building

Use your team and resources effectively

62


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.


Wireframe, storyboard, prototype


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 picturesSources: http://www.uxapprentice.com/strategy/, http://www.michelletchin.net/, Moqups


Copy. But don’t really.


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 - buildingBe Consistent


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


The Devil is in the DetailsBe 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 KingMake 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


What famous UX designer once designed toilets?Jony Ive

UX Trivia!What is Fitt’s law?

68


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


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


What popular mobile UI element (and something we use on desktops everyday) was invented in 1873?QWERTY keyboard layout

Q & ATim Mannino

Lead Developer @ kettul

@kettuldesign

71


Designing effective ux in web apps

Technology

Transcript of Designing effective ux in web apps