Research

rAlbum Paper Prototype Test

This week I started my user testing to see how my users react to the flow and layout of my application. I conducted this test with all of the knowledge I learned from the first round of paper prototyping.

For starts I made my wireframes very clear and defined as possible. I knew this was going to be extremely important for this round because my tester was going to be a senior citizen and I wanted everything to be clear and readable for them.

Next I made sure that the prototype was accurate to size. I was carful to create the prototype to be the actual size of the iPad. I even used my family’s iPad to compare the size, so I could ensure I was accurate with that.

I also did a little more research just to see if I could find any more examples of a paper prototype test. The video  I found was very nice. It had a couple of great tips, especially because they also used a tablet for their prototype. One of the things that they did that I really liked was using a piece of cardboard to make the paper tablet a little more weighted and more real. He also suggested using separate pieces of paper for the scenes, which I did in my last paper prototype test. I completely agree with this. Although it makes things a little confusing because there are so many of them, I feel like it makes more sense to the user. He also printed out each of the ui elements that he thought he may need. I also found that this was helpful in my testing. He also used tabs with his elements, which is something I may try in the future.

Overall I found this to be a very informative video. I highly recommend it for those who are paper prototyping for the first time.

I also took a look back at my first paper prototype tests, and critiqued them. I noticed a lot of improvement with my second video from the first one.

When testing I tried to encourage my user to express how she felt about the tasks so I could get a feeling of if I should make changes to my flow or layout.

Some of the things that I asked my user to complete took her a little while, however most of that was because it was the first time she had used the application. When certain tasks were repeated later on in the test, the user remembered exactly what to do to complete the task.

Her feedback was very positive. She felt it was very simple to use and felt she would have no problems using it in the future.

Although she had no negative feedback, I took note of the features she struggled with, for instance the ‘other’ button and have to consider if I want to change the layout of this feature.

Overall the font size seamed to work great. The only one I may want to make larger is the ‘comments’ because I noticed her getting closer to the prototype when reading the, Overall I was very pleased with my test. She was able to figure out all of the features and I was able to understand how she would use the application.

Here is the paper prototype video (click to play):

Paper Prototype

First Three Comps

This week I began to think about the user interface of my application. I weighed many different options and researched different interfaces for the iPad and for applications using books, since that is a common theme with my application. From the research I designed three very different look and feels for my application.

The research that I found were the following pictures:

link1 link2 link3

 

link4 link5 link6 link7 link8 link9

With those I began to design my comps. My favorite part of the design for each of the comps was designing the shelf for the albums. I enjoyed this so much because not only is it a key feature of my application, but there were so many different way that I could design it.

The first idea was one that was more of a realistic look. I got my inspiration for this by researching existing book applications today. Most of them used shelves and pages that looked like a real book would. I liked this for an older demographic because it would be more familiar to what they know. However I feel it is not very original and is somewhat over done.

The next idea I had was more of a sleek look. I used a black background and used more abstract images with bright colors for the items and writing. I was not a fan of this look for this composition at all. I think it visually did not translate as it looked in my head. Also, I feel that my demographic for this application would be very confused trying to use it. I may consider taking certain elements from this stage, however I do not plan on taking this approach.

The last idea I had was somewhat in the middle. I wanted it to look familiar enough for the users to recognize what was happening on the screen, but I wanted to put a creative spin on the app so it was separated from the others. I used light colors that I felt gave it an older feel. It is also very easy on the eye on like my second set of comps. This is my favorite of the designs I came up with.

Here were my comps for my application:

comp1

 

 

comp2

comp3

Overall I was very happy with this step. I was able to be very creative and think of completely different concepts for the UI for this application. Even though I was not happy with how one of them came out, it was a great process to be able to rule out that idea.

This time around was pretty similar to the last time. One main difference was that the first time I designed comps I was very focused on one theme for the app and had a difficult time thinking of three completely different ideas. This time I believe I accomplished this much better. I also made sure to avoid making my app look like wireframes and instead the user interface of what my application will look like.

Before I moved onto my compositions, I made updates to my information architecture.

