User Experience Design: Design for iphone and ipad apps

Article Description: the Agile design process for ipad applications.

This article is translated from the interview of Sarah Parmenter in the "Computer Arts".

About Sarah Parmenter
Sarah Parmenter, founder of the youknowwho Design studio in Essex, England, focuses on the design of the website, iphone and ipad apps. The design studio was founded in 2003. See more design cases please click here .

Sarah Parmenter In an interview about her process and design principles when designing a train timetable app.
For designers, the iphone and the ipad are new platforms. Design Evolution on the iphone and ipad is still in its infancy compared to the experience of graphic and web design.
Here, Sarah shares with you the simple design process and basic principles of the train timetable software that may inspire your own design projects. To simplify the process, we assume that the API to get the train running data is available.

1. First, make sure that your ideas have not been done yet. If you find that you already have a similar app, you need to do better than it does, with some unique optimization design. The best way to do this is to search the itunes store for existing ipad apps.

2. When you have a creative, you need to have a clear positioning, it will be in the subsequent design process to determine the app design points. App positioning can be determined by using the Apple HMI Guide (Human Interface guidelines) diagram.
The more features of the app, the more remote the location of the coordinate origin in the diagram, the more delicate and easy-to-use interface design is needed to differentiate them from other competitors. In this case, we position the app at the origin, which is a simple auxiliary tool.

3. After determining the app positioning, the next step is to focus on the core features of the app. This is especially important when working in a team design. When a team presents a variety of functional requirements, it's easy to get bogged down in the controversy over which features to include in the first version. Apple called the process design ads (Application Definition Statement), or design-lite ads.

4. At this point, many people will think that the design of the app has been very clear, you can directly start to design a graphical interface or even coding. In fact, the previous process, only the design of the import phase. What we're going to do next is product sketch design. Generally we use paper and pens to draw, they are the simplest, the lowest cost of learning tools. According to our design experience, sketch out the user needs to use the interface, including such as button interface interaction elements, filter out the most common Core users, the most suitable for mobile application scenarios.

5. We want to design the auxiliary tool software, usually, it only needs the main interface, and an auxiliary interface that displays relevant information on the back, it is triggered by the information button to flip the display. If you are designing other apps, you may need more interfaces. The point is to design a switch between the interface and the interface, which is especially important when designing for delivery to the developer. We call this process app functionality walkthrough.

6. Now, start the app's low fidelity prototype design. The point is not to get bogged down in too much detail, but the minimum is to digitize your paper sketches and make it easier to keep improving on your computer. So, try to use black and white, rough lines and graphics to make the minimum, do not tangle in detail, wasting time.

7. After the completion of the low Fidelity prototype, began to design attention to detail and precision of the high-fidelity prototype. I use Photoshop and you can choose other tools that you know well. In general, I will set the size of a 1024x768 canvas for the ipad, and then design the details based on the low Fidelity prototype.

8. When we design the main interface of the app, showing the train timetable is the focus of the design. It does not need to include all features, it should highlight the train arrival time, departure time, list the necessary information such as delay or cancellation.

9. In view of the fact that Apple advocates a textured, simulation-based graphical interface, the app's interface is designed to be as close to the user's familiar station timetable as possible. In color, use gray, black, bright yellow and red, with some personalized icons to indicate late and canceled status.

10. It is important that the information displayed by the app must be concise, with no extra text. Therefore, in the interface design, we do not introduce any gorgeous graphics or other information to interfere with users, so that they can see the use of the app at a glance. Using the interval color between data entries, showing arrival and departure times with eye-catching fonts, is a good design embodiment. The relevant information interface behind the main interface, using Apple's standard interface, provides users with the ability to add attention after the search train.

11. I use a lot of subtle gradients and some textures, and it's important to make sure that all the information is clear, not obscure, and not misleading to the user.

12. You can now start thinking about the design of icon. This will determine the app's identification on the App store. You can start with a simple outline design, and first show the core ideas.

13. Unless necessary, your icon is best not to include text, try to use with your app graphics interface consistent with the material and gradient. If you want to present the user with a high quality UI design, don't forget to design the icon as 29x29,72x72, and 512x512 three sizes.

14. If you do not develop the app's functionality yourself, you will need to deliver a clear design guide to the developer. I will focus the interface and description on a large image and give the developer a clear picture of all the things that can be met as much as possible.

15. Finally, we put the minimum real prototype, all the graphical interface design (usually PSD) and the icon packaged together, make a clear callout, sent to the developer. Sometimes, you may also need to slice the PSD into PNG to make it easy for developers to use it directly.

post-translation sense:

The design process that Sarah describes is not much different from the process of designing traditional web software, but is based on a unified design methodology. However, the App Store pioneered a new software ecosystem that not only rewrites the way software is delivered and consumed, but also has a significant impact on the design of the software.

The successful application on the App Store, most of them are personal-oriented software, they function simply (relative to the traditional B/S or C/s software), pay attention to meet the core needs of users, design to strive for perfection, I call them micro-application. Because of this micro-word, the design process of these applications is more agile than the traditional UCD process, and the micro-word brings the App store over 300,000 (up to December 2010), and it also creates a winner-take-all survival rule.

Successful app design requires that users be attracted to the first day of the line. If you don't get into the list in the first month of the IPO, you'll die in a second month. The micro-application soon release, the often law breaks, and it executes the Apple rule, theawesome,the release incredible.

Sarah's design process can be summed up in the following steps:

Market positioning-"app definition (ADS)-" Concept sketch-"low-fidelity prototype-" High-fidelity prototype-"Design deliverables description and collation-" outsourcing development

In this process, there is no traditional UCD methodology emphasized in the user analysis, scene analysis, information architecture design and other links, they have become the basic principles, into the specific prototype design process. Why is that? Or because of the characteristics of the micro-application decision. The software is small enough, does not need and cannot withstand the cost of lengthy basic analysis and design processes, and it requires a more agile design process that meets the specific needs of the user with the best possible design.

Similarly, the agile design process, which forces the design team to tailor the needs, can better adapt to the winner-take-all rule. The failure of a small software, the loss of probably just 4 weeks of work time, it is not a big deal. You can achieve success through another new product.

The most enlightening part of this interview is the importance of agile design for app design and the persistence of foreigners in the design process when faced with micro-applications.