Website Usability Process Book

Interaction Design I

Process Book

Usability study of the UNL website

User Centered Design U NIV E RSITY OF NEBRASKA - LI NCO LN

Research Team: Jennifer Evans, Joseph Gentzler, Amanda Kessler, Ooran King, Rachael Kocarnik, John Marshbanks, Matthew Moore, Nicholas Sharon, Vantha Tep, Joshua Thorne, Tiffany Wieser, Caroline Wilson Professor: Colleen Syron Fall 2013

is a design philosophy that puts the user of a product, application, or experience, at the center of the design process.

In UCD, a designer strives for a detailed understanding of the needs, wants, and limitations of the people who will use the end product and then makes design choices that incorporate this understanding.1

Question:

How user friendly is the University’s website?

Step 1:

Design the test

Goal:

Gather Qualitative & Quantitative Research Test Format Task based with moderator Introduction & background questionnaire Task based interview Exit questionnaire & debriefing Requested time commitment

Methodology: 5-10 minutes 30-45 minutes 5 minutes Approximately 1 hour

Who we tested 103 participants, having the following profile characteristics,

Age

Gender

Residence In-state

87

58

Out of state

16

30-40 40+

4 28

TOTAL

TOTAL

103

Female

51 52

15-20

13

20-30

TOTAL

103

Male

What they are

Year in School N/A Freshman

54 3

Sophomore Junior

13 14

Senior Sen+

15 4

TOTAL

103

103

Have you seen unl.edu?

No

27

Yes

76

TOTAL

103

Faculty / Alumni

7

What factors influenced you when choosing?

Parent of Prospective

5

Football/Sports

Prospective Student Prospective UNL Student

8 13

Brochures

7

Parents

2

Staff Reputation

21 47

Student

53

Advertisements Alumni

4 10

TOTAL

103

Scholarships

40

Cost

58

Campus Visit

44

UNL Student 45 Non-UNL University Student 25 TOTAL

103

TOTAL

Who is responsible for choosing a school 25

103

Both

48

Step 2:

Conduct the interviews

Determine how easy it is to navigate to three very popular areas of study: Advertising, Graphic Design, & Web Design.

From off-campus home page:

Where is Advertising?

33% Once on the Prospective Student page, visitors would need to click 4 more times before landing the Advertising home page. > 5 CLICKS

23%

10%

After clicking on College of Journalism & Mass Communication bubble they would then click on a link to the advertising home page.

Ten percent of people clicked on the Business college which would not lead them in the right direction.

Another ten percent clicked on Colleges and Departments where clicking on Advertising would lead them to the home page.

> 2 CLICKS

> 2 CLICKS

OFF CAMPUS SURVEYS (88 PEOPLE)

38%

11%

27%

24%

PROSPECTIVE STUDENT COLLEGE OF ARTS AND SCIENCES COLLEGE OF JOURNALISM & MASS COMMUNICATION OTHER

From off-campus home page:

Where is Graphic Design?

27%

Unfortunately visitors would need to click to majors, then click graphic design before they would be able to get to the desired page.

24% There is no clear path for visitors to take through College of Arts and Sciences. Graphic Design cannot be located through this page.

11% There is no clear path for visitors to take through College of Journalism and Mass Communication. Graphic Design cannot be located through this page.

OFF CAMPUS SURVEYS (88 PEOPLE)

23% 50%

11%

16% 11% 11%

PROSPECTIVE STUDENT ARTS & SCIENCES SEARCH BAR OTHER

From off-campus home page:

Where is Web Design?

23%

Visitors that were searching for the Web Design page that clicked on prospective student first.

16%

Visitors that were searching for the Web Design page that clicked on Arts and Sciences first.

11%

Visitors that were searching for the Web Design page that used the search bar.

From on-campus home page:

Where is Advertising?

41% Once on the Prospective Student page, visitors would need to click 4 more times before landing the Advertising home page. > 5 CLICKS

26% After clicking on Colleges and Departments, the user would then click Advertising which leads them to the home page. > 2 CLICKS

12% After searching ‘advertising’ the visitor could click on the first link which takes them to the College of Journalism. The college home page then provides a link to the Advertising home page. > 3 CLICKS

ON CAMPUS SURVEYS (34 PEOPLE) 20% 50%

12%

9%

9%

COLLEGES & DEPARTMENTS SEARCH BAR

PROSPECTIVE STUDENT NO WHERE OTHER

From on-campus home page:

Where is Graphic Design?

20% Users that visited the UNL website ON campus, clicked on Colleges and Departments.

