Day: February 11, 2014

Information Architecture and Wireframing

This week it was time to plan out how I was going to redesign my app. Before going back and looking at all of my usability research to see how I was going to change this app, I had to learn more about information architecture and wireframes. I have used wire frames several times for designing purposes, and I have had a little bit of experience with information architecture. However, I have never used it for the design of an app, so research was crucial for this step.

First I began my research in Information architecture. I was not very clear in what exactly it was. One site I found explained that that information architecture is a profession that does not have a clear-cut description. It had some great quotations from three different workers that help give insight into what they do.

In a nutshell, “the information architect must focus on a number of things: the target audience, the technologies related to the website, the data that will be presented through the website, and (hopefully) the results of early usability tests regarding the site ideas.”

The main goal of the information architect is to develop a flow that is intuitive, fun, and easy for the user.

There are three main steps that must be done:

  1. Research the audience and the Business
  2. Analyze Data
  3. Develop labeling/navigation/site structures

I have done a lot of research and testing of my application. I have also done a lot of analyzing of the issues and potential fixes for my app. That means I had to focus on the last step. I was to develop the flow of my application by labeling and visually demonstrating the navigation from one screen to the next.

The next site I saw was titled, Designing for Mobile, Part1: Information Architecture. This website when into detail about the different types of navigation that mobile devices use. It also stressed the importance of usability testing to understand what must be done about your product and to ensure your changes are beneficial.

The different types of navigation used are:

Hierarchy – this method can be very nice because it is very organized and structured

hierarchy

Hub & spoke- this is the default pattern of the iPhone. This can be very familiar to those users. It gives and central index and users can navigate out.

hubandspoke

Nested doll- this is a very linear type of navigation.

nesteddoll

Tabbed view- this type of navigation ties evtything together with a toolbar menu.

tabbedview

Bento Box/Dashboard- this type of navigation can be very complex. It is best on a tablet.

bentobox

Filtered view – filtering navigation is great for searching, it filters out options and keeps the ones that they may be looking for

filtered

In my redesign I used a mixture of these navigation techniques.

In researching what information architecture is I noticed some overlaps to my software engineering class. Although in that class we are focusing on the functionality of the application, and this is more of the design and how the user uses the app, they use similar methods to demonstrate relations and flow.

I also found a series of sites that had images to demonstrate how information architecture is displayed. I found this very helpful, because seeing examples cleared up any gaps I had in my head. I liked how there were so many directions that you could go in when visually representing information architecture. Some were very simple with just squares, titles, and arrows. Others were very detailed incorporating their wireframes into the information architecture. Some were a mixture of the two. I ended up going with the more detailed version because it helped me visualize what was going on, on each screen, and the flow-taking place between them.

The links are below:

I then began my research on wireframes. Although I had a lot more experience sketching wireframes, I thought it was important to research them more in depth before jumping into it.

Although I have created wireframes for websites before, I have never created a wireframe for an application before.

The first website I looked at was called,  Tips for Wireframing a Usable Mobile App Interface. According to the site, “Each application is made up of a series of pages called views. These views may contain important content, a table listing, photo gallery, numerical dial pad, or any number of features.” This was a great staring point. It is important to understand the terminology that is used in the industry. Views are the different screens that are displayed in your application.

One concern of mine before staring was not creating all of the views/screens because I may have not thought of a certain possibility, or needed screen. The site suggested planning out the navigation using arrows to realize every view that is needed. By thinking of what happens when every bottom on each screen leads to, everything will be covered.

This is another reason that I incorporated my wireframes into my information systems. It ensured that I did not miss any possible views.

The next site that I found was very useful for understanding how to read a wireframe. This could be really helpful for anyone who has never created or read a wireframe because it explains what all of the symbols mean.

After that I looked at a site called  5 Steps for Wireframing and Paper Prototyping Mobile Apps.This was clearly a website explained the 5 steps of wireframing. According to the site the steps are:

  1.  Focus on the Primary Task
  2.  Create Use Case Scenarios
  3.  Identify Mental Models
  4.  Check the Flow
  5.  Find the Method that Works for YOU

This site emphasized the importance of testing. It is important that users can look at your design and workflow and easily figure out how to navigate it. Testing will help show you if your design is doing its job, and what is needed to fix it.

The following sites were more examples of wireframes. Looking at examples are always very useful when starting a new designed. They inspired in how I wanted to make my own designs.

The links are below:

The last website I researched was called wireframing with inDesign and illustrator. I found this site the most helpful in terms of creating my wireframes. It suggests the best way to display each wireframe.

The site says that they start their design in illustrator than put each screen as its own page in InDesign. I used this technique when creating my own wireframes.

Advertisements