22 Dec 2010

BlackBerry Design Guidelines

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.