12% Users that were searching for the Graphic Design, searched using the search bar.

9% Users who didn’t use the search box, clicked on Prospective Students.

ON CAMPUS SURVEYS (34 PEOPLE)

26%

32%

9% 8%

12% 9%

12%

11% COLLEGES AND DEPARTMENTS SEARCH Bar NOWHERE FACULTY AND STAFF PROSPECTIVE OTHER

From on-campus home page:

Where is Web Design?

26% Visitors that were searching for the Web Design page that clicked on the Colleges and Departments tab first.

12% Visitors that were searching for the Web Design page that clicked on the Search bar first.

12% Visitors that were searching for the Web Design page that didn’t know where to click.

Comparison:

What’s your impression?

Webpage Ratings Based on a scale from 1-5. Results indicate sum of positive numbers

INSPIRATIONAL

GRAPHIC DESIGN ADVERTISING EASY TO USE

ATTRACTIVE

CLEAR

HIGH TECH

20 22 38 44 20 29 37 39 %

%

%

%

%

%

%

%

FRIENDLY

INFORMATIVE

PROFESSIONAL

EASY TO FIND

34 41 40 48 27 41 49 50 56 62 %

%

%

%

%

%

%

%

% %

Step 3:

Make recommendations

Recommendation #1:

Reduce the number of clicks

From the Hixson-Lied College landing page users must click three more times to find information about all of the possible areas of interest.

Recommendation: From the main Hixson-Lied College landing page, provide a direct link to all majors and concentrations.

By organizing the majors & concentrations by schools, the topics users are looking for are hidden. Furthermore you are requiring users to have an understanding of how the College is internally organized before providing them the page they seek.

Group these “majors and concentrations” under a general name such as “Areas of Study.”

Renown usability expert Jakob Nielsen says “User often leave Web pages in 10-20 seconds, but pages with a clear value proposition can hold people’s attention much longer because visit-durations follow a negative Weibull distribution.”2 Given the fact that most users leave a site within 5 clicks, the probability of them getting to these pages is highly improbable.

How Long Do Users Stay on Web Pages? http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/ 2

?

Recommendation #2:

Add more “interest� pages

There are a lot of interesting topics being taught across the school that overlap with schools and majors. Add pages to talk about some of those topics (web design, interactive design, animation, mobile app design.)

If there is a concern that we are misrepresenting our current “majors�, copy can talk to the fact that the college is robust enough to offer hybrid concentrations.

Eventually the University should develop a degree program that addresses some of the more contemporary trends in design (motion, interactivity, web, animation,...) and clearly distinguish these the complementary nature of these classes across colleges.

Step 4:

Wireframe prototypes

An important aspect of usercentered design is wireframing, concepting and prototyping.

Like Charles Peirce’s model for interpreting meaning, UX design is iterative.

Prototype 1

by Amanda Kessler, Caroline Wilson, Joshua Thorne UNIVERSITY OF NEBRASKA-LINCOLN

UNIVERSITY OF NEBRASKA-LINCOLN Article Title Read more here.

ABOUT

P RO S P E C T I V E S T U D E N T

ACADEMICS

CURRENT STUDENT

TUITION

VISIT

FACULTY

APPLY

Article Title Read more here.

AC ADEMI CS ABOUT

P RO S P E C T I V E S T U D E N T

CURRENT STUDENT

FACULTY COLLEGES AND DEPARTMENTS

HIXSON-LIED

AREAS OF STUDY

UNL Copyright 2013

In our home page we wanted to be able to filter visitors unobtrusively without taking them away from the page itself. We also wanted to show some content about the university by having a large photo and news area that is dynamic. When a user chooses one of the four main tabs the large photo will move up revealing information pertinent to that chosen tab.

On default the prospective student page will already have the “Academics” button selected. That information is below and allows a user to look up areas of study within the different colleges and departments. The search bar this version of the site uses would be designed to look under tagged queries if the user doesn’t want to click through buttons and tabs.

UNL > HIXSON LIED

UNL > HIXSON-LIED > GRAPHIC DESIGN

HIXSON - LIED

GRAPHIC DESIGN

School of Fine and Performing Arts ABOUT

A R E A S O F S T U DY

DEGREES

EVENTS

ABOUT

COURSES

P ROGRA MS WITHIN THE HIXS O N -LIE D CO LLE GE A B C D E F G H I J K L M N O P Q R ST UVW XY Z

FACULTY

OPPORTUNITIES RELATED INTERESTS GRAPHIC DESIGN

