UX Design for Mobile

UX Design for Mobile

by Pablo Perea, Pau Giner
Released July 2017
Publisher(s): Packt Publishing
ISBN: 9781787283428

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Get proficient in building beautiful and appealing mobile interfaces (UI) with this complete mobile user experience (UX) design guide.

About This Book

  • Quickly explore innovative design solutions based on the real needs of your users.

  • Create low and high fidelity prototypes using some of the best tools.

  • Master a pragmatic design process to create successful products.

  • Plan an app design from scratch to final test, with real users.

    • Who This Book Is For

    This book is for designers, developers and product managers interested in creating successful apps. Readers will be provided with a process to produce, test and improve designs based on best practices.

    What You Will Learn

  • Plan an app design from scratch to final test, with real users.

  • Learn from leading companies and find working patterns.

  • Apply best UX design practices to your design process.

  • Create low and high fidelity prototypes using some of the best tools.

  • Follow a step by step examples for Tumult Hype and Framer Studio.

  • Test your designs with real users, early in the process.

  • Integrate the UX Designer profile into a working team.

    • In Detail

    User experience (UX) design provides techniques to analyze the real needs of your users and respond to them with products that are delightful to use. This requires you to think differently compared to traditional development processes, but also to act differently. In this book, you will be introduced to a pragmatic approach to exploring and creating mobile app solutions, reducing risks and saving time during their construction.

    This book will show you a working process to quickly iterate product ideas with low and high fidelity prototypes, based on professional tools from different software brands. You will be able to quickly test your ideas early in the process with the most adequate prototyping approach. You will understand the pros and cons of each approach, when you should use each of them, and what you can learn in each step of the testing process.

    You will also explore basic testing approaches and some more advanced techniques to connect and learn from your users. Each chapter will focus on one of the general steps needed to design a successful product according to the organization goals and the user needs. To achieve this, the book will provide detailed hands-on pragmatic techniques to design innovative and easy to use products. You will learn how to test your ideas in the early steps of the design process, picking up the best ideas that truly work with your users, rethinking those that need further refinement, and discarding those that don’t work properly in tests made with real users.

    By the end of the book, you will learn how to start exploring and testing your design ideas, regardless the size of the design budget.

    Style and approach

    A quick and simple guide to design and test a mobile application from the UX design point of view

    Table of contents

    1. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Downloading the color images of this book
        3. Errata
        4. Piracy
        5. Questions
    2. Design Principles and General Design Planning
      1. Switching your perspective to focus on the user
        1. Getting organizations to adopt a user-centered perspective
      2. Design principles
        1. Needs from our human condition
        2. Needs from general expectations
        3. Needs from the specific context of use
      3. General design planning
      4. Being pragmatic
        1. Design is not about making things look nice
        2. Users are not able to tell you what they need
        3. You (or your team) are not your users
        4. User experience is not a list of features
        5. Your goal is not to make your client or boss happy
      5. Summary
    3. Research - Learning from Your Users
      1. How we will do that?
        1. Getting to know your users
        2. Mental model - understand how your users think
        3. What is the conceptual model?
      2. Researching methods
        1. Observation and interviews
        2. Affinity Diagram
          1. The method steps
        3. Card sorting
          1. Open card method steps
          2. Closed card method steps
          3. When is it convenient to perform this method?
        4. Tree Test
          1. The method steps
          2. How to improve the organization
            1. Content organization
            2. Area naming
            3. The working memory limit
        5. Surveys
          1. What we want to discover?
          2. Find the participants
          3. Determining the questions
            1. Open-answer questions
            2. Questions with pre-established answers
          4. Humanize the forms
      3. Research documents
        1. The Persona Document
          1. How should I create a persona document?
            1. Better with an example template
          2. Demographics
          3. Picture
          4. Description
          5. Domain and technical expertise
          6. Goals
          7. Frustrations
          8. Motivations
        2. Scenarios
        3. User journeys
          1. Create a User Journey
        4. Competitors' analysis
          1. Functionality analysis
          2. Vocabulary analysis
        5. Target users, supported users, and non-supported users
      4. Being pragmatic
        1. Recruiting participants
        2. Avoiding biases
        3. Looking for the signs
      5. Summary
    4. Exploring Ideas - Sketching
      1. Adopting the sketching mindset
        1. Sketching basics
        2. Sketching tools
      2. Producing results fast
        1. Adjusting your focus
        2. Timeboxing with the Crazy Eights technique
      3. Organizing your exploration
        1. Decomposing your problem
        2. Identifying conflicts
      4. Communicating your ideas
        1. Creating storyboards
        2. Organizing critique sessions
      5. Being pragmatic
        1. The perfect is the enemy of the good
        2. This is not about inspiration
        3. Connecting the conversation to the design goals
        4. Making tradeoffs visible - you cannot emphasize everything
      6. Summary
    5. Mobile Patterns - Web App, Android, and iOS Best Practices
      1. Web application approaches - responsive, adaptive, and flexible
        1. Responsive behavior
        2. Fluid
        3. Adaptive
        4. Hybrid
        5. Frontend frameworks
        6. Design in columns
      2. Mobile application design patterns
        1. Mobile user interface design patterns
          1. Navigation
            1. Sliding drawer
            2. Upper area tabs
            3. Bottom menu
            4. Placing actions in the screen to facilitate navigation
            5. Back button
            6. Multiscreen task
            7. Explore navigation
            8. Floating buttons
          2. Notifications
            1. Movement in notifications
            2. Circle hint
            3. Count notifications app icon
          3. Dialogs
          4. Galleries with miniatures
          5. Arrows
          6. Portrait (vertical) and landscape (horizontal) orientations
          7. User interactions
            1. One-tap interaction
            2. Share functionality
            3. Comment and review
          8. Secondary actions
          9. Handling errors
          10. Overlay tips
          11. Roadblocks
          12. In-content messages
            1. Displaying a message as the first block of content
          13. Other mobile user interface design patterns
        2. Mobile design behavior patterns
          1. Progressive disclosure
          2. Lazy login
          3. Swipe down to refresh
          4. Search suggestions
          5. Reciprocity
      3. Android and iOS differences
        1. Physical buttons
        2. Screen density and features
        3. UI elements
      4. Being pragmatic
        1. Explore different solutions
      5. Summary
    6. Detail Your Solution - Wireframes and Mockups
      1. Understanding wireframes
      2. Wireframes as a functionality specification document
        1. Layout
        2. Gestures
        3. Transitions
          1. Trajectory
          2. Timing
          3. Duration
          4. Speed
      3. Mockups
        1. Testing your designs with real content
        2. Specifications and assets for multiple screens
          1. Understanding units and pixel densities
          2. Specifications file
          3. Automated solutions
          4. Touch target
          5. Images with good resolution
          6. Pixel perfect icons
      4. Being pragmatic
        1. Learn how to code
        2. Test in real environments
        3. Stay up to date on the latest trends
      5. Summary
    7. Prototyping - Bringing Your Ideas to Life
      1. Adopting the prototyping mindset
      2. Deciding the best prototyping approach for your needs
        1. Deciding on the type of prototype
        2. Selecting the appropriate tools
      3. Planning the prototype
        1. Deciding what to prototype
        2. Deciding how to prototype
      4. Being pragmatic
        1. A prototype is not an early version of your product
        2. A prototype is worth a thousand meetings
      5. Summary
    8. Prototyping with Motion - Using Tumult Hype
      1. The role of motion in prototyping
      2. The basic concepts of Hype
        1. Scene list
        2. Scene editor
        3. Property inspector
        4. Timeline and layers
        5. Code editor
        6. Importing and exporting
        7. Prototyping navigation
      3. Manipulating layers with interactions
        1. Manipulating layers
          1. Using a single layer for the active state
          2. Using separate layers for each state
        2. Supporting scroll and navigation
        3. Supporting gestures
      4. Prototyping complex behavior
        1. Composing animations
        2. Supporting user input
      5. Being pragmatic
        1. Organize your layers
        2. Preview often
      6. Summary
    9. Prototyping with Code - Using Framer Studio
      1. Framer.js
      2. Framer Studio
      3. Understanding CoffeeScript
      4. Let's start coding with CoffeeScript
        1. Variables and operators
        2. Types
        3. Functions
        4. Loops and conditional structures
        5. Objects and methods
      5. Understanding Framer.js
        1. Layers
        2. Animations
        3. Events
        4. States
        5. Components
      6. Creating prototypes with Sketch and Framer Studio
        1. Welcome Tour Prototype
          1. Artboards states
          2. Prototype behavior
          3. Coordinating animations
        2. Drawer Navigation Prototype
          1. Using the ScrollComponent
          2. FAB button event reacting
          3. Drawer menu functionality
          4. Input field search functionality
        3. Bottom Navigation Prototype
          1. Bottom navigation
      7. Being Pragmatic
        1. Be part of the community
        2. Learning resources
        3. Test with your mobile phone
        4. Stay up to date with Framer news
      8. Summary
    10. User Testing
      1. Understanding the role of testing usability
        1. Deciding what to test
        2. Using the right method
      2. Planning the test
        1. Defining the goals
        2. Scenarios and tasks
        3. Defining a script
        4. Setting up the environment
      3. Conducting usability tests
        1. Recruiting participants
        2. Introducing the process
        3. Observing users behavior
        4. Identifying key aspects and summarizing the results
      4. Being pragmatic
        1. Inviting people from your team to view the research sessions
        2. Learning is more important than validating
        3. Check you are answering the research questions
        4. Combining research with measurements
      5. Summary
    11. Bibliography and References
      1. General
        1. Kano model
        2. Gestalt principles
        3. Mental model references
        4. Conceptual model references
        5. Persona document references
        6. Card sorting references
        7. Tree testing (Reverse card sorting) references
        8. Affinity diagram references
        9. Crazy eights references
        10. Survey references
        11. User journey references
        12. Scenarios references
        13. Progressive disclosure
        14. Reciprocity effect
        15. Lazy login
        16. User testing
        17. Mobile patterns
        18. Information architecture
        19. Visual design
        20. Prototyping
        21. Tumult Hype
        22. CoffeeScript
        23. Framer
        24. JavaScript
        25. jQuery
      2. Image sources
        1. Chapter 1
        2. Chapter 2
        3. Chapter 3
        4. Chapter 4
        5. Chapter 5
        6. Chapter 6
        7. Chapter 7
        8. Chapter 8
        9. Chapter 9

    Product information

    • Title: UX Design for Mobile
    • Author(s): Pablo Perea, Pau Giner
    • Release date: July 2017
    • Publisher(s): Packt Publishing
    • ISBN: 9781787283428