Pixel Pushing: FourSquare

This is the first in what I hope will be a series showing basic UI explorations and critiques of various user interface screens, with a focus on mobile applications.

The screen I’m starting with is the FourSquare Places screen. The purpose of the screen:

  1. Allow users to select a nearby place
  2. Search for places if the place is not in the list
  3. See potential specials and nearby promotions.

FourSquare Places UI Screen

Issues I spotted with this screen.

  • Branding in the title bar. While this may be OK in a key screen it’s unnecessary on every screen and takes up valuable space.
  • Because of the branding problem we have a secondary title bar that describes the page.  This is useful as it confirms the page however the text is ALL UPPERCASE and too small.
  • The search toolbar is fine except it’s not vertically centered in its bar.
  • The list is three lines where the first line is the venue name, the second line is its address and the third is the distance from the venue. This can be collapsed into two lines while increasing the font size.
  • There are two bars across the bottom (apart from the tab-bar). This is problematic as it eats valuable list space and it can cause problems as it’s hard to tap items at the bottom of the screen without accidentally changing tabs.

Quick re-design:

  • I’ve removed the logo from the screen.  I think a proper title bar is stronger.
  • I’ve centered out the search bar.  Additionally the search bar can be hidden by default as it is in the “Notes” app.
  • I’ve moved the nearby text into the Nearby header bar.  Logically this information is connected so it makes sense together. The GPS icon has been removed as it serves no obvious purpose.
  • I moved the specials up so that they were logically “Nearby.”  This meant the extra text wasn’t needed. Moving this up from the bottom and adding the ribbon effect encourages interaction.  The placement should make it easier to tap and since both the table-header and the specials float above the table we’re not loosing any extra vertical space.
  • I’ve simplified the table-cells to two lines by moving the distance value into its own column. This should also aid in scanning locations based on distance.
  • The design changes allow a single page to display 6.3 items, the original allows you to view 3.5 items at a time. An improvement of 80%.

Post to Twitter

IPhone Application Design

I’m going to talk about four of our recent iPhone projects that we’ve been working on at Raizlabs. Two of them have shipped two have not. We started developing for the iPhone over the summer of 2008 and have had a fun ride. The mobile UI design space is quite different from traditional web-design in that it forces you to think about application design in a whole new way.

In the process we developed some tools to help other designers. Make sure to check out our iPhone wireframe toolkit.

RunKeeper

RunKeeper Mockup

This was our first large application, we were approached by a new Boston start up looking to enter the fitness space. We discussed a number of ideas including a web-dashboard, GPS integration and other technologies. We hit upon the idea of creating a mobile version of a GPS watch.

This was before the iPhone 3G was announced so we were taking a risk that the upcoming phone would in fact have GPS capabilities. The value proposition was simple, why buy an expensive GPS running watch when you can get a low cost iPhone application to do the same thing.

The user scenario oriented around a runner who would start their music and start a run.  The display had to be easy to read while running and provide easy to read and easy to understand information.

Through several iterations we discovered how many customers are actually bikers, hikers and the various ways that GPS data and accuracy can vary based on where you are and what you’re doing.

The application has won many awards and has been featured in a number of newspapers, blogs and other publications.  RunKeeper continues to evolve as we disect deeper interaction problems and continue to refine the end user experience.

You can download RunKeeper and get additional information here

Loan Lite Mortgage Calculator

LoanLite Mortgage - Calculator</b>

Loan Lite started off as an exploration by our summer intern, Justin. The goal was to develop an application that had one user interface page, was meant to be used in a mobile scenario, could be developed in about a week and sold for at least $0.99.

We explored a number of ideas and decided that a mortgage calculator could solve a problem for house-hunters or real-estate agents on the go. Figuring out mortgage calculations isn’t rocket science but it’s also something that people tend to need while away from their PC’s.  We also felt that the utility of the application far outweighed the .99 cent cost, especially considering the typical price of a home.

We did a competitive analysis of existing calculators and found that many didn’t offer adjustments for home owner fees, insurance and similar considerations when trying to determine a monthly payment.

The application was put together over the course of a couple weeks and served as a good foundation for learning objective C.

This mortgage calculator is available from the iTunes app store.

A note to comp-sci students in the Boston area. We’re always looking for talented and driven people for summer internships.

Word Popper

WordPopper

Word Popper is our first design exploration into mobile games. We wanted to design a simple game that could be played solo while waiting for the bus or train but also incorporated an online multi-player component.

We wanted to create a fast moving game so unlike Boggle or Wurdle where you have to string nearby letters together to form a word we allow the user to pop letters anywhere to create words as fast as they can.

This creates a fast moving casual game that can be played by crossword junkies, scrabble and boggle lovers and casual users alike.  The online component allows users to play the same board as other users and compete for high-scores.

Designing for a game is very different from designing a typical website in that you’re more free to explore effects such as animations, buzzers and sounds.  The most interesting thing about game design is usability. The main purpose isn’t to accomplish a specific task but to have fun.

You can download Word Popper from the store here.

JetSetter App

JetSetter Luxury Game

JetSetter is a experiment in psychology and economics of high-end products. The majority of iPhone application are currently targeted at the low-cost or free side of the market.  The assumption is that to generate the greatest profit you need to generate a ton of demand. To generate a ton of demand you need to have a low price point.  For this reason you see many low cost apps.

Unfortunately for application developers having a low price point no-longer guarantees high demand.  We wanted to try something different.

JetSetter was designed as a high-end game. In fact we plan to make it the most expensive game that Apple will allow at $999.  While some may view this as outrageous this is intentional because we want the game to be more exclusive. A limited audience may garner a premium price.

The object of the game is to travel around the world on your private jet and accumulate points for the distance you travel.  What’s that?  You don’t have a private jet?  Well then you probably can’t afford this game either.

The game explores the high-end of the iPhone application market a section of the mobile space that has been mostly ignored.

In the $0.99 cent world we need to sell over 14,000 copies to make 10K.  While in the $999 world we only need to sell about 14. This means that smaller more specialized high-end apps can in theory be very profitable.

Weather or not this model for applications will work is yet to be seen. The application includes some interesting social features to make it appealing to an exclusive crowd.  The application isn’t yet available but keep an eye out on JetSetterApp.com if you have a Jet or fancy yourself as a JetSetter and think you can afford it.

Post to Twitter

Iphone wireframe and interface toolkit

A wireframe is a design tool used to easily communicate ideas, and allow for quick iteration. Wireframes can be created easily by anyone with or without technical know-how to discuss ideas.

Often when I work on projects with CEO’s and high-level executives there is a problem communicating design, concepts and intent. People may cite the lack of design or drawing skills. A wireframe levels the playing field allowing anyone with even basic Powerpoint skills to create basic screen designs.  I posted my original wireframe for web-applications here.  I’m now back with an iPhone based version.

Why iPhone? Well first off I’ve been doing a number of iPhone related projects including Runkeeper and GPSTwit among others. Secondly the iPhone provides a unique interface language and set of reusable design patterns that can be easily incorporated into new applications. While the basic wireframe components can be used to conceptualize any mobile device the iPhone interface makes it uniquly different.

The primary design pattern used on the phone is the list pattern. There are many examples of the list pattern but the basic idea is that it allows you to add/edit/remove/view sets of items.  The second design pattern is the table pattern usually used for forms, input and settings. Combined these two elements form the foundation of the platform.

The wireframe provides a number of examples of how these patterns can be used, modified or altered.

Update: We’ve released a pro set of wireframe templates for purchase here.

Post to Twitter