Although I thought I had a better idea of how the information architecture was supposed to be formatted this time around it turns out I was still a little off. Even though I had the flow of the application all mapped out I needed more description of what each part of the application allows the user to do and how the user should interact with it.

After making my adjustments here is my new information architecture:

InfoArchRedo

More User Research and Personas

For this week I went back to find some more user research. Although the information that I found last week was a good start, I knew that I really needed to talk to some users before going ahead with this idea.

To do this I contacted three senior citizens and interviewed them, and contacted three people from the baby boomer generation and interviewed them with a few additional questions about the future.

I was able to find a lot of really great information with this set of interview questions. I made a few charts of data and further analyzed the information that I found in the report below:

Click Here to view it!

This was a much more helpful set of information because I heard it from the users themselves, and was able to find out the specific information that I wanted to hear.

I also had the chance to hear their reactions to my concept for the application itself. This would have been extremely difficult to find strictly searching online.

With this information I was able to create my two personas. Since I had experience creating a persona from the last time I created them, I was able to dive right into after analyzing my user research.

Although the strategy for finding my user research was much different this time then the first time, I feel they were both very useful. It is always useful to watch a user use a product and talk about it. However, the interviewing that I did in this week gave me a lot of great information to start of my application with.

The last time I went through the design process of the application I reflected back to my personas and user research several times, so I know how important these steps are to the future of this project.

Here are the two personas that I created for my new application:

personaHoward
personaLois

 

 

New App Idea & User Research

This week I started to brainstorm about more possible ideas. I decided to go in the direction of a different application idea. This app would target grandparents. The app would be a digital photo album where grandparents could flip through photos of their family. To make the application simpler for them to use, family members will upload the images from their end of the app. All the grandparents have to do is look through the album.

There will be some additional features such as audio recordings, video recordings, and ability to comment on photos, ability to add media to a different album.

I thought the next important step would be my user research. For this step I started to research how senior citizens use technology. The first article that I found said the top best tablets for senior citizens. It also expressed the needs of senior citizens. It said, “But people do grow older, and as we do, our priorities tend to change. Senior citizens often find themselves looking for products that are powerful yet easy to use, not only out of a desire to simplify, but also because older buyers can often afford exactly what they want.” With this in mind I will have to make sure that I make this application very simple to use and easy to learn. The popular tablets that senior citizens use were the iPad mini, the Kindle, and the Nook.

The next article I looked at had some great statistics. According to the article, “more than 50 percent of seniors going online.” This means that more and more senior citizens are using the Internet. Along with the increase in Internet we could assume that other technologies are getting more popular in their age group. I started to take a closer at what specifically these users use the Internet for. The article says, “Email…is widely used, with 86 percent of Internet users 65 or older using it, and 48 percent of them doing so every day.” This means that senior citizens like to use technology as a way of keeping in touch with others.

The next article I saw gave a supported the statistic of 50% of senior citizens using the Internet. It said that, “This is changing the way people gather, share, and create information. And it is changing the way they communicate and act in groups.” This is really important to keep in mind. The way that people keep in touch today is changing. My application would provide a great way for them to stay in touch. It is an app that falls into the interests of the users. The site also had some great graphs of statistical information seen below:

slide-3-1024 slide-6-1024 slide-8-1024 slide-11-1024 slide-12-1024 slide-13-1024 slide-22-1024 slide-23-1024

According to the next article, “ability to help seniors stay engaged with current events and find information quickly with the click of a few buttons. Additionally, the women reported going online to seek out old friends, connect with new acquaintances and find support through social networks.” Again this gives me insight into what senor citizens like to use technology for. Practical uses are the major benefit for them. Ways to keep contact with others is a major use for people of this age range.

The last article I looked at concentrated on women senior citizens. According to the article the Internet has many major benefits to those that age. It said, “Internet use among older people reduces loneliness, increases social interaction and may result in a significant reduction in depression.” These benefits show the importance that technology can have in someone’s life. As tablets become more and more popular and app like this meant for connecting with family and memories can be used often. Women over 60 are using social media to stay connected and meet people. The convenience that technology provides is fantastic.

After my research I have a better idea of how my user would use the product and the sorts of things that they would be interested in looking for. I will make sure to reflect upon this research as I continue along with this process.

