IPhone application user experience design practices and cases

Source: Internet
Author: User
Chapter 1 iPhone Application Software Overview

This article mainly references the definition in Apple's iPhone User Interface Guide (HIG, which has been upgraded to iOS Human Interface Guidelines) and introduces three types of application software:

Practical application (utility ):

    • Definition: allows users to quickly obtain specific information or execute a specific defined task.
    • Features
      • Minimal Installation
      • Simple process and Layout
      • Standard user interface elements

Productivity applications ):

    • Definition: more widely used application concepts
    • Features:
      • Hierarchical Structure
      • Acceleration key and shortcut key

Immersive applications ):

    • Definition: Used to play games, watch media content, and execute specific tasks
    • Features:
      • Contents
      • Personalized user experience


Chapter 2 iPhone hardware Overview

Briefly introduces the hardware features of the iPhone


Chapter 3 Introduction to user research

What does the user study:

    • User Requirements: user research helps to understand user needs, including:
      • How do users complete daily transactions?
      • What is the most important thing for users?
      • What requirements have not been met
    • Background: user research helps to understand the location, reason, and time of application use.
    • Users' perception of applications: Some Problems may prevent users from choosing your applications. Through user research, you can find problems related to understanding.
    • Unpleasant: We will find that users are uncomfortable with the current workflow.
    • Wording and term: You need to understand the wording and term used in a specific field, as this affects the design of the application.
    • Behavior Pattern: understanding a user group or behavior pattern in a field


User Research Methods:

Shadow method: track the user to be tried for a period of time and make observation records

Field interviews: one-to-one communication in a real environment.

Log Analysis: You can record your own activities.


User Research Plan:

    • Research objectives and objectives
    • Study Date
    • User Profile: demographic information, background information, technical experience, etc.
    • Method
    • Problems in research
    • Role
    • Device
    • Report Content


Chapter 4 Analysis of user research results

The result analysis is performed on the Content collected by the user's research. The steps are as follows:

    1. Share Data
    2. Analysis notes
    3. Record Analysis results and ideas
    4. Report results
    5. Create design tools
      1. RoleIt is the user information of typical prototype users and represents the needs of many users. It can be divided into main character roles (one type of users that must be satisfied for product success) and secondary character roles (one type of users with lower priority) and some negative user roles (a type of users that are definitely not satisfied );
      2. ScenarioDescribes how character roles use your applications to achieve their goals. Includes: motivation (what prompted the role to enter the scene), background (where the role is located when performing the scenario; and whether the background is changed in the scenario; are there other people involved? Which other devices are used?) and influencing factors (which types of influencing factors are involved in this scenario? How are role roles handling the influencing factors), goal (in this scenario, what is the goal of a character role, and its goal is information? Emotion? Crafts ?).
    6. Compile product definition documents


Chapter V competitive product evaluation

