Basic things to remember when Designing or Developing for iPad

*Source: Morgan Stanley

Tablets penetration in the market is still small, however it is seeing a strong growth. The trends for the tablets market cannot be ignored and need to be kept in mind when designing or developing for them.

While many people thought this will replace the mobile devices, that is not necessarily true.

1. Trading Home Computer Time for iPad Time
- Its replacing the web surfing on your Laptop. According to a Neilsen survey 70% of tablet owners and 68% of smartphone owners said they use their devices while watching television.

2. Tablet is a Shared Device
- Family members share an iPad at home and hence usually use one login for various apps or accounts. This misrepresents user analytics and user cases.

3. Sharing of Tablets raises security concerns
- When you leave your iPad on your Coffee Table and have guestes over, who browse your iPad, this becomes super critical.

4. Expect exception App And Website Experience
- When browsing the Web, users expect to access the full version of websites, so ensure that your site is optimized to deliver a great experience on the iPad. At the same time, the apps need to leverage the bigger screen and specially the split screen view of the screen (over an iPhone)

Explaining the UX Value

UX means more than just the product interface; it encompasses the whole experience a person will have with a brand and their overall satisfaction with a product. A solid UX design process begins with with discovery and ends with development integration, relying heavily on stories and prototypes in between.

It is the role of the UX designer to demonstrate the value that UX work brings to a product. Here are a few steps which the UX designer can follow to help communicate the value more effectively to all the stakeholders in a company and hence improve the user experience for the customer:

1) Identify Key Business Objectives
To communicate the value proposition, you need to understand the project strategy. You should also get these validated with your other stakeholders like - team members, customers and end users. Understand the objectives and document them for future use.

Examples for an e-commerce mobile app:
1. Move users from website towards mobile app
2. Increase conversion rates from start to checkout
3. Increase overall customer satisfaction with product discoveries

2) Identify the UX attributes

List down the UX attributes which will influence the success of the key objectives. Its important to remember that not every key objective is influenced by UX design. Also remember not to overlook how UX may subtly impact the objectives.

The UX attributes that should be considered in a project include:
Usability: Who is the target audience and what is their expectation of usability? (Eg: Is it for preschool kids, high school kids or architects?)
Accessibility: On which devices with the app be used by the target audience?
Performance: How well does the application need to perform? How fast does it need to load and respond to input? Should this require additional sreens/ buttons / user input points?

Simple descriptions of how these attributes influence the key objectives are sufficient. Building on our earlier example:

1. Migrate users from website towards mobile app
a. Usability equivalent or better than website (Eg: Amazon mobile app has a better user experience that the Amazon mobile website)
b. Usability of app different mobile devices
c. Performance of app must feel quick and responsive to user input
2. Increase conversion rates from splash page to checkout
a. Find products quickly and easily
b. Trade off between number of clicks to purchase v/s amount of information on each screen
c. Simple and easy to use checkout pages (Eg. Entering or storing CC information)



3) Identify the current success of these UX attributes
For each of the UX attributes you've defined, assign a rating or assessment to the current state of each. Rate them from Poor to Excellent (on a scale from o to 10)

4) Identify the high priority items

UX can get tricky when trying to achieve multiple objectives. Hence identify the high priority items to ensure those features are not compromised

5) Identify the desired state of these UX attributes

Determine to what level each of the identified attributes needs to be improved. Some items need to be imrpovized slightly while some others may need to be excellent to fit the business objectives.

6) Identify the activities and design work that can be done to improve the state of the UX

A plan can be made for how to improve those higher priority attributes from the current state to the desired state.

When the value proposition of UX is directly associated with key business objectives, it is much easier to have quality discussions about time and budget for UX activities. Helping your stakeholders understand how UX directly and indirectly influences their key business objectives allows you to focus more time on critical work and might help you increase the budgets and time you are allocated for UX initiatives.

5 Reasons to Wireframe an App before Design or Development

App wireframes are blueprints that define the apps layout and functionality. The importance of having them right cannot be overemphasized. The reasons I say this:

1) Easily laying out the content and functionality
Wireframes enable you and the stakeholders or client to focus on the core functionality and content of the app rather than spending hours refining the asthetics.