This page continues to help prospective Hixson-Lied students to navigate to their areas of interest. By default, it opens at the “areas of study” tab. Other tabs contain information regarding the Hixson-Lied College. The next page focuses on the graphic design program within Hixson-Lied. Template wise this would change little across other areas of interest.

Prototype 2

by Tiffany Wieser, Rachel Kocarnik, Ooran King, and Joey Gentzler After testing and analyzing the functionality and structure of UNL’s website it became apparent there is still much room for improvement. We eventually arrived at the conclusion that to help users get to where they want to go in the least amount of time, they need complete control from the very beginning. The use of a simple preliminary navigation page, or “modal”, gives the user a head start by allowing them to choose a path respective to their individual status or goal.

Visi to r

Current Student

Pr ospe ct ive Student

Al umni

Our modal is broken up into five choices catering to visitors, prospective students, current students, faculty and staff, and alumni. Because of the possibility that some content may overlap with another section, users will be able to easily move between each designation in the modal at any time during their browsing. Aesthetically, the simplistic page and its few components would be accompanied by a background image slide show of different images representative of the university.

Facu lt y

PROSPECTIVE STUDENT

APPLY VISIT FINANCIAL STUDENT LIFE EVENTS

APPLY

VISIT

STUDENT LIFE

SEARCH CAREERS/MAJORS/INTERESTS GRAPHI| GRAPHIC DESIGN

WEB DESIGN

ADVERTISING

COPYRIGHT INFO

FINANCIAL

EVENTS

For the Prospective Student Homepage, we wanted students to be able to see and find what they came to the site for right away, the majors.

Knowing that there are over 150 offered majors at UNL and that could be overwhelming to look at, the best possible solution we came up with was a search bar where a specific major, college, or even interest could be entered and only relevant majors would then pop up. The majors would pop up in boxes that give a photo relevant to that major and clicking on it would give a short blurb about it before taking you to that specific major’s homepage.

Also included on this page would be a drop down banner on the top right. Again to keep the user from navigating page to page, the user can change their experience from prospective student to one of the other options seen on the home modal. This tab will be continuous throughout every page. Continuing with this theme, a connect tab is located on the right side of the page, which reveals links to; Facebook, Twitter and other social media, email address to ask questions, Live Chat, and a quick link to the Application page.

Across the top there is another link for the application page as well as links to visit campus, a breakdown of potential costs under financial, different events catered to prospective students, and more information on student life at UNL.

PROSPECTIVE STUDENT

APPLY VISIT FINANCIAL STUDENT LIFE EVENTS Home > Graphic Design

MEET THE PROFESSORS

About UsV

ABOUT

irtual Tour Course Map Featured Work

Legacy

The Graphic Design program prepares students to enter the dynamic arena of digital communication design, leading to an expanding array of professions including working for a large design studio, a marketing firm, a small startup, or as a freelance designer. Designers often work creating visual products, but an art degree with an emphasis in Graphic Design can also lead to careers in art direction, web development, corporate communications, and advertising.

At the heart of Graphic Design is effective communication: while developing a personal aesthetic and design values, students are also asked to form cohesive ideas, write design briefs and project budgets, and give presentations on their work. We strive to create designers with lasting skills that make them valuable to clients and employers.

Virtual Tour

Map Your Courses

BA BFA MFA

For the graphic design page, we chose to do a parallax layout. We decided to do this to keep all the information on one page. We think this is the most effective way so that we don’t have to open up a new page to find the information and then try to find our way back. The top menu bar is going to give you the same as the home page menu bar.

Then, we will have a second menu bar that will lock at the top of the page as you scroll down the parallax page. The page will automatically scroll down for you as you click an option on the second menu bar.

The faculty/staff information is the first thing on the page. This will make it easy to find someone to contact that can answer questions.

Then we added courses, featured work, Graduate’s current jobs, virtual tour, and about graphic design. We thought this information would be the most important to include on our page to inform prospective students.

Featured Work

Our team went in a very condensed, but refined direction with our redesign of the route to the Graphic Design homepage. As we have been learning in this class, it is so important to design for the user and what they ultimately want. We felt it would be in the users best interest to experience a modal as they approach the UNL homepage. This allows for one to have a tailored experience with distilled information that they need.

Once the user clicks on their specific title (in our case, the prospective student) they are lead to that particular homepage. Our prospective student homepage is a chance to get some interesting information into the mind of someone looking for a school. From this homepage, the user is able to type in what they are interested in, which leads them to the Graphic Design homepage. It was very important to us that the destination only by 3 clicks away, at the most. Our team definitely sees this as a minimalist approach to design, but a necessary change to the overload of often irrelevant information currently displayed.

Legacy

COPYRIGHT INFO

Prototype 3

by Jen Evans, Vantha Tep, Nick Sharon, John Marshbanks III

Taking a look at our usability test we noticed that users were unable to navigate to the Hixson Lied Home Page, but the Graphic Design Page without using the search box. So, based off these results from our test we suggest:

University of Nebraska Lincoln There Is No Place

Future Students

Alumni

Current Students

Visit

Login UNL start with a new face, a new home page, but not only just a new design to the home page we took a lot of the type because we didn’t want the reader to feel overwhelmed.

•

An ever better interface that we came up with was the use for a splash page that will pop up before you even enter the home page. The neat feature that we have added to the splash page is the feature to be able to login into your own personal account through unl.edu. You will be able to look up your current class schedule, a list of all your professors, campus and community events that interest you, etc.

•

You are now able to get to any department page within 3 clicks.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Vestibulum dignissim a lectus eu malesuada. Nulla facilisi. Morbi et rhoncus nibh, sit amet pharetra ligula.

Maecenas vel mollis sapien.

Proin ornare tortor vel magna vestibulum pharetra.

Pellentesque in eros sit amet lorem suscipit convallis.

Search

Login

Like NEBRASKA

Academics

Staff

Colleges and Departments

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque vehicula arcu eget facilisis volutpat. Nam quis tortor quis leo luctus suscipit.

Nam congue laoreet orci, vitae molestie leo scelerisque eleifend. Cras pulvinar nisl vel sollicitudin laoreet.

Alumni

News/Events

UNL Today

Etiam gravida magna a interdum hendrerit. Donec in arcu leo. Morbi dignissim sed tortor id eleifend.

Maecenas elementum hendrerit convallis.

Sed accumsan tincidunt neque nec euismod.

Phasellus fermentum pretium elit eget euismod.

Praesent quis elit quis diam

University of Nebraska Lincoln There Is No Place

Future Students

Current Students

Visit

Search

Login

Like NEBRASKA

Academics

Staff

Colleges and Departments

Alumni

News/Events

University of Nebraska Lincoln There Is No Place

Future Students

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque vehicula arcu eget facilisis volutpat. Nam quis tortor quis leo luctus suscipit.

Nam congue laoreet orci, vitae molestie leo scelerisque eleifend. Cras pulvinar nisl vel sollicitudin laoreet.

Current Students

•

Academics

Staff

Alumni

News/Events

UNL Today

Etiam gravida magna a interdum hendrerit. Donec in arcu leo. Morbi dignissim sed tortor id eleifend.

Maecenas elementum hendrerit convallis.

Sed accumsan tincidunt neque nec euismod.

Phasellus fermentum pretium elit eget euismod.

Praesent quis elit quis diam

The Hixson Lied College took on a slight make over as well • • • • •

Login

Like NEBRASKA

Visit

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Vestibulum dignissim a lectus eu malesuada. Nulla facilisi. Morbi et rhoncus nibh, sit amet pharetra ligula.

Maecenas vel mollis sapien.

Proin ornare tortor vel magna vestibulum pharetra.

Pellentesque in eros sit amet lorem suscipit convallis.

Search

Went with simplicity and clean look New page design Easy to navigate New design Keeping pages somewhat consistent throughout the entire website so it will be easy to navigate.

Majors is now listed on the page

Colleges and Departments

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Vestibulum dignissim a lectus eu malesuada. Nulla facilisi. Morbi et rhoncus nibh, sit amet pharetra ligula.

Maecenas vel mollis sapien.

Proin ornare tortor vel magna vestibulum pharetra.

Pellentesque in eros sit amet lorem suscipit convallis.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque vehicula arcu eget facilisis volutpat. Nam quis tortor quis leo luctus suscipit.

Nam congue laoreet orci, vitae molestie leo scelerisque eleifend. Cras pulvinar nisl vel sollicitudin laoreet.

UNL Today

Etiam gravida magna a interdum hendrerit. Donec in arcu leo. Morbi dignissim sed tortor id eleifend.

Maecenas elementum hendrerit convallis.

Sed accumsan tincidunt neque nec euismod.

Phasellus fermentum pretium elit eget euismod.

Praesent quis elit quis diam

Graphic Design • • • •

New page design Better flow Login screen, student works ( Portfolio ) , and staff at easy access More graphics ( This is a Graphic Design Page )