Http:// BUILDING DELIGHTFUL ONLINE USER EXPERIENCES Amy M. Drayer Senior IT Developer Front end...

http://www.hclib.org

BUILDING DELIGHTFUL ONLINE USER EXPERIENCES

Amy M. DrayerSenior IT DeveloperFront end developer focused on UX

Amy LuedtkeSenior LibrarianWeb content librarian

#delightfulUX2015


PROFILE

41 locations spanning 611 square miles

1.2 million residents

Nearly 840,000 total library cards in use.


PROFILE

5 million collection items, including books, eBooks and more, in 40-plus languages

1.6 million item records

Almost 15.9 million visits to public website


SirsiDynix Horizon (in-library built ILS API)Sitecore content management systemSolr, LDAP, and SQL databasesColdFusion/ASP.NET and PerlTwitter Bootstrap and jQueryGit code managementContent vendors with APIs Syndetics, NoveList, OverDrive, BookLens

4-5 developers4-5 content librariansWeb design firm (for initial launch)

TOOLS

TEAM

#delightfulUX2015


DELIGHTFUL? REALLY?

Empower users to do and find what they want - not what we assume they want

Clean design, easy-to-use

Positive user experience

#delightfulUX2015

http://www.hclib.org#delightfulUX2015


WEBSITE CHANGES

Responsive design for mobile accessibility

User-centered focus on core tasks

Catalog fully integrated into website

More robust search

Focus on library information and resources

Less audience-based navigation

Fewer links to non-library websites

#delightfulUX2015


KEY CONSIDERATIONS What are the core decision points for patrons?

What labels will work best for the most users?

#delightfulUX2015


USER ENGAGEMENT

How are we in conversation with patrons and staff about catalog and website?

Iterative process of ongoing dialogue and change

#delightfulUX2015


BE PREPARED

What will users ask?

Where and when and how will they ask?

How will you respond?

#delightfulUX2015


WHAT?

Why the change?

Where did you move what I want?

What about my access? (technology, habit)

What about me?

#delightfulUX2015


THERE’S A TIME AND PLACE

What will you tell users before, during, and after change?

How will you have these conversations?

#delightfulUX2015


WHO & HOW

Who will respond to questions and troubleshoot?

How will you track and coordinate response?

#delightfulUX2015


FEEDBACK PROCESS

#delightfulUX2015


Staff previews with bug reporting form3 rounds of internal usability1 semester with University usability class1 month public beta preview with bug reporting form

Online bug reporting form

PRE-LAUNCH (CATALOG ONLY)

AT LAUNCH

FEEDBACK PROCESS Input

#delightfulUX2015


Monthly usability testsCollaboration with U of MN usability class“Ask Us” online customer serviceComments and feedback online formSocial mediaGoogle Analytics(existing “to do” list)

ONGOING

FEEDBACK PROCESS Input

#delightfulUX2015


1. All feedback stored in a large electronic spreadsheet

2. Feedback is sorted into urgency and priority by small team of three that meets weekly Bugs are reported and fixed immediately (unless it requires

additional staff and deliberation)

3. Team writes a Project Initiation Document and adds an entry in SharePoint project site

4. Resources (personnel) are assigned and timeline outlined

5. Discuss the feature with stakeholders and design mockups

6. Developers work with content editors to create the feature

7. Quality assurance testing (and usability testing if timed well)

8. Launch

FEEDBACK PROCESS Analysis and implementation

#delightfulUX2015


Search (not a page unto itself)Search engine results page (SERP)Record displayMy Account

LoginSummaryItems outRequestsFinesMy listsMy reviewsMy authorsAccount settings

THE PAGES

#delightfulUX2015


SEARCH

#delightfulUX2015


“All” searchSEARCHDesktop

Mobile

#delightfulUX2015


Search tabs need reconsideration. This has now been changed for mobile.

Pros and cons to Google-style search, especially when it doesn’t include all the content.

“Catalog” label is (was) important to some.

Search box should always be visible. This is now true on mobile.

“All” searchSEARCH

#delightfulUX2015


New searchSEARCHDesktop

Mobile

#delightfulUX2015


People have a love-hate relationship with the modal, but no one misses the “New search” button.

New searchSEARCH

#delightfulUX2015


LimitsSEARCHDesktop Mobile


Digital users want digital holdings broken down to specific formats.

“Checked in at” means “owning library” to some, but this represents available now copies only.

Subject (Genre, Topic, Place, Time Period) not utilized enough because they are particularly difficult to grasp.

LimitsSEARCH

#delightfulUX2015


SEARCH RESULTS (SERP)

#delightfulUX2015


Cover art, title, series, author, and publication dateSERP DATA

#delightfulUX2015

Desktop Mobile


Cover art requires more vertical space, which means more scrolling.

Cover art adds load “weight” causing concern for user patience and mobile limited data plans.

Series links are overlooked but were even less visible under the author statement.

Despite displaying series information with the title, people still often use publication date to determine book sequence.

Cover art, title, series, author, and publication dateSERP DATA

#delightfulUX2015


Ratings and reviewsBOOKLENS

#delightfulUX2015


Presenting the three rating possibilities - average rating, predicted rating, and your rating – is not clear.

Ratings and reviewsBOOKLENS

#delightfulUX2015


Collection, duration, and summarySERP DATA

#delightfulUX2015

Desktop Mobile


Call numbers only display if inside the library so the correct call number is shown.

Digital formats are included after the collection statement.

Is this now too much data?

Collection, duration, and summarySERP DATA

#delightfulUX2015


AvailabilitySERP DATA

#delightfulUX2015


What does available mean?

AvailabilitySERP DATA

#delightfulUX2015


Title status (logged in)SERP DATA

#delightfulUX2015


Thought this might have had more impact than we have heard.

Finding text that conveys all that data on a button next to the functionality took some effort.

Title status (logged in)SERP DATA

#delightfulUX2015


ADD TO LISTSDesktop Mobile

#delightfulUX2015


Label Possibilities: Add to List, Save For Later, Add to Wishlist, Add to Bookbag, Add to Cart

Hard to offer full set of features with fewest clicks for all user levels.

ADD TO LISTS

#delightfulUX2015


RECORD DISPLAY

#delightfulUX2015


DetailsRECORD DISPLAY

Desktop Mobile

#delightfulUX2015


Using external content alongside internal content can be difficult to present seamlessly.

Is it better to offer the “most useful” data or all the data for the user to decide what is most useful for them?

Lexile data needs to be searchable to be truly helpful.

DetailsRECORD DISPLAY

#delightfulUX2015


You may also likeRECORD DISPLAYDesktop Mobile

#delightfulUX2015


Cover art is a good selling point for recommendations but not as a delivery means for title/author exclusively.

A small carousel (fewer entries than visible number of slots) is messy.

You may also likeRECORD DISPLAY

#delightfulUX2015


MY ACCOUNT

#delightfulUX2015


SummaryMY ACCOUNTDesktop Mobile

#delightfulUX2015


Importance of each box depends on the person and the content.

In mobile view, scrolling for all the content is less evident.

SummaryMY ACCOUNT

#delightfulUX2015


Items out and OverDriveMY ACCOUNTDesktop Mobile

#delightfulUX2015


What content was most critical to display is subjective.

Mixing physical and digital titles hasn’t caused too much confusion; however, displaying circulation limits has.

Items out and OverDriveMY ACCOUNT

#delightfulUX2015


Amy M. [email protected]

Amy [email protected]

Hennepin County Libraryhttp://www.hclib.org

QUESTIONS

#delightfulUX2015

Http:// BUILDING DELIGHTFUL ONLINE USER EXPERIENCES Amy M. Drayer Senior IT Developer Front end...

Documents

Transcript of Http:// BUILDING DELIGHTFUL ONLINE USER EXPERIENCES Amy M. Drayer Senior IT Developer Front end...