2) Depicting Navigation
The wireframes let you clearly depict flowcharts to show the sequence of flow between screens. You can use the link feature in Balsamiq or use Omnigraffle or Lucid charts. All of them will help you achieve your desired purpose of showcasing the flow of the app even before its developed.

3) Iterating
Its easy to iterate on wireframes if you use a tool like Balsamiq to create digital wireframes. Team members always have feedback which can be easily done to these wireframes. If you did not create wireframes but made direct designs, making changes to this later would be a very very cumbersome process.

4) Coherent Development
Wireframes allow you to consider the software architecture of the app even before you get into the creatives. API optimization, memory management, caching can all be thought out after this phase to ensure optimal app performance. Getting sign off on these from the relevant stakeholders, before development, can really help simplify the development process and reduce the number of iterations.

5) Getting Buy-in of Stake holders
Sometimes it just good to wireframe different concepts out so that you can help present a case to your stakeholders. A picture is worth a thousand words. This might seem cliche but is definitely worth following when presenting a new ground breaking idea, a new product concept or simply an improved version of an existing concept.

Though wireframing is super critical at the start of creating an app, it is important to keep some room for small changes so that the creativity of the graphic designer is not restricted. Especially if the agile development model is being used, the iterations on wireframes might need to be done after the first round of features are in development.

5 basic (yet sometimes overlooked) things to consider when creating iPhone apps

1. Don't break the flow is you need the app to open a webpage or maps. Open the webpage in webview inside the app and allow the user to go to Safari with a small icon. Open a location in the maps inside the app. Allow him to exit if he wants to get directions, etc

2. Allow users to email links and relevant information to friends from within the app. Make your app viral

3. Keep phone number and email addresses clickable. The worst this is giving a Contact us page to the user with a number which is not clickable.

4. Clearly define how the app will work if there is no network. Many times IAs leave this on 'default' behavior which is definitely not a good idea.

5. Minimize data entry points. Allow a user to point and select i.e. click on an input rather than having to enter it via the keyboard.

Designing the iPhone UI

App Alpha Writer has been featured on App store multiple times and other apps from the same brand have been featured on Apple commercials. I worked on Alpha Writer app.

Apple's iPhone and iPad has really revolutionized the mobile and laptop industry. Designing the UI for this slick interface has been a pleasure - it is a great mix of being logical and creative - intuitive yet different! This blog post is about the basic UI design principles based on Apple's Human Interface Guidelines for the iPhone.

This blog is by no means a comprehensive source for all the information, but a quick checklist for anyone who knows something it and whats to use it in their app.

The first few basic questions you need to ask is -

1. What are the main features – should they be on main menu screen or in tab bar?
2. What is the app style: (a)Productivity (Eg. Mail/ Photos) – Hierarchical, less frequent setting changes (low customization) (b) Utility (Eg. Weather) - flattened lists, frequent setting changes, more visuals, summary of information

   (c) Immersive (Eg. Games) – visually rich

3. Will the app be better in portrait or landscape?

Once these basics are take care of the general humal interface principles come into play:

1. Use metaphors (model according to real world) - People can identify with this easily
2. See and point (present options rather than get data entry) - People will make less errors and find this more convenient
3. Feedback (every user action should give feedback – audio/ visual) - So that they know that they are doing what they actually want to do
4. User control (get confirmation before destructive action ) - Very imp to highlight this

The next thing to consider is the actual design:

1. Put frequently used info on top
2. Make it obvious - use appropriate colors and size
3. Gestures to be included – Tap, Drag, Flick, Swipe (table view to reveal delete button), Double tap (zoom in and out), pinch and zoom, Touch and hold, Shake - understand each of their significance and use appropriately
4. Add realism
5. Use sounds
6. What kind of data entry points to use - keyboards/ numberpads/ scroll wheels

The iPad UI should highly leverage the fact that the screen is bigger than the iPhone and users don't like to leave one screen to go to the other. Specific things to consider for iPad:

1. Reduce full screen transitions
2. Use flattened navigation
3. Use popovers for modal and nonmodal tasks
4. Put tool bar content on the top

Next week I will discuss the specific elements like Elements, Content views, alerts, etc.