Competing product analysis methods:

  • Requirement matching Diagram
    • The requirement matching diagram is the most effective method when you observe how competing products meet user needs.
    • Arrange the satisfied requirements and indicate whether they are valuable, score them, draw a correct number, or briefly describe them.
    • Figure example


      Product 1

      Product 2

      Requirement 1    
      Requirement 2    
  • 2x2 quadrant chart
    • Demonstrate the overall application competition and the simplest way to identify macro opportunities.
    • Focus on the two aspects of the application. The two metrics will vary with different fields and application strategies.
  • Heuristic Evaluation
    • This includes checking the user interface and adjusting it based on accepted usability principles (empirical inspiration.
    • Nielsen's issue severity rating
      • 0: this is not a problem of availability.
      • 1: minor availability issues. It will not be processed unless there is extra time
      • 2: Small availability issues. Low priority for fixing such problems
      • 3: Major availability issues. Need to be addressed with a high priority
      • 4: catastrophic availability issues. It must be resolved before the product is released.
    • Nielsen's 10 Availability empirical guidelines for iPhone
      • 1: The application status must be visible. The application should let users know what it is doing through appropriate feedback.
      • 2: applications must match the real world. The application should perceive the user's environment and display the corresponding information.
      • 3: Let the user control the application, do not let the user be bound to the application.
      • 4: prevent errors. Reduce the chances of making mistakes or check for errors, and provide users with "recoverable" options.
      • 5: The application design should be consistent and standard.
      • 6: Try to let users identify objects without remembering or thinking back. Explicitly display objects, operations, and options to minimize the user's memory burden.
      • 7: the application must be flexible and efficient.
      • 8: The application design should be simple and beautiful. There should be no irrelevant information or rarely used information on the screen.
      • 9: helps you discover, diagnose, and recover errors. The error message must be simple and straightforward, and the problem and solution should be clearly stated.
      • 10: provide users with necessary help and documentation. Provide help for context, and help should be concise and clear.
  • Competitive benchmark Analysis
    • Quantitative indicators measure competitors' applications, including the number of errors, the time used to complete the task, and whether the task is completed.

Comparison of competing product analysis methods:




Requirement matching Diagram It is easy to determine which user needs the competing products meet No best practices or inspiration for Reference
2x2 quadrant chart The position of applications in the overall market competition No best practices or inspiration for Reference
Highly subjective
Heuristic Evaluation Find the fastest and cheapest way to best practices and Inspiration Relying heavily on the experience and skills of evaluators
Competitive benchmark Analysis A good way to collect quantitative data Time and effort
Without subsequent interviews, it is difficult to understand the reasons behind the problem.
Chapter 6 exploring application concepts

Create an environment suitable for design and creation

Effective brainstorming

    • Sufficient time
    • Set Goals
    • Ehaina baichuan
    • Have a clear agenda
    • Provide inspiration
    • Set Basic Rules
      • Criticism not allowed
      • Encourage things
      • Pay attention to quantity
      • Adoption of others' opinions and improvement on this basis
    • Capture ideas
    • Select promising ideas

Outline your concept

    • Features of a sketch: Not too detailed, not exquisite, vague
    • Haowai: focusing on big aspects, breaking borders, and cooperating


Chapter 7 create an application concept prototype

Prototype: A design presentation that is completed before the final solution is formed.

Why use prototype:

    • Solving Design Problems
    • Evaluate design creativity
    • Creative Communication Design


Chapter 8 usability testing of application concepts


Availability objective:

    • Helps solve existing design problems
    • Discover unknown Design Problems
    • Establish benchmarks for subsequent studies
    • Collect information for the next edition of the Product
    • Recognized by stakeholders

Book on availability testing of Handbook of usability testing

Availability Test method:

    • Traditional availability testing: when you use your product to complete tasks, you can observe them one by one. When users complete these tasks, they are asked to "do and say", which helps researchers understand the reasons behind user behavior.
    • Rite method (Rapid iterative testing and evaluation)
      • Study how the testing users complete the task, while doing and speaking.
      • Emphasize fast adjustments and confirm whether these adjustments are valid.
    • Paper prototype testing


Chapter 9 User Interface Design

Best practices:

    • Be sure to have popularity
      • Show "Getting Started Guide" Information
      • Annotate the user interface
      • Provides an optional demo
    • Understand your users
      • User Name
      • User settings
      • Favorites
      • Action
    • Excellent content
      • Click screen: When all user interface controls are hidden, the "Click screen" mode is suitable.
      • Click button/area: This mode is applicable when only some UI controls are hidden.
      • Scroll up mode, such as top search
    • Make quick decisions and avoid mistakes
      • Provides smart default values
      • To include a pre-defined list
      • Provide recommended Matching content
      • Record recent activities/selections
      • User speech and Image Recognition
    • Provide appropriate feedback
      • Animation
      • Transition
      • Text warning
      • Sound
    • Minimize user complaints
      • Explain the problem
      • Status quo
      • Save progress

Which efficiency style does the application use?

Hierarchical tab: It is often used for applications with a large amount of content. This method is particularly effective if you do not want to go deep into the subcategories list to display subcategories.

Jiugongge menu: provides more input points for applications with many features or applications requiring visual navigation.

Top tab: the traditional navigation bar is ignored to save vertical space.


Chapter 10 Visual Design

The importance of visual design: attracting users, improving availability, and pleasing users


Visual structure:

    • Group
      • Grouping relevant visual elements can reduce application complexity and help users better understand your design.
      • Groups are mainly reflected by the closeness between elements, but they can also be enhanced by comparison, alignment, and other visual means.
      • You should also consider the user goals identified in the previous research.
    • Layered
      • Through layering, you can guide the reading order in the design interface.
      • First, you can see the most obvious visual elements or groups.
      • This significance is usually achieved through the location and proportion.
        • Position: on the iPhone, the elements above the screen are usually more prominent than those below the screen.
        • Proportion: large visual elements are more eye-catching than small visual elements. You can also create a level in the same visual group.
    • Alignment
      • Effective alignment makes the design easier to understand.


Color: colors are associated with specific meanings based on the environment, culture, and personal experience.

You can also use the following methods to enhance the visual structure:

    • Difference
      • The navigation bar is different from the background. You can try to use contrast colors.
      • The list title is used to differentiate related items. Since they are guidance rather than the main focus, consider using a color with a low contrast.
      • If you choose a personalized paragraph control, make sure that the contrast of the paragraph control is sufficient to better distinguish different paragraphs.
    • Emphasize
      • Can be used to emphasize specific information or tasks
      • It is used to emphasize the main actions on the screen.
    • Category
      • Color is an effective way to classify applications.



    • The default font is Helvetica.
    • The default font size of the navigation bar is 20pt, And the label on the tab bar is 10pt.

Icons and other images:

    • Intuition
    • General
    • Consistency
    • Communication
    • Tips
      • Use an icon that looks the same size (the circle is slightly larger than the square)
      • Always display the icon on the tab. Do not show blank spaces, do not use text or irregular shapes
      • Leave a proper blank between the icon and its description text
      • The description text of the icon must be concise to avoid occupying the adjacent description text location.
      • The icon description must be displayed in case-sensitive format of the title. Do not use lowercase letters or uppercase letters.


Chapter 2 brand and advertisement

Brand definition: People's intuition about a product, service, or company. Brand expression can be carried out within the product through interactive design, visual design, or sound design, or through channels other than applications.


    • Uniqueness: the quality that makes the brand stand out from the competition.
    • Appropriateness: whether the brand is suitable for a product
    • Easy to remember: people can remember the degree of Brand
    • Extensibility: how to expand the content of a brand based on different media, culture, and information types.
    • Depth: whether a brand can convey multiple meanings like a consumer.


Chapter 2 accessibility and Localization

Accessibility can be applied to a wide range of people with visual impairment, hearing impairment, and other disabilities.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.