Background Research

This assignment had me do one of the old standbys in UX design: redesign a website with affinity diagramming and wireframing. I’ve taken a couple web programming courses and I’ve done a website redesign as the quarter-long project for HCDE 437, the web design course that this rapid UX prototyping course replaced. However, I relied heavily on my teammates for the wireframe, and I played a supporting role then.

The topic was the DUB website. DUB is the interdisciplinary consortium for human-computer interaction majors at the University of Washington. It brings together people in Informatics, Bioinformatics, Computer Science, Interaction Design, and my department HCDE. Ironically, the DUB website has been rather poorly-designed. Although there have been recent improvements, for years, even after the Web 2.0 revolution, the DUB website echoed the design the infamous Craigslist and Reddit.

There were a few criteria for this project. The redesign must include:

• Announcements
• Directory
• Calendar
• Seminar: information about the weekly seminar series
• Research
• Membership: login portal to edit information

I’ve used a mix-match of different web prototyping tools. I haven’t had much experience with doing wireframes in Photoshop or Illustrator, largely due to cost prohibitions. However, I have used UXpin, Axure, and Visio for various stages of the process — in desperation, I’ve even used PowerPoint, Publisher, and Microsoft Expressions Blend. For this project, I was encouraged to use Axure, since it offers a free student license and for its high-functionality.

My experience with Axure has been spotty — I used it for static wireframes in a business course where were were designing an app. Axure was a bit overkill for this — even using Publisher would have worked better, but I did gain valuable experience in Axure.

I began to look at the DUB website. For a website of the HCI group at a respected university, it was quite poor.

There have been complaints about the DUB site since before I joined HCDE. However, I don’t think a simple redesign will solve all of these problems. Many of the issues are with the lack of updates on the blog (a content-management problem), unusable calendar (a plug-in problem), among general usability problems. I also heard of some issues with the faculty/researcher profile, which prompted the membership portal criteria.

Knowing that I couldn’t fix all of the site’s problems, I set out to focus on a couple key changes that would modernize the website, and leave much of the rest alone.

I felt the need for a single-page scrolling website. The philosophy behind a single-page site is to match the intuitive nature on a touchscreen to simply continue scrolling, rather than to make the conscious decision to click a link to a new page. Scrolling is by nature, but clicking is a decision.

Summary:

• Axure for website prototype
• DUB website needs work
• Focus on a few key modernizing touches

Setup and IA

For the most part, I decided to keep elements of the site. In wireframes, the visual flourishes aren’t covered and imaging where these sorts of design choices would apply would be a waste of my limited amount of time to work on this project.

I started with downloading and installing Axure 7.0 RP. Once there, I set up the standard 960px, 12-column grid. This is the standard of collumning that I learned last year in web development. Although this site is not responsive, the 12 collumn design helps with porting to other screen sizes, as necessary.

The first major decision was the site’s information architecture. Of the required elements, the most important will need to be closest to the top. Based on what I know about DUB and websites, I chose the order as:

1. Announcements
2. Seminar
3. Research
4. Directory
5. Calendar

In the DUB site’s current state, I have my reservations on whether having the announcements at the top is a good idea, since it isn’t frequently updated. However, again this is a content management issue, not a design issue.

The DUB seminar is a weekly talk that occurs during the school year, given by DUB faculty, visiting scholars, or industry professionals on a weekly basis. Apart from the research collaboration, this is DUB’s contribution to the UW community, and probably its most prominent and well-known.

The directory and calendar are not particularly important on the current DUB site, but they could easily become so if the information is maintained better and a more usable calendar plug-in is used.

The membership login is the only element to not fit into the single-page IA design. Since it requires a login and is only relevant to certain users (DUB members, rather than general public or visiting scholars), it need not be as prominent.

Implementation in Axure

I started putting elements down in Axure. By reusing UI elements and not reinventing the content layout of most of the sections, this was relatively-quick and eventless work.

Navigation Panel

When it came to building the single-page design, things got weird. Single-page design websites work by having certain elements remain in a fixed position, no matter how far you scroll. This allows for navigation between the different sections, as well as a serving as a signifier (as in an indicator of location within the website).

Jumping between different place on the webpage typically involves <a> anchor tags. This allows for certain locations to be identified and permits jumping between them on the same page. On Axure, any element can be an anchor. I created my tags so that they would encode the Y-position data — using the [[Target.y]] property of each tag, the text updated to the Y-position data, which allowed the navigation bar to know where to scroll for each section.

A single-page navigation panel could be accomplished a number of ways in JavaScript and CSS. The simplist implementation of this would be to assign the navigation panel to a fixed position. The navigation panel would always remain in the same location regardless of where the page scrolled to, with respect to the browser window. Axure seems to allow this with their “Pin to Broswer” option, but I could not find it. All the tutorials and how-to guides I found showed where to find it on Axure 6.5 or older, but the location changed in Axure 7.0.

Not discouraged, I looked up guides on how to do a single-page design specifically in Axure 7.0. I found a very informative series of blog posts (1) (2). Essentially, this showed me how to make my navigation panel, but with more dynamism. This method allows the navigation panel to move slightly to react with the user’s scrolling (unlike with fixed position) and give more options for padding and spacing.

When using the navigation panel to scroll, the current section’s color changes to highlight it. The navigation panel is also linked to the specific sections. When moving, I gave a 500ms linear scroll, so it’s clear to the user that they are scrolling to the appropriate section.

Anchor tags on Axure caused me quite a bit of problems. Following the methods outlined in the blog, I had an issue where each link on the navigation would pull me back to the Home level. After trying to fix everything, I decided that I would give up on it and make set the element as visible. Sadly, this did the trick. The anchor tags being set to visible instead of hidden made it work. To hide them, I set opacity to 0%, making them invisible.

Another problem that arose was the issue of scrolling speed. The navigation panel’s highlighting of the section and positioning is set by the OnWindowScroll Page Interaction. Axure records the user’s viewing position and the site updates the navigation panel appropriately. Unfortunately, it seems that Axure’s functionality falls short here — I found that if you scroll too quickly, OnWindowScroll can be tricked, which means that navigation panel does not move with it. As such, I had to put some additional hacks to ensure that navigation bar moved back to the top. However, it is far from perfect and it seems jittery at times.

Photo Carousel

A photo carousel is a common way of displaying images. On the DUB website, after figuring out the navigation panel issues, I felt the website looked a bit bare. I felt like a photo carousel would be a good space breaker.

I went to look for a how-to guide on creating a photo carousel in Axure, and it turns out that its the subject of an Axure-made tutorial. Although this provided me with a good starting-point, I was unsatisfied with it. There was no way to go from the 4th photo to the 1st photo, and vice versa with the arrow navigation. Also, the boxes on each photo merely showed the photo’s position in the carousel — they were not links to the photo in that position. I made adjustments to the tutorial to allow for this.

Membership portal

I wanted to make a largely-seamless membership portal for my redesign. Creating an entire login system and testing it for security purposes seemed like a bit of an overkill for a simple consortium page. Even if I didn’t have to design all of these features during in a wireframe, it would imply to the developers that they would have to later on.

At the University of Washington, we have the NetID system that is a single-sign-on. This means that UW-affiliated users can log into their NetID when prompted, and access a variety of UW services in a safe and secure manner, without having to sign-in for another 8 hours. I felt like DUB would heavily benefit from using NetID.

I made my login page a mere screenshot of the NetID login system, with a button that proceeds to the membership portal, where users can change their information.

Summary:

• Navigation required a lot of working with Axure-specific tools and problems
• Photo carousel provided key homepage space breaking
• Membership login portal and the UW ecosystem

Feedback and Lessons Learned

Axure prototype on AxShare: http://ovvd05.axshare.com/

The feedback that I got was largely positive. My peers liked my single-page design and took away the strongest points of my design (single-page scroll, membership login), as I had intended.

One of my peers, Torin Blankensmith, also did a single-page scroll design, but I thought his membership portal was more elegant than mine. What he did was place the membership login in a similar location as mine, but made it an insert window pop-up. This made his member login page a bit more seamless than my idea.

I learned a lot about Axure. This time around, I felt much more comfortable with Axure than back when I used it to make static wireframes for my business class. However, there were some real problems with Axure that required a different set of skills than should be necessary with creating website prototypes — like having to create hacks for the navigation panel and dealing with the photo carousel.

All-in-all, I’d say that I had a good experience with Axure. However, the more complex interactions that I tried to create would be relatively trivial in JavaScript/JQuery, but required research and finagling to work in Axure. Unlike doing the same in programming languages, I felt like the skills I learned while doing this has few applications outside of Axure.

Summary:

• Good peer feedback
• Axure is a powerful tool, with reservations