Website Usability Process Book

Interaction Design I

Process BookUsability study of the UNL website

UNIVERSITY OF NEBRASKA - LINCOLN

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

User Centered

Design

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 FormatMethodology: Task based with moderator5-10 minutes Introduction & background questionnaire30-45 minutes Task based interview5 minutes Exit questionnaire & debriefingApproximately 1 hour Requested time commitment

Who we tested103 participants, having the following profile characteristics,

No 27Yes 76

TOTAL 103

Both 48Parents 2Student 53

TOTAL 103

What they areFaculty / Alumni 7Parent of Prospective 5Prospective Student 8Prospective UNL Student 13UNL Student 45Non-UNL University Student 25TOTAL 103

Year in SchoolN/A 54Freshman 3Sophomore 13Junior 14Senior 15Sen+ 4TOTAL 103

Football/Sports 25Brochures 7Staff 21Reputation 47Advertisements 4Alumni 10Scholarships 40

Campus Visit 44Cost 58

TOTAL 103

Female 51 Male 52 TOTAL 103

Gender Age15-20 1320-30 5830-40 440+ 28TOTAL 103

ResidenceIn-stateOut of state TOTAL 103

8716

Who is responsible for choosing a school

What factors influencedyou when choosing?

Have you seen unl.edu?

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%23%

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

> 2 CLICKS

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

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

> 5 CLICKS


Where is Graphic Design?

PROSPECTIVE STUDENTCOLLEGE OF ARTS AND SCIENCES

COLLEGE OF JOURNALISM & MASS COMMUNICATIONOTHER

27%

24%11%

38%

OFF CAMPUS SURVEYS(88 PEOPLE)

27%24%

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

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

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


Where is Web Design?

OFF CAMPUS SURVEYS(88 PEOPLE)

OTHER

SEARCH BARARTS & SCIENCES

PROSPECTIVE STUDENT

11%11%

23%

16%

11%

50%

23%16%

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

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

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

From on-campus home page:

Where is Advertising?

41%26%

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

> 2 CLICKS

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 CLICKSOnce on the Prospective Student page, visitors would need to click 4 more times before landing the Advertising home page.

> 5 CLICKS


Where is Graphic Design?

COLLEGES & DEPARTMENTSSEARCH BAR

PROSPECTIVE STUDENT

NO WHEREOTHER

50% 12%

20%

9%9%

ON CAMPUS SURVEYS(34 PEOPLE)

20%12%

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

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

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


Where is Web Design?

ON CAMPUS SURVEYS(34 PEOPLE)

OTHER

PROSPECTIVE

FACULTY AND STAFF

NOWHERE

SEARCH Bar

COLLEGES AND DEPARTMENTS

11%8%

9%

26%

12%

12%9%

32%

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

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

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

Comparison:

What’s your impression?

2020

2229

3837

4439

3441

%

%

%

%

%

%

%

%

%

%

%

%

%

%

%

%

%

%4149

4050

4856

2762

ADVERTISING

GRAPHIC DESIGN

INSPIRATIONAL HIGH TECH CLEAR

EASY TO USE FRIENDLY INFORMATIVE

ATTRACTIVE

PROFESSIONAL EASY TO FIND

Webpage RatingsBased on a scale from 1-5. Results

indicate sum of positive numbers

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.

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.

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.

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

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

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

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 mis-representing 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 user-centered design is wireframing,

concepting and prototyping.

Like Charles Peirce’s model for interpreting meaning,

UX design is iterative.

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.

ABOUT PROSPECTIVE STUDENT CURRENT STUDENT FACULTY

Article TitleRead more here.

UNL Copyright2013

UNIVERSITY OF NEBRASKA-LINCOLN

ABOUT PROSPECTIVE STUDENT CURRENT STUDENT FACULTY

APPLYACADEMICS

ACADEMICS

TUITION VISIT

COLLEGES AND DEPARTMENTS

AREAS OF STUDY

HIXSON-LIED

Article TitleRead more here.

UNIVERSITY OF NEBRASKA-LINCOLN

Prototype 1by Amanda Kessler, Caroline Wilson, Joshua Thorne

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.

ABOUT AREAS OF STUDY EVENTSDEGREES

HIXSON-LIEDSchool of Fine and Performing Arts

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

GRAPHIC DESIGN

UNL > HIXSON LIED

PROGRAMSWITHIN THE HIXSON-LIED COLLEGE

GRAPHIC DESIGN

FACULTY

OPPORTUNITIES

RELATED INTERESTS

ABOUT

COURSES

UNL > HIXSON-LIED > GRAPHIC DESIGN

Pr ospe ct ive Student

Current Student

Al umni Facu lt yVisi to r

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.

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.

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.

Prototype 2by Tiffany Wieser, Rachel Kocarnik, Ooran King, and Joey Gentzler

SEARCH CAREERS/MAJORS/INTERESTS

GRAPHI|

WEB DESIGNGRAPHICDESIGN ADVERTISING

COPYRIGHT INFO

APPLY VISIT

EVENTS

FINANCIAL

STUDENT LIFE

APPLY VISIT FINANCIAL STUDENT LIFE EVENTS

PROSPECTIVESTUDENT

Course MapAbout UsV irtual Tour Featured Work Legacy

ABOUT 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 design-ers with lasting skills that make them valuable to clients and employers.

Virtual Tour

Map Your Courses

Featured Work

Legacy

MEET THE PROFESSORS

Home > Graphic Design

COPYRIGHT INFO

APPLY VISIT FINANCIAL STUDENT LIFE EVENTS

PROSPECTIVESTUDENT

BA BFA MFA

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.

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.

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

There Is No Place Like NEBRASKA

University of Nebraska LincolnSearch

Login

Future Students Current Students Academics News/EventsStaff Alumni

Visit Colleges and Departments UNL Today

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 sceleris-que eleifend. Cras pulvinar nisl vel sollicitudin laoreet.

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

Login

Alumni

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:

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.



Login


















Login
















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

• 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

Graphic Design

• New page design • Betterflow• Login screen, student works ( Portfolio ) , and

staff at easy access• More graphics ( This is a Graphic Design Page )

Documents

Website Usability Process Book