Friday, May 11, 2012

iOS Design Decisions - Part 1

Being an independent developer is difficult and rewarding at the same time. While developing software you really have to step back and look at all aspects with a top down approach, how the user will interact with the application, the flow of how the application works, how often it will be used, how repetitive the flow is. During these steps you will have to make some critical design decisions. When designing an app I break these down into categories and address them separately, let me show you.

When working on my most recent app Mobile Register 2.0 I had no idea how to design a point of sale system, I've never worked in retail and really was quite clueless to how this stuff worked.

First thing was I broke down my problems into categories:
  • Cash register interface
  • Formula's and calculations
  • Data
  • Customer relations
Cash register interface

Rule #1 Simple is better

If people can't figure out how your app works there will be very little adoption and frustration. With that being said, I wanted Mobile Register to look and act like a cash register. One of the biggest hurdles you'll have to deal with when doing iOS development is the screen size 480x320 pixels doesn't leave you much room.

When you go to the grocery store and are checking out all the item's you've purchased show up on the screen in a list. I took this as my Que and really the best way to list items on the iPhone is with a table view. At the same time though I couldn't just use a full screen table view, I needed a set of controls on the screen that would:

Controls that affect the current sale:

  • Calculate Total
  • Add Tax Rate
  • Add Discount
  • Add a product
  • View existing products
  • Email receipt
I also wanted a set of controls that would allow the user to change settings and generate reports.
  • Settings Page
  • Reports Page
This is what I ended up with, the buttons across the top represent the controls we've talked about but they're condense. When pushed a UIAlertview will show up asking which control the user is looking for. It's essentially works like a sub menu.

+ button controls:
Add Product
Existing Product
Add Category

Gear button controls
Settings Page
Reports Page


At the bottom I'm displaying some data to the user as well as including the rest of my controls.
When the user clicks on the discount button it opens a new view and allows them to select a cash discount or percent discount.


This is just one example of intuitive ways to use the entire 480x320 pixels to design your interface. Think simple first, then think how will I make this function the way I want.

This is part one in a series of discussions I'll be going over for iOS Design Decisions.

Thanks for reading

Corey






No comments:

Post a Comment