Here is a compilation of some of the important information about my users for this application:

user research

A New Tablet App: Three Concepts

This week I started to develop different concepts for applications that I could create. To do this I brainstormed about things in my life that give me problems, that way I could try to think of an app that would solve that problem.

The first idea that I came up with was one to help with grocery shopping. The idea came to me when my roommate and I were struggling to find just a few ingredients at the grocery store, when we had to hurry back to our room.

Here are some links to some of the competition I could have if I followed through with this idea:

http://www.talkandroid.com/guides/beginner/best-android-grocery-list-apps-to-help-you-organize-shopping-trips/

http://www.androidauthority.com/best-grocery-list-apps-101625/

Although the there are some competition for applications like this one, they mostly have outdated interfaces, and do not have all of the features my application would provide.

The next app was inspired by the service fraternity I am in. There are times that it is very difficult to find places to volunteer. This app would be for those who are looking for a place to volunteer, or organizations who are looking for volunteers. People would be able to search and communicate with those in the area.

Here is a link to some of the completion:

http://appadvice.com/applists/show/apps-for-volunteering

Again, the other apps are different then the concept of this app. Many of them are for a specific organization.

The last concept was inspired by a story I saw in the news. The story was a bout mothers who take their children to the park and lose track of them because they are distracted by their mobile devises. After doing more research I found many articles and stories similar to this one.

The applications would remind users to look up and check on their children. This way they do not lose a track of time and dangerous situations could be avoided. I could not find any applications similar to this one.

Some of the new stories and articles I found could be seen here:

http://www.nbcnews.com/health/parenting/put-down-cellphone-study-finds-parents-distracted-devices-n47431

http://www.cnn.com/2011/LIVING/06/14/phone.addicted.parent/

http://www.wfsb.com/story/23756291/west-hartford-moms-blog-post-goes-viral

http://newyork.cbslocal.com/2014/03/10/study-smartphone-obsession-leading-to-more-examples-of-distracted-parenting/

Here are my three ideas in more details:

concepts

Paper Prototype Testing Round Two

This week I went back to the paper prototyping stage and perfected it. There were many things that I learned from the first attempt of prototyping that I wished to change.

The first was the actual paper prototype itself. Although the paper prototype is meant to me a wireframe so you can catch mistakes in the early stages, my first prototypes were just too much of a wireframe.

It interfered with the results of my testing because I could not tell if my user was confused because of the functionality of the application or because they could not understand what the wireframes represented.

The other visual problem with my first test was the size of the prototype. I had made the pieces really small, which was a problem because the user was not accurately test the flow and placement of the application.

I also changed the style of my testing so that I could get an understanding of what the user expects on each page. I still asked the participant to perform certain tasks, that way, I could guide them in a way to explore the entire application.

After the modifications made to my paper prototype and my testing style, I was able to find out which parts of my application are working and what I may need to look into changing.

I remember back when I conducted my first usability test for this project I watched a video about paper prototype usability testing. The video was extremely helpful at the time, so I went back and watched it again to familiarize myself with how they conducted the test. The video is called, Example Usability Test with a Paper Prototype. I really like how this test was conducted. I strongly recommend watching it for anyone unfamiliar to paper prototype testing. It explains the important parts of how to test while simultaneously demonstrating it.

Another video that was very well done was a video called iPhone app | paper prototyping although this video was more of a demonstration of the application rather than a test, I felt it was a great example of what to visually look for. It had a neat layout and accurate sizing.

Here are just a few more images I found as inspiration in the recreations of my paper prototype:

Paper Prototype

Paper Prototype

Paper Prototype

After completing more research I was inspired to complete next paper prototype test. Overall I am very happy with the results of my test.

You can view my video below:

Test

This week I also did more visual research as I continued to work on my user interfaces for the screens. It is going to follow the flat metro style. The main menu is going to resemble Windows eight block look.

Windows 8

Windows 8

I began researching different possibilities that I may want to use for the screen prototype. One of these is invisionapp, this looks like a nice option that is free to get started. Before making my final decision I will have to compare it to the other options.

