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

43
Robby Seitz Webmaster Information Technology University of Mississippi [email protected] Mississippi Digital Government Summit September 27, 2016

Upload: government-technology

Post on 07-Apr-2017

44 views

Category:

Government & Nonprofit


1 download

TRANSCRIPT

Page 1: MS DGS 16 Presentation - Human Centered Design Thinking - by Robby Seitz

Robby Seitz

WebmasterInformation TechnologyUniversity of Mississippi

[email protected]

Mississippi Digital Government SummitSeptember 27, 2016

Page 2: MS DGS 16 Presentation - Human Centered Design Thinking - by Robby Seitz
Page 3: MS DGS 16 Presentation - Human Centered Design Thinking - by Robby Seitz

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

Page 4: MS DGS 16 Presentation - Human Centered Design Thinking - by Robby Seitz

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.

Page 5: MS DGS 16 Presentation - Human Centered Design Thinking - by Robby Seitz

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

Page 6: MS DGS 16 Presentation - Human Centered Design Thinking - by Robby Seitz

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

Page 7: MS DGS 16 Presentation - Human Centered Design Thinking - by Robby Seitz

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

Page 8: MS DGS 16 Presentation - Human Centered Design Thinking - by Robby Seitz

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.

Page 9: MS DGS 16 Presentation - Human Centered Design Thinking - by Robby Seitz

“…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/

Page 10: MS DGS 16 Presentation - Human Centered Design Thinking - by Robby Seitz

Analytics

Surveys Testing

Personas

Page 11: MS DGS 16 Presentation - Human Centered Design Thinking - by Robby Seitz

Invent theoretical visitors.

Give them names

Assign a personalities

Create their environments

Consider their limitations; physical & technical

Page 12: MS DGS 16 Presentation - Human Centered Design Thinking - by Robby Seitz

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.

Page 13: MS DGS 16 Presentation - Human Centered Design Thinking - by Robby Seitz

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.

Page 14: MS DGS 16 Presentation - Human Centered Design Thinking - by Robby Seitz

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

Page 15: MS DGS 16 Presentation - Human Centered Design Thinking - by Robby Seitz

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?

Page 16: MS DGS 16 Presentation - Human Centered Design Thinking - by Robby Seitz

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?

Page 17: MS DGS 16 Presentation - Human Centered Design Thinking - by Robby Seitz

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.

Page 18: MS DGS 16 Presentation - Human Centered Design Thinking - by Robby Seitz

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.

Page 19: MS DGS 16 Presentation - Human Centered Design Thinking - by Robby Seitz

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

Page 20: MS DGS 16 Presentation - Human Centered Design Thinking - by Robby Seitz

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.

Page 21: MS DGS 16 Presentation - Human Centered Design Thinking - by Robby Seitz
Page 22: MS DGS 16 Presentation - Human Centered Design Thinking - by Robby Seitz

A website uses 4 basic tools to communicate:

Text

Markup

Images

Layout

Page 23: MS DGS 16 Presentation - Human Centered Design Thinking - by Robby Seitz

Website visitors use 2 basic means of interacting:

Pointer

Keyboard

MouseFingerTrackball

Keyboard

Pointing StickVoice RecognitionEye TrackingBreath Controller

Tabbed BrowsingNumeric PadButton Controller

Typical Assistive

Page 24: MS DGS 16 Presentation - Human Centered Design Thinking - by Robby Seitz

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

Page 25: MS DGS 16 Presentation - Human Centered Design Thinking - by Robby Seitz

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

Page 26: MS DGS 16 Presentation - Human Centered Design Thinking - by Robby Seitz

A consistent website is predictable and therefore learnable.

ElementsDesignContent Interaction

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

Page 27: MS DGS 16 Presentation - Human Centered Design Thinking - by Robby Seitz

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.

Page 28: MS DGS 16 Presentation - Human Centered Design Thinking - by Robby Seitz

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.

Page 29: MS DGS 16 Presentation - Human Centered Design Thinking - by Robby Seitz

Portal Redesign - 2014

Page 30: MS DGS 16 Presentation - Human Centered Design Thinking - by Robby Seitz

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.

Page 31: MS DGS 16 Presentation - Human Centered Design Thinking - by Robby Seitz

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.

Page 32: MS DGS 16 Presentation - Human Centered Design Thinking - by Robby Seitz

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.

Page 33: MS DGS 16 Presentation - Human Centered Design Thinking - by Robby Seitz

Users can add bookmarks for applications they use often.

Bookmarks appear on the home page.

Page 34: MS DGS 16 Presentation - Human Centered Design Thinking - by Robby Seitz

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

Bookmarked applications are listed first.

Page 35: MS DGS 16 Presentation - Human Centered Design Thinking - by Robby Seitz

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.

Page 36: MS DGS 16 Presentation - Human Centered Design Thinking - by Robby Seitz

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.

Page 37: MS DGS 16 Presentation - Human Centered Design Thinking - by Robby Seitz

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.

Page 38: MS DGS 16 Presentation - Human Centered Design Thinking - by Robby Seitz

Created one landing page with separate categories of results.

The solutionseemedelegant, easier,and completelyclear to us.

Page 39: MS DGS 16 Presentation - Human Centered Design Thinking - by Robby Seitz

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…

Page 40: MS DGS 16 Presentation - Human Centered Design Thinking - by Robby Seitz

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.

Page 41: MS DGS 16 Presentation - Human Centered Design Thinking - by Robby Seitz
Page 42: MS DGS 16 Presentation - Human Centered Design Thinking - by Robby Seitz
Page 43: MS DGS 16 Presentation - Human Centered Design Thinking - by Robby Seitz

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