Tuesday, April 23, 2013

Week 11: Interface #2 in Action!

So this is my first draft or design for the Perfect Food homepage. I really wanted liked the idea of the app being more visually appealing with polaroid pictures and that could be interactive for users. 

I am still playing with fonts and the white space of the polaroids, so let me know what you guys think! I am open to suggestions!

I am working with Steve to make sure my dimensions for the app and my icon are correct, and I am still playing around with some ideas. I'm thinking of maybe warping the polaroids so they look a little more realistic and not so straight-edge. Do you guys like the "munch munch" instead of a "let's get started?"

Steve is still working on the interface of the program and I am skyping with him tonight so we can update each other on our progress! 

Wednesday, April 17, 2013

Week 10: Phase 1 of Ultimate Super Awesome Perfect Food App

Steve and I have been keeping in touch through Skype and text to check in on each other's progress. 

From what he has told me, Steve has completed the framework for the app and will begin working on logic and programming this week. I don't know much about programming, but he seems very confident that we will be able to include all aspects of the app that are in my design. 

As far as my schedule, I have been working on the icon for the app. I think this might be the most challenging part for me, mainly because there's so many different designs I could go with, and I have to choose only one. I'm playing around with some different ideas as to what I want the app icon to look like, I have two ideas one that uses just text and another that is just an image. 

As I stated in my previous post, I am going in the direction of a "Polaroid" themed app, since my generation just loves taking pictures of their food. I think it would be cool if there was a way to make the pictures change every second or so to make it more fun and visually appealing to the user, but I need to check with Steve on that first. 

So for this week, I am starting to design the icon as well the polaroid design for the entire app. 

More to come soon! 

Week 10: Visual Interface and Less Visual Interface Designs

These are my sketches for my two alternating interface designs. The first interface is similar to my first Balsamiq design with a few changes, while the second one is a little more visually appealing and interactive. 

Interface #1:

My design for interface 1 is similar to my original Balsamiq design for The Perfect Food. My home page would have one image (for example, a taco) and then it would lead on to the following pages after confirming your current location. Instead of a boring rectangle button that allows the user to skip to results after the first page, I have replaced that design with a fun, interactive button instead. 
Interface #2:

 For my final project, I want to move in a direction that is similar to my second interface design. The home page would have various Polaroid pictures of food and the Polarid theme would continue throughout the app. One of the more annoying things that people do my age is take pictures of food, so I think having Polaroids is kind of a fun interactive take on that. It also gives the app more visual appeal and makes it fun to select different Polaroids. I'm still playing with this idea to make it as different from Yelp as possible and also making it fun and creative! 

Monday, April 8, 2013

Week 10: Sign On, Sign Off, Are You Sure You Want to Exit?

Sign On and Exit Guard

Many of the blogs I use most often have a signing on pattern and an exit guard pattern. This includes a variety of my favorite apps like Instagram, Yelp, Bejeweled, Pinterest, Temple Run, etc. According to 4ourth.com, sign on is the pattern that is used to confirm that only authorized individuals have access to the site, service, or application. Exiting guards are patterns that are used when exiting a screen, process or application that could potentially cause a loss of data or break in the session. 

Sign On

This was a screenshot I took of the login for my Pinterest account. But I use the sign on screen pattern for many of my apps including Instagram, Skype, Bank of America, Yelp, GooglePlus, etc. Most of the sign on patterns look extremely similar to this. 

Exit Guard Pattern

This is a screenshot of my bejeweled app, and this "Are you sure you want to exit?" is in most, if not all, my gaming apps. 

Tuesday, April 2, 2013

Week 9: Testing - If At First You Don't Succeed, Try Try Again!

Testing Ideas:

I can tell myself that no matter how good I think I did a project, or a speech, or a paper, it really comes down to when someone else looks over it. Some of the best advice and tips I've received have been when others proofread my papers or critique my projects and how I can improve. I think involving students to test mine and Steve's final project is the best way to improve our app. 

Since we're all extremely busy with our schedules, I think a good way to get feedback is through surveys. They are easy to put together and don't require too much time to complete. Steve and I could put together a survey to send out to students (or whoever) on what they think of our app! Questions could include:

  • What navigation styles do you like best? (One page with a navigation scroll bar or separate pages)
  • What (if any) social networks would you like to see included on the app?
  • How much do you think this app should cost?
  • How likely are you to use this app?
  • What other suggestions or additions would you make to this app?

