Tuesday, February 18, 2014

Info Arch and Wire Frames (02/18/14)

This week I worked on revising my information architecture. I tried to keep the user in mind while designing. How is the user going to use this app? What does the user need from the app?
From the research I had conducted with the three users of my app, I selected the features most important. For example, the users need to find a location and select a date quickly and easily. The program will then give the users the high and low tides for the day. Another feature I was surprised to find was that the phases of the moon were important to my users. One user found a tide graph very useful. It is a visual representation of the tides and I believe it would work well. With these elements in mind I redesigned the IA using InDesign.
After doing more research I found the screen shot by Antoine Bonnin on Dribbles.com, “App Welcome Flows Overview” helpful in the layout of the IA.

Bonnin, Antoine. “App Welcomes Flow Overview.” Dribbles. N.p., n.d. Web. 17 Feb. 2014.


After reading, UX Booths article, “Designing for Mobile, Part I: Information Archetecture”, I decided that the tabbed view model would work best. It is simple and as the UX Booth article states, it allows the user to “quickly scan and understand the app.” This makes sense. People who will use this app, want to know the place and the tide quickly so they can go about their activities. I also wanted to incorporate how each page would interact. For example, when the app open the current date, location of the user and the tides would automatically be displayed. With a swipe, the following date’s or the previous date’s information would be displayed.


McVicar, Elaine. “Designing for Mobile, Part I: Information Architecture.” UX Booth. N.p., 25 Sept.


 This is my redesigned information architecture:


Also from my research I found that I agree with Matt D. Smith in his January 17, 2014 blog, Wireframing With Illustrator and InDesign. I too prefer to design my wireframing using the programs as opposed to doing hand sketching. Although I am not as fast as Smith claims to be using Illustrator, I do find that I am more comfortable using the program than hand sketching. I like the precision that the programs provide.


Using Illustrator I laid out my wireframes. The main elements were clear in the IA and I was able to follow it in the wireframes.
   



Sources


Bonnin, Antoine. “App Welcomes Flow Overview.” Dribbles. N.p., n.d. Web. 17 Feb. 2014. <http://dribble.com/shots/1307197-Mobile-App-Flow/attachments/182765>.
McVicar, Elaine. “Designing for Mobile, Part I: Information Architecture.” UX Booth. N.p., 25 Sept. 2012. Web. 17 Feb. 2014.
Smith, Matt D. “Wireframing with Illustrator and InDesign.” Run home, Jack. N.p., 17 Jan. 2014. Web. 17 Feb. 2014.

No comments:

Post a Comment