ms dgs 16 presentation - human centered design thinking - by robby seitz

Robby Seitz

WebmasterInformation TechnologyUniversity of Mississippi

webmaster@olemiss.edu

Mississippi Digital Government SummitSeptember 27, 2016

To better understand the concept,let’s first consider what it is not.

Get a list of requirements from the customer.

Go and build to those requirements.

Show it to the customer and negotiate changes.

Deliver the project and move on.

Relationship to actual problem:• Requirements documents don’t always give the whole

picture• Customers don’t always understand it themselves

Changes after delivery:• Can be as costly as the original product• Often get shoe-horned in without being a good fit

Future Expansion:• Uniquely built parts • Different aesthetics across different parts

Builds empathy with customers and their users

Seeks to understand the problems

Generates many, many ideas

Builds prototypes for testing

Iterates and revises concepts with customer involvement along the way

Releases product that makes everyone happy

Relationship to actual problem:• Quite familiar

Changes after delivery:• Fewer changes needed because customer works with

you through to the end

Future Expansion:• Considered so many ideas that expansion plans were

probably built in

A human-centered approach considers the design of the

entire user experience, from start to finish,

rather than views the project as a collection of use cases.

“…Customer experience will increase in the impact that it has on overall competitive advantage. Other aspects,

such as products and price, are expected to decrease.”

Source: http://www.walkerinfo.com/customers2020/

Analytics

Surveys Testing

Personas

Invent theoretical visitors.

Give them names

Assign a personalities

Create their environments

Consider their limitations; physical & technical

Barb has worked in the Procurement office for 30 years and is very set in her ways. She has arthritis in her hands, but is otherwise healthy. She’s still not comfortable with the new portal, even though she uses it every day for her reports.

Rohit is an international student planning to major in Computer Science. He has been accepted to the university but won’t arrive in the country for several more weeks. He uses his cell phone for Internet access, but his service at home is sketchy.

Assign your personas to actual tasks.

Barb wants to change her payroll deductions.

Rohit needs to register for classes.

“Conversion” is the term used when a user successfully does something we want them to.

What kinds of problems might they encounter?

Technological: Limitations of the browser, OS, device, network

Programmatic: Navigation, organization, inconsistent layout, etc.

Personal: Attitude, disability, distractions, pressure

Barb: Change payroll deductionsConfusing navigation within the portal. If she can’t use a mouse very well, are the

clickable areas of the navigation large enough?Does the form require a specific browser? Is the window for this change available at this

time of year? Is information available to help guide her through

the process?How will she be notified that the requested

change has been made?

Rohit: Register for classesWhen does his school’s registration begin?What is his major? Minor? For what semester is he registering?Are there any holds on his account? Is his registration window open yet?What classes are offered then?Do these classes have pre- or co-requisites?Do the classes he wants have any seats left?Can the registration application work on his cell

phone?

Collecting data is good even while you are learning how to read it!

Analytics can show you where people are spending their time on your site.

Beware making falseassumptions based juston historical data.

Helps you understand end users’ needs so you can design a better experience.

As you build and test, you can monitor progress by getting user feedback.

Stakeholders gain confidence as they see the design’s progress in meeting the users’ needs.

Observe volunteer users performing actual tasks using your prototypes.

Video and take notes during sessions to identify recurring themes later.

Source: youtube.com/watch?v=IPr6MgF93jQ

Once your project is far enough along, consider testing in production.

“A-B Testing” offers the opportunity to observe which version leads to the most conversions.

A website uses 4 basic tools to communicate:

Text

Markup

Images

Layout

Website visitors use 2 basic means of interacting:

Pointer

Keyboard

MouseFingerTrackball

Keyboard

Pointing StickVoice RecognitionEye TrackingBreath Controller

Tabbed BrowsingNumeric PadButton Controller

Typical Assistive

Text• Choice of wording• Label and button text• Explanation when needed

Images• Supporting images should not distract• Alternative text and captioning• Reinforce layout – flat design• Sliders are ignored!

Navigation• Logical structure• Support wayfinding

Code• Valid HTM runs consistently in all browsers• Javascript should only enhance – page should work without it

Speed• Limit needs for bandwidth• Decrease latency

Responsiveness• Make it work on many devices

Search• Bypasses navigation• Good SEO also tends to increase accessibility

A consistent website is predictable and therefore learnable.

ElementsDesignContent Interaction

When your users feel comfortable with your site, they’ll return consistently as well.

Don’t focus on the special needs of people with disabilities.

Assistive technologies already exist. Assume they know how to use them.

Focus, instead, on the capabilities of their devices.

Nobody will succeed at creating the perfect user experience the first time they try.

• It is an iterative process of creativity and refinement.

• It involves the customer/users/humans at every step.

• Even if we do succeed today, the goal gets moved tomorrow.

Portal Redesign - 2014

For this project, our team was already intimately aware of some of the problems with the portal.

We used ourselves as the first group to test new designs on.

Once those seemed good, we expanded the circle to include other ‘friends of IT.’

Finally reached out and invited others to try it and let us know what they thought.

At each step, we considered the reactions and modified the design where necessary.

Previous design emphasized underlying data structure (role, workset, application) in a multi-tiered menu.

New design uses a menu for only the role, then groups which contain applications.

If user needs to access a recently used application again, it’s listed on the home page.

Increased security: what if the user doesn’t recognize the activity.

Users can add bookmarks for applications they use often.

Bookmarks appear on the home page.

A list of hundreds of applications is reduced as you type.

Bookmarked applications are listed first.

Developed a common layout for application designs.

Text, buttons, input fields, error messages, etc., were all standardized for appearance.

The variety of calendars and table tools were limited so each application used the same set of controls.

A “soft launch” lets you put something into production without bringing attention to it.

Watch how it functions and restore the original if it doesn’t work.

Allows you to make changes incrementally to a site rather than completely overhauling everything.

University sites often have different links for finding stuff:• Directories• A-Z Index• People• Policies

We wanted to replace all these with a simple search that would pull all that data into one page of results.

Created one landing page with separate categories of results.

The solutionseemedelegant, easier,and completelyclear to us.

But not everyone “got” it.

Their familiarity with separate types of searches prevented them from making the leap to a better way of thinking about it.

So we had to create a dropdown for categories, making the design look more complicated.

Oh well…

During our portal redesign, we contacted a student who is legally blind and asked if he could test the interface and let us know if it worked.

He told us it was the first time he’d been able to log into the portal and get around without anyone else’s assistance.

How to perfect your UX with persona scenarios (http://www.webdesignerdepot.com/2015/04/how-to-perfect-your-ux-with-persona-scenarios/)

UX For the Masses (http://www.uxforthemasses.com/) Online Survey Questions (http://www.uxforthemasses.com/online-survey-questions/) Better User Research Through Surveys (http://uxmastery.com/better-user-research-through-surveys/) How a Complete Novice Learned User Testing in 10 Minutes (http://uxmastery.com/learn-user-testing-in-

10-minutes/) Customer Experience Expectations in 2020 (http://www.walkerinfo.com/customers2020/) Consistency: Key to Better UX (http://www.uxbooth.com/articles/consistency-key-to-a-better-user-

experience/)

Large quotes (https://quotefancy.com/) Clipart from flaticon.com – Creative Commons BY 3.0:

• http://www.flaticon.com/authors/freepik

• http://www.flaticon.com/authors/madebyoliver