I think the survey would be a good way to start receiving feedback and testing our final product, and then for my second testing idea, we should conduct an in-person experiment for the app. We could take the information from the survey and then conduct an in-person experiment with some of the same people who took the survey, or completely new participants. Either way I think it's a great way to get feedback. I believe the best meeting place would be somewhere at HPU, possibly in one of the group study rooms in the library. Another option I thought of is getting my peers from this class to review our app, and vice versa. It's always nice to get a second programmer or designer's opinion.

Monday, April 1, 2013

Week 9: Displaying Information Through Grids & Infinite Areas

Display of Information:

For this assignment, the two patterns I chose from 4ourth Mobile wiki was the grid display and the infinite area display. I chose these because I find them visually appealing and will be using at least one of these display patterns for my final project with Steve. 

Grid Display:

The Grid Display is one of my favorite display patterns, it shows a set of selectable images that can fit in the available space. The images are all similar in size as well as aspect ratio, and you can display a small amount of additional information about each image as it becomes in focus. 

This is a screenshot I took of my home screen. It demonstrates the visual appear and accessibility to having a grid display. Each app or program is represented by a small icon and a title. 

Infinite Area Display:

The Infinite Area Display is most commonly used for maps, and it is found to be a good way to display other photographic information. The entire range of the data is generally available at every zoom level, and usually whatever the user is loading is a two dimensional graphic. In maps, zooming reveals more information generally with newly-rendered images. For example, at the city level you only see highways labeled but street names would appear the more you zoom in. This is because having street names displayed at a city level would not be useful and would be clutter inducing. 

This is a screenshot I took of my current location, all the way up north in Kahuku. For the shot I zoomed in at a city level, where only the major highway is displayed. But if I zoomed in, you would be able to see the surrounding streets and even icons that represent nearby businesses.

Week 8: The Perfect Food Comes to Life!

Implementation Strategy for Final Project

I have teamed up with Steve Parker to bring my "Perfect Food" app to life! Since Steve is a brilliant programmer, he will be the brains behind this whole operation, and I will be, as he said, beautifying the product. We have decided to go with an iOS system since we both have iPhones and are quite familiar with the software. We also talked about incorporating Steve's app idea, which acts as sort of a micro blog. We want to add this feature into The Perfect Food by adding quick tips or short reviews to the restaurants or food options within the app.

Our plan is to take it one week at a time and we will be chatting on Skype frequently to check in on each other's progress. Since Steve and I both have pretty hectic schedules, Skype works best for both of us but we will also be meeting in person at least once every week. 

I've put together a rough timeline of what the next five weeks will look like based on what Steve and I talked about through Skype.

April 1-April 7:
I will be working on the app icon that would appear on an iPhone and in the app store. I will also start working on the design of the home page. 

April 8-April 14:
After my meeting with Steve, we will go over the final design for the icon and home page and I will continue to work on pages for the app. 

April 15- April 22:
This week I will finalize the home screen design, as well as start finishing the final pages of "The Perfect Food" app. 

April 23-April 30:
I plan to have all of my designs completed by the end of April so I have a few extra days to make any adjustments or to correct any errors. 

Some features that will be included in the app will be:
  • Map & location aware (GPS)
  • Social network sharing (Facebook, Twitter, Instagram, etc.)
  • Micro blogging

Week 8: Thumbnails & Notifications

Composition Patterns from 4ourth.com

The two composition patterns I choose from 4ourth.com were thumbnail patterns and interaction pop-up notifications. 

Thumbnail List:
Many apps on the market use thumbnail lists. They're easy to read and are one of the most commonly used patterns for scrolling. Thumbnail lists can be visually appealing and interactive by using thumbnail images and a small amount of text that would then link the user to the main page with more information. The two examples I have used are Yelp and my iTunes app, both from my iPhone. Both apps use small images to make the thumbnail information more visually appealing and then gives a small amount of information for each link. 

Here is a link to the thumbnail patterns: http://4ourth.com/wiki/Thumbnail%20List 

Interaction Notifications:

Almost all of my apps on my phone have some sort of notification that will pop up and alert me. 4ourth describes various actions for notification items, but the one I particularly like are the pop-up notifications. Pop-ups can be free-floating with space around all sides, or they could also be anchored to one side. The content of a pop-up can really be anything, and if I were to use a pop up notification in my app for example, The Perfect Food, I would use pop-ups to notify the user that there were no restaurants according to their search. It could also be used to ask the user to allow the app to use the user's current location, as shown below. The other example is a screenshot I took from my iphone for a text message notification.

Here is the link for pop-up notifications: