Experience Design I

This tool makes it look really easy to create a mobile app - we should try creating our app in this:

http://www.mobilenationhq.com/overview/

As part of Experience Design 2, our group has decided to take different outings to get us inspired for our next project. Geocaching was something we'd talked about when we were developing our mobile app idea, but only one of us (Heidi) was an experienced geocacher. Geocaching involves using a GPS to search for hidden containers ('caches') in outdoor locations - Wikipedia describes it as 'a game of high-tech hide and seek'. I was surprised to learn there are over 1.3 million caches and 5 million geocachers all over the world, so it's a big community. 

What was the experience like?

We picked Nonsuch Park as the location for our geocaching and used Heidi's GPS to find the location of the first cache. Even though you can narrow down to an approximate area, it still takes quite a lot of searching to find a tiny camera film can in trees and bushes. This made it quite satisfying when we did manage to find it. The cache had a log book to sign which had a lot of signatures. It was strange to realise someone else found this same cache the same day as us, even though it was a pretty wet and windy day! The next couple of caches we found were easier and one was bigger, containing some trinkets and a travel bug (pictured below). This is a trackable tag that is attached to an item. It is taken from cache to cache by geocachers and can be tracked online. I was excited about finding these hidden treasures! Overall, it was a fun day that would be even better in dry weather! It was frustrating when we couldn't find a cache, but this made it more rewarding when we did. It's also a great way to explore places as you are encouraged to go off the beaten track following the GPS directions. A good starting point for our next innovation.

I have finally had a chance to do some reading and looking at what we've done so far.  I had wanted to do this two weeks ago, before the craziness of the past couple of weeks settled in.  First I found an icon set I might be able to easily modify.  This one doesn't come with all the icons I was hoping for, but it does come with a tutorial for creating your own in the same style:

108 Mono Icons

I found some symbols in other sets that I do like.  Here's what I was thinking for each category:

• Events:  Calendar
• Friends:  Group of People
• Offers:  Price Tag
• University:  Graduation Cap/Motar Board Cap
• Profile:  Smiley Face

I've found all of these except the gradution cap in other sets.  I think a cap icon would be easy to find someplace else online for editing.

I read through the BlackBerry Design Guidelines, the big thing about the icons themselves that I read is to not use text and numbers in icons.  This helps with "localisation", for example if you have a $ for offers and we're designing the app for British students, that might not be appealing to them.  Though, if the app is eventually developed for American students, the icons will have to changed, so keeping it as simple as possible will allow it to be flexible.

Reading through the design guidelines I got some great tips on text disply too.  In summary:

• Fonts are inherited by the theme the user chooses.
• If you use multiple fonts, use fonts from the same font family.
• Avoid using bold for emphasis.
• Avoid using fixed font sizes and small font sizes.
• Avoid using italics and underlined text.
• Avoid using anti-aliasing with small fonts.
• Verify the UI is clear in low lighting.

There's a section on punctuation too:

• Punctuate labels for lists, text fields, and search field with a colon.
• Avoid using colons in titles.
• Use elipses in a button or label item to indicate that users must perform an action after they click the button.
• Avoid using single quotation marks.

There is a BlackBerry API that sets defaults, including fonts and such.  They recommend using this when developing, of course.

After reviewing the guidelines I started thinking about our homescreen though.  It still seems unecessary to me.  I'm also wondering if we should just move the icons right away to a toolbar to keep the consistency through the app?  Based on what I read, toolbars are set through a Toolbar function.  Each icon sits on a set canvas of 60x40 pixels, the average icon size needs to be 33x33 pixels.  This allows for suitable whitespace around the icons.  In most of the screenshots I saw, the toolbar was on the bottom, though the Facebook one is on top.  I'm not really sure which is the most used though.  Also the text under the icon on the home screen is unecessary.  The toolbar property allows tooltips to be set.  Most screenshots I saw didn't have text under the icons.  I think most apps rely on the tooltip property to save space on the app.  I think our reasoning for having the homescreen was to add the text labels, but with tooltips it doesn't seem necessary.  Having a consistent toolbar layout through all screens seems more usable than the way the icons are placed on the homescreen. 

I wanted to ask what you thought about moving the icons right away to a toolbar on the home screen?  The homescreen could just be the photo and the logo if we wanted to keep it active.  I'm not sure we even need it though.  If BlackBerry is anything like the iPhone, the app remembers the last page you were on when you left it so you don't always enter through the homescreen anyway.  Though that's my opinion based on what I found out in the guidelines, I'm curious what you think.

I took some other notes, there's a lot in there on interactions, especially how to design your app to accomodate both touch screens, trackpads, and different screen resolutions.  Most probably aren't relevent until development, but they were certainly interesting.  I was focusing on text, icon, and design related guildelines to begin.  Just in case your curious, there are simulators you can download.  The one that matches the resolution of our prototype in MockFlow is the BlackBerry Curve 9300.  BlackBerrys are backwards compatible, so all early versions work on the newest version.  There are screen resolutions charts in the design guidelines.

Oh and I'll probably re-design the logo along with creating the icons.  I have another idea in my mind, that other one was just thrown together.

I think these were shared in a link early on, but I came across them again... here are the official design guidelines for BlackBerry, Android, and iPhone:

• BlackBerry
• Android
• iPhone

For the presentation and future reference.

Prototype

Interesting article:

http://www.smashingmagazine.com/2010/12/02/a-study-of-trends-in-mobile-design/