UX Design for Mobile

Pablo Perea, Pau Giner

• Publisher: Packt Publishing
• Year: 2017
• eBook ISBN: 9781787283596
• Edition: 1
• Topic: Computer Science
• Subtopic: Digital Media
• Index: Computer Science

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 ForThis 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 DetailUser 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 approachA quick and simple guide to design and test a mobile application from the UX design point of view

Prototyping with Code - Using Framer Studio

"Success Comes Through Rapidly Fixing our Mistakes Rather than Getting Things Right the First Time"

- Tim Harford

A prototype simulates part of the behavior of your future app. An advanced and scalable way of describing the behavior of digital products is through code. There are different tools and libraries that try to reduce the time required to produce a prototype with a programming language. In this book, we will make use of Framer.js, a library based on JavaScript, and Framer Studio, a visual prototype development tool based on Framer.js and CoffeeScript.

This prototyping approach can be maintained and developed over time if it is planned properly. Also, thanks to Framer.js, our prototypes will be as realistic as required because we can use high-fidelity designs with advanced gestures and animations. It will allow us to obtain feedback very close to what we can have with the real product.

Framer.js

Framer.js is an open source framework based on JavaScript for the production of quick prototypes. It allows you to create both basic and more advanced prototypes with detailed interactions (https://github.com/koenbok/Framer).

Framer.js captures the basic building blocks you need to build a prototype in code. You can define and control layers, changes of state, and animations. Framer.js also allows you to import Photoshop and Sketch files using Framer Generator, an application distributed with the framework. This reduces the time you need to create the initial layers of your prototype and the time required to put them together in the right place.

You can start creating your prototypes directly with Framer.js using a general purpose code editor such as Atom or Brackets. However, Framer Studio is a commercial product that has been created with the specific purpose of creating prototypes with Framer.js. Framer Studio is used by many large companies and is the tool we'll use for our examples in this chapter.

Framer Studio

Framer Studio allows you to optimize your prototyping workflow, thanks to a desktop interface that shows the visual result of your code as you write it. In addition, it helps you keep your code simple, thanks to CoffeeScript, a programming language with a syntax for quick writing, which compiles behind the scenes into JavaScript.

In Framer Studio, the user interface is composed of several parts:

• The menu with main actions and some auto-code options to help you build your prototype
• The code editor where you will program your prototype
• The preview area where you will see the design in sync with your code
• Contextual panel with the layer inspector or properties related to a selected item

Screenshot of Framer Studio with a very simple project

Additionally, Framer Studio will allow you to import your designs from Adobe Photoshop and Bohemian Sketch with an easy-to-use wizard. This feature will allow you to change the visual design of your application, import again, and see the update in the preview area. You can see the results of your changes quickly and iterate over your design solution until it is pixel perfect. Using this tool will help you improve your prototyping workflow.

Understanding CoffeeScript

CoffeeScript is a programming language that compiles into JavaScript. JavaScript is a widely used and powerful language most notably used as the scripting language for the web. CoffeeScript provides a simplified syntax for JavaScript, making the resulting code simpler to write and understand.

With CoffeeScript, you will be able to write simple code describing your prototype, and it will be automatically transformed into JavaScript, so your prototype will work in browsers such as Firefox or Chrome, making your prototypes compatible with multiple platforms, simplifying the process of testing them with real users, and presenting your design ideas to your team and stakeholders.

Here's an example of a simple function in CoffeeScript that multiplies a given number by two. Do not worry if you do not understand the code perfectly as we will explain CoffeeScript grammar in more detail later in the chapter:

 double = (x) -> x * 2 

Below, you can find the compiled version in JavaScript code. As you can see, some words such as function or return and some curly brackets and semicolons have been added. Those are reserved words by programming languages such as JavaScript. They are used in the syntax of the language, and cannot be used as a name of variables or functions.

 double = function(x) {
 return x * 2;
}; 

That sounds good, but then, do I need to perform an additional step to compile my code? Well, that is one of the best things about Framer Studio. This process will be transparent for you; you will be programming in CoffeeScript, and the result of your code will be shown without any action on your part.

Let's start coding with CoffeeScript

Although this is not a programming book, we will take a quick tour of some basic CoffeeScript syntax principles; however, you will need some programming knowledge to follow this chapter. If you have never programmed, it is recommended to complete the content of this chapter with a programming tutorial in CoffeeScript.

With the prototypes included in this book, you will be able to start using this prototyping solution and see whether it will be useful for your projects and workflow. You can expand your knowledge with the official documentation where all this content can be found in much greater detail, at http://coffeescript.org/.

Variables and operators

Some of the most basic elements of a programming language are variables and operators. Variables are storage locations where you keep information that you will use at some later point. For example, you can create a variable to track the number of notifications the user has in your prototype; that variable will determine how the notification badge is presented, and it will allow you to change its value according to the logic of your prototype.

It is important to give variables a clear name, normally using camelCase, for example, numberOfNotifications, or using underscore, for example, number_of_notifications notations since spaces are not allowed when naming the variables.

Operators allow you to perform arithmetic and logical operations using values and variables as input. You will be using those to define the logic of your prototype. The result of each operation can be also part of another operation, or can be stored in a variable.

Let's look at some simple examples. Let's say we have a variable called players where we will store the number 4. In CoffeeScript, this will look like this:

 players = 4 

As you can see, we use the = symbol to assign a value to players. Now, imagine that we have a second variable called tshirts, where we will store the value 4 multiplied by 2. This will look as follows:

 tshirts = 4 * 2 

However, we can also use the value stored in players to calculate the value of tshirts, leaving the code like this:

 players = 4
tshirts = 4 * players 

For the calculation, we have used an * to perform a multiplication. This asterisk is an operator and in CoffeeScript, we have many operators that we can use in our programs.

In CoffeeScript we can find arithmetic operators to do operations with values and variables. The most basic are +, -, *, / and they allow us to sume, substract, multiplicate and divide. Y...

Table of contents

• Title Page
• Copyright
• Credits
• About the Authors
• Acknowledgments
• About the Reviewer
• www.PacktPub.com
• Customer Feedback
• Preface
• Design Principles and General Design Planning
• Research - Learning from Your Users
• Exploring Ideas - Sketching
• Mobile Patterns - Web App, Android, and iOS Best Practices
• Detail Your Solution - Wireframes and Mockups
• Prototyping - Bringing Your Ideas to Life
• Prototyping with Motion - Using Tumult Hype
• Prototyping with Code - Using Framer Studio
• User Testing
• Bibliography and References