Information Architecture
The science of design.
When I was a child I wanted to be an architect. I’m embarrassed to tell you why but I’ll tell you anyway, Mr. Brady. Please tell me you’ve seen The Brady Bunch. When I was younger reruns of The Brady Bunch was always on TV after school. Mr. Brady would be in his office sitting behind a big desk with his blueprints laid out on the top. He’d roll them up and slip them into a big tube and close the lid… that was so cool. So fast forward a dozen or so years and I’m sitting in a drafting class in high school with a glazed look on my face. What did I do? I can’t do this! I am horrible at this… so much for a career in architecture! Little did I know I’d be dabbling into an industry where I could in-fact make my dream come true of being an architect… well, sorta.
According to CareerFoundry.com Information Architecture or IA is the science of organizing and structuring content in a logical, user friendly way. So I’ll never draw up blueprints in the conventional sense but that’s ok, I’ve discovered Information Architecture and it’s pretty cool.
Heuristic Evaluation
And with my foray into Information Architecture, or IA as I’ll refer to it from here on out, I’d like to share with you my first steps and how this project began. Heuristics are general rules that describe common properties of usable interfaces. In other words a heuristic evaluation is a usability process geared to single out design issues with a user interface. I began this process by closely inspecting the target website, ILoveNY.com. I chose four pages to inspect.
- The “Home” page
- The “Places to Go”page
- The “Finger Lakes” page
- The “Plan Your Trip” page
Using the template provided by the Abby method, which gives us ten guidelines to use for our evaluation. Asking ourselves these questions, is it…
My first go at it I was Mr. Positive Pauly. Every box was green and every comment was pleasant or encouraging. I thought for a second and realized that this is not how it’s supposed to be. There needs to be some sort of positive negativity going on here. Everything about this site can’t be all peachy. There must be some issues. So I started over and tried to examine the data with more of a critical lens. I did find some issues here and there with the site. I do feel that I could have dug a little bit deeper into the layers of the pages but as my first go at it I feel that I did a good job. The overall goal was achieved and I learned how designers inspect their content with a microscope scouring the lenses for bacteria that will infect their users. So now I’m going to move on to sitemaps.
Sitemaps
What is the purpose of map? Simply put, a map’s primary purpose is to help you travel from one location to another. We use maps all the time, don’t we? Now more so with the advent of mobile technology and global positioning satellites. We can go anywhere at the drop of a dime. All we need to do is type the address or just search for it online and we can find out how to get to where we are going very easily. So too with websites. With the use of sitemaps we can plainly see how the website is laid out and what the pages are and where they fall in with the navigation. Sitemaps are a great visual to get a birds eye view of the website you are on. With the ILoveNY.com website I mapped out the primary, secondary, and utility bar.
The map on the bottom left is the original sitemap and the one on the bottom right is the revised map. You can see here that the original sitemap has the Home page along with the Utility bar toward the top. You can also see the primary navigation bar in green with the pages according to the site’s structure. Under the primary navigation bar you see that these pages are the secondary navigation. This is a simple layout that the more you dig into the website’s inventory the more complicated the sitemap is. The revised map on the bottom right is based off of the data synthesis from the card sorting exercises which leads me into my next section.
Card Sorting
Card sorting is a research method for discovering how users interpret and categorize information. This portion of the project was just as frustrating as it was gratifying. I did enjoy the process but at times it was a struggle for me to be able to synthesize the date to come to a conclusion. The first step I took in this process was to create my cards. I took 50 pages from my website I was analyzing, ILoveNY.com, and gave the pages similar names. Naming the cards something similar to the page name but not directly the same as to not lead the user into answering the test the way you want them to. They are forced to translate the names of the cards and place them where their mental model thinks they should go.
After the cards were created I began to look for some users to test. I went about the card sorting tests a couple of different ways. I started out by doing three Open Card Sorting tests in person.
This was a great method as I prefer dealing with people face to face and interacting with the user. Time not being on my side so I had to iterate and conduct the rest of my tests via usabilitest.com. This way was definitely quicker and easier to collect the data. For which I am very thankful.
So from conducting the open card sorting I had to synthesize the data that I uncovered. There was a lot of information to sift through. As I labored over the data for quite some time I started to realize that the main content where there was some confusion was in regards to the “Contact” page. There wasn’t one. The main contact page was on the footer and not very easy to find. I came to the conclusion that the page needed a “Contact” page and to have that page and a few other in the dropdown to promote communication with the website. I added the “Newsletter”and “Contact” to the secondary navigation and or to the utility bar. Either recommendation I believe would be sufficient to remedy any issues with the lack of a contact page.
From the open test I went to the closed card sorting test. I made the recommended changes to the categories and conducted the test and 5 out of 5 users inputted the “Contact” page under the “Contact” page label. I think that one little change will assist the user with their need for assistance with the website or for further communication for other reasons.
In the end I think I was successful in the outcome of my tests and I was able to implement the changes I felt the data was telling me to do… great, now I’m listening to data in my head. Now it’s on to the User Flow.
User Flow
The user flow is a diagram that displays the complete path a user takes when using a product. Which way are they going? It’s like a choose your own adventure book? Do they even make these anymore? Which path is the user going to take? If they go to the wine tasting event page and then add the event to their trip planner, can I display what those steps are going to look like? You bet. Take a look below to see how a user flow looks. Mine is top notch, I think.
As you see my user flow has the statement and task at the top. To the side you see the legend that describes what is in the flow and the main focal point is the steps that are laid out for you.
So in conclusion I learned a lot from this unit and my main take away is that IA is such a crucial part of the UX process. How do things work, do they work, why aren’t they working? These are all questions that a solid IA evaluation can answer.