Another is proto.io this one also looks like a nice option. It had a lot of possibilities with this app such as animation, interaction and more. This is one that I will diffidently look more into as I get closer to making my screen prototype.

Another great option is Marvel, which says, “Turn sketches, wireframes, PSDs and designs into interactive mobile and web prototypes in just a few clicks.” This sounds very easy to use and will most likely be perfect for what I am trying to accomplish. This is also another free service.

Fluid is another option, however it only allows 10 screens to be used. Although my application is not that large, I would rather choose something with more flexibility. I want to really show the capabilities of my application and I don’t want the limit on screens to ruin that.

The last option that I looked at this week was called justinmind. This looks like it has a lot of options and capabilities. I will definitely consider this as a strong contender. However this may be even more than I want for this particular project.

Next week when I create my screen prototype I will reevaluate all of my options and start my creation.

I made some changes again after my video of my paper prototype test. I made some changes to my prototype so the participant could understand more about how the app is going to work. I also made some changes to my video so it looked more professional.

The new paper prototype test video is below:

Screen Shot 2014-03-14 at 11.36.02 PM

 

Paper Prototyping

This was the first time I had ever attempted to test with a paper prototype. I had only heard of this once before when I was first researching usability testing. If done right, this seems like an easy and cost efficient way to get a lot of testing done in the early stages of development.

Since this is the first time I was conduction a paper prototype I found that it was crucial to get as much research as possible. The first site that I looked at, explained the importance of prototyping.

It supported a lot of the benefits that I had assumed would come from paper prototyping. One of the things it said was, “Yes, it’s nice to start building a website or multimedia project and just see where it goes, but starting with rapid prototyping can help weed out bad ideas or help improve good ideas that are hampered by poor implementation.” As I had thought, paper prototyping is a great way to find out what works and what doesn’t work in a design, in the early stages of development. Learning this information early on will help save time later on in the design process.

I know that I took some great information out of my tests. I now know what works and what doesn’t. When I move on and further develop my design I can choose how I would like to change it.

The site also bulleted the important steps to paper prototype testing, this is what it said:

▪   Find users —These should not be other people working on the project. People with as little knowledge as possible about your design and work will provide the best feedback.

▪   Assign a person to be the computer — If you built the design entirely yourself, you’re the computer that the person interacts with. You’ll want to grab a friend to record the testing sessions so you can watch them later. If you have a team, assign one person to make your prototype respond to user inputs.

▪   Record the test — Recording a test is recommended. This doesn’t replace observing the test, as you’ll see below, but there are several reasons to record a usability test. You can refer back to it later, you can show people who didn’t observe the test how it went. If you’re trying to convince someone that a design needs to be changed, showing them a video of users struggling with a design is a great place to start.

▪   Conduct the test — Explain what users are supposed to do. Give clear tasks and scenarios. Let’s say we were testing Amazon.com. Here is a scenario you could give a user: “You are a big fantasy book fan. You just heard a new illustrated edition of The Hobbit came out in October 2013. Find the book, put it in your shopping cart and buy it.”

▪   Think aloud — Have users think aloud while going through your test by speaking what they are doing and thinking. Are they confused? Why are they clicking on this? What do they expect to happen when they do that? This will help you understand what they are thinking while they use your prototype. It will also help you formulate questions to ask them when they are done.

▪   Observe — Even though you are asking users to think aloud, they may not say everything you need to know. Users may be struggling with a site but still tell you they think it is relatively easy to use. This can be because users want to appease you or because they don’t want to appear to not be able to work a website. Regardless, observe what is happening. You’ll learn a lot by seeing how well users can complete various tasks with your prototype. Remember, you’re testing your design, not the user. I always make this clear to users.

▪   Debrief — Ask users what they thought of the prototype, what they thought went well, what they thought didn’t go well, how they felt using your prototype, etc. If you noticed a user struggling with part of the prototype, specifically ask them about that.

▪   Create a list of issues to fix — Based on the feedback that you got from users and what you observed while watching users, create a list of issues to fix. If there are a lot of issues, you may want to modify or create a new paper prototype. If it went fairly smoothly, it’s time to create a higher-fidelity prototype and get additional user feedback later.

I made sure to reference these steps when I was developing my prototypes and my test.

The site also referenced a video that demonstrated a paper prototype test. This test was not for a phone application however it really showed the process of the test. They even gave the users paper credit cards to use. This showed me that my paper prototype had to be as close to the experience the participant would get actually using my application as possible.

The next site I saw said that wireframes do not work as paper prototypes. This confused me because it contradicted with a lot of the other things that I saw that said that this stage was made for wireframes. Although I could see the benefit of avoiding wireframes I still used them in my testing. I regretted this decision because I think it was a little difficult for my testers to use. However, I feel like I learned from the experience and will not make that mistake in the future.

The next site that I saw expressed the two major uses of paper prototypes. It said that they were:

  • To communicate ideas: between designers, developers, users and other stakeholders in the first stages of the user-centered design process.
  • As a usability testing technique: to observe the human interaction with user interfaces even before these interfaces are designed and developed.

These ideas just further supported the importance the paper prototyping has. Usability testing is crucial to a well-developed design, and paper prototyping allows this.

I then watched a few videos to get a better visual idea of how the tests are conducted, and to gather more information about paper prototyping. The first video I watched, explained the importance of paper prototyping. As designers we come up with several different design ideas, Paper prototyping is a cheep way for us to test those ideas and see what works and what doesn’t. I am using it as a way to see how the user reacts to my design. That way I could fix any confusions before it is too late.

The next video was a demonstration of how paper prototypes work. I found this very useful because I could see the method they did to cerate the changing screens.

I referenced this when creating my prototype.

The next video was another really useful video explaining how to create a paper prototype and conduct a test. I really liked how they used tape in their paper prototype tests. I was inspired by this and conducted my tests using this method.

The last video I watched showed how beneficial it is to use prototype testing. She shows the several drafts she has made just staying in this stage of testing. These changes show that she is receiving crucial feedback at a stage that is very easy to fix.

She was also very organized in her testing, and I made sure to also be this way by keeping my screens in their sections.

Here a few photos that I found as insertion for my paper prototypes:

 

 

1

 

 

2

 

3

 

4

 

In my redesign of my paper prototype I will make sure to take features from this design. They are all very clearly laid out and easy for the user to understand. This is something crucial that I include in my redesign. Also they are the size of the actual phone. I will make sure to reference these images. It is really important that the tests accurately portray the use of the application and size and clarity have a big affect on that.

User Interface

This week was a big step for me. This is when I began to design the user interface for my application. As always, my first step was to research the user interface and get a really goo understanding of what I should be doing. I also looked at many examples online and on my phone to see what style the popular applications are using. As previously noticed, the metro flat look is extremely popular right now.

The first site I viewed Titled Debunking the UX myth. Over again, did a great job of explaining the difference between UI and UX. It descried the content of the design the vegetables in a meal. The UI is the empty plate, and the UX is the thoughtfully laid out vegetables on the plate. This was helpful to me to keep in mind what responsibilities and goals lay where.

The next site I saw was called 10 User Interface Design Fundamentals. This  site listed the 10 fundimentals of user interface design.  The list was:

  1. know your user
  2. pay attention to patterns
  3. stay consistent
  4. use visual hierarchy
  5. provide feedback
  6. be forgiving
  7. empower your user
  8. speak their language
  9. keep it simple
  10. keep moving forward

I found fundamental 2 to be really important. In the article it says, “By using familiar UI patterns, you will help your users feel at home.” This brings me back to the importance in viewing popular apps for inspiration. People do not like too much change.

I also found fundamental three to be a good point. It said, “Your users need consistency. They need to know that once they learn to do something, they will be able to do it again.” Inconsistently problems often show up in usability tests. An app should be constant in design, and structure. The user should not have to learn to learn the app every time it enters a new screen.

As I continued to read I found some more helpful hints on User Interface Design Basics. The most important thing I found here was, “Keep the interface simple. The best interfaces are almost invisible to the user. They avoid unnecessary elements and are clear in the language they use on labels and in messaging.” When designing my interface I kept this in mind and tried to keep it as simple as possible. Unfortunately my app does require a lot of words on the individual recipes, however I tried to keep it as simple as possible.

The next site I saw was titled Principles of User Interface Design. This site talked a lot about how people live and think. For example, people live busy lives full of interuptions. It is important to create a design that is not overly complex, but keeps the user interested and not destracted.

It also said, “Humans are most comfortable when they feel in control of themselves and their environment. Thoughtless software takes away that comfort by forcing people into unplanned interactions, confusing pathways, and surprising outcomes.” This is also really important. The user should not feel forced into something by the design. The app should be laid out in a way that the user feels in control of their actions and decisions.

The last website I went on was  UI Parade. This website was extremely useful in coming up with my different user interface designs. It provides its users with several different designs for common items found in UI designs.

It had collections of options and examples of buttons, forms, ui kits, icons, knobs, players, misc, modals, nav, progress, scrollers, search box, sliders and switches.

These varieties of icons can really help put together different feels and looks for an interface. While I am leaning towards the trending flat look of the applications today, it was really important to get a good feel of the direction I wanted to go in.

Although the reading was very helpful and brought up some really important points that stuck with me in the design process, the best research was looking around at existing applications. This research inspired the possible different looks of my app.

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.

The Importance of Testing

Before jumping into my usability tests I research a little more about how they are done and the importance of them. I know from my experience interning on the user experience team, that usability testing is a crucial part of the design process. This step gives the designer feed back on what is good and bad about their design. With this information the designer can come up with different solutions and design ideas, to develop and overall better design.

According to one of the articles that I read, Self-Education in UX and Working with User Research Data it is very important to observe the popular applications of the time. Daniel suggests, “Look for UX trends. What trends interest you today, and what will interest you tomorrow?” By thinking about these questions you will have a better sense of what direction to take you design in. For example, recently applications have been taking the flat, metro trend. I will most likely be taking my app in this direction. I also kept this in mind with my usability test to see if any of my testers would say that is something they would like to see.

In another article I read, Analysis, Plus Synthesis: Turning Data into Insights By Lindsay Ellerby, it is extremely important to ask questions. I noticed this a lot in my internship. A lot of times participants feel timid. It is very important to ask lots of questions to dig deep and find out what the tester is thinking. Also it is really important to encourage thinking out loud. This helps to understand what they expect everything to do, and to understand if your app is doing that for them.

The article also separated testing into five steps:

  1. Analysis + Synthesis
  2. Collect and organize the data: Make your data manageable.
  3. Mine the data: Identify what you see.
  4. Sort and cluster the data: Manipulate or reframe your data, as necessary.
  5. Identify insights: Discuss, articulate, incubate, and socialize your insights.

It is important to make sure to have a clean and clear way to express all of the data you collected and analyze this. I found that an excel spread sheet could be really usful for this.

On Wikipedia they emphasize the importance of connecting with the user. As a usability tester you have to empathize with the user. It says, “When investigating momentary user experiences, we can evaluate the level of positive affect, negative affect, joy, surprise, frustration, etc. “ It is really important to understand how your application makes them feel and why. It is then your job to analyze what can be done to change that feeling.

I also watched two videos to research a little more into usability testing. The first was titled  Usability testing and it was a basic overview of what usability testing is and the importance that it holds. According to the video it is important to anything with an interface. There was also a huge emphasis on evolving users in earlier stages of the project. Not just the end. This is really important because you should be making changes throughout your design and designing for the user. The best way to do this is getting feedback at several stages of testing. The video also stressed the importance of recruiting testers that would use the product ask questions and encourage thinking out loud. This means that you should not find testers that have no connection to the application. The tester should be someone that would actually use the product.

The second video I watched was titled Example Usability Test with a Paper Prototype. This was a very well made video that I strongly recommend to anybody who has never usability tested before. This video is an example of a usability test for a children’s website. This is really useful video because you can see what kinds of questions you should ask and how you should ask them. It really helps to understand why questioning and thinking out loud are so beneficial to the designer. This is a great way to guide you’re tests around. I made sure to act similarly to this test as well as those I observed in my internship.

All of this research gave me a strong understanding of how testing should be done. After getting all of my testing materials prepared, I felt very confident conduction my tests.