What's New in OutSystems 10
Mobile Design Considerations
This lesson is part of the Mobile for OutSystems Developers course.

Welcome to the Mobile App Design session. In this session
we'd like to talk about how designing for mobile apps is different and
understanding that it is different.
Why is it different? Because mobile devices have different types of
capabilities so we'll discuss some of the details of how they have different
types of capabilities and what those differences are, and then finish up by
talking about mobile user experience. Mobile users have high expectations
because there are a lot of great apps out there and they now have experienced
those, so we really have to change our way of thinking to be able to create
great mobile apps. So mobile app development is not your typical
development and it's important that we understand the nuances of this because
39% of all online traffic is mobile.
This is now up from just a year or two ago when it was about in the low
thirties now we're at 39% percent as far as the global average and
not only is more and more of a percentage of online traffic mobile, but
when you look at the average person, the average person is now using more and
more data, so from 2010 all the way up through 2015 you can see this constant
increasing amount of data that each person is using through their smartphone,
so people are using phones more and more and those mobile devices are consuming
more and more data all the time. So we need to understand how mobile
development is different. And how is it different?
Well obviously we're going to be developing for the device and a lot of
times when we see mobile device people think mobile phones but it could also be
a tablet so we do need to think specifically about the type of device
who the users are and who we are targeting
and then one thing that we can't forget is that this is their device. It has
their music, their contacts, it has phone numbers and lots of things that are
personal to them and they have with them all the time, it's in their pocket. So as
they're carrying it around it becomes something that they really use and
are attached to in a very very personal way.
So when we're developing we need to understand that the conditions are a
little different and the people think about interacting with that device in a
slightly different way. So is it really that it's just a small screen because
we're on a phone or tablet? And the answer's no, not all phones and tablets
are small, we now have the phablet and the super large tablets, we even have now
some different types of things that look like laptops but have touchscreens as
well. So it's not necessarily a small screen but what does change is that the
inputs are different and the fact that most of these things are touch-enabled
and when they're touch-enabled then the types of inputs are going to be
whether they're scrolls or the smaller keyboard, there's a lot of changes to the
way people can input information. The inputs can also be thought of as being
more powerful because the device has things like knowing its location it has
its GPS, it has an accelerometer and a gyroscope to know the different types of
locations its in and the altitude that it's in so it knows its orientation,
there's a camera for video and image processing there's the ability to do
audio with a microphone and then also play different types of audio. And it has
things like Near Field Communication to be able to work with other types of
devices that are nearby. So the inputs are different and as we're grabbing all
of that input obviously we want to give some sort of feedback, the outputs are
different. So we do have that smaller screen but we can also push
and let people know, a lot of times when we do that it may actually cause the
phone to vibrate, so we do have the ability to vibrate or even play sounds,
and those sounds can then notify the user of what's going on. And that can be
important because the context in which we're using these devices may be public
areas, so we may need some sort of vibration or some sort of audio that
might go to the different headphones that we might be using but we're going
to be using this in different types of areas so some people are using it at
home but most of the time at work, on the go,
whether you're at the airport or the store or at school, wherever you are,
people are constantly using their phones. So if they're constantly using their
what are the capabilities of these devices that we should be thinking of?
Well obviously the typical phone is a little bit slower than the typical
laptop, and one of the interesting things lately is that a lot of times the phone
or the tablet have as many or more pixels than our desktop device does.
So we have a slightly less powerful processor with less memory, significantly
less memory, and its trying to display the same number of pixels to go ahead
and do all of the work. Now while it's trying to do all that work, obviously
it's trying to display information in the browser or through the JavaScript
engine and while it's doing that work, some of these different types of engines
and browsers are faster than others. So you can see that the laptop does it very
very quickly, the iphone little bit slower, and then some of the phablets or
even tablets can be significantly slower, so it depends on the type of device as
well as the browser and the JavaScript engine that it's using directly. So we
can worry a little bit about that but we also need to worry about the network.
And just because we have 4G in some places doesn't mean that 4G is
available everywhere. So a lot of people think 4G is going to be the standard so
there are no performance problems anymore and that can be a very bad
assumption, because there are a lot of different types of networks and 4G
although is the best, it's not even the best anymore, it is something that isn't
available everywhere, so LTE isn't everywhere and when it's not available
then we actually step down to 3G or 2G. So you can see that most of the time
we're working on 2G or 3G from a worldwide perspective and even in the US
3G is much more apparent than others, so 70% of the time our
connection isn't 4G LTE so that can really be a problem. Now understanding
that we may not get the fastest connection,
what are some of the other network problems or network issues that we
should understand, and when you think about our devices connecting to the
network, we connect to a cell tower that then connects to some controllers that
eventually get us to the point where we go through a firewall and connect to the
internet. So the question becomes how many phones are using a particular tower,
and when the tower connects, how many different types of support nodes or
gateways or between us and the internet, and how big of a pipe do we have to send
data from the different types of nodes that we're working on?
Well it's important to to know those types of things but one of the things
that is going to be true no matter what is that when we connect to any of the
servers through the towers there's going to be some latency on the front end of
being able to kind of do the handshake and make sure everything is fine. When we
think about desktop computers and being able to make requests, we typically have
20 to 150 millisecond latencies so the average is only 80. When you look at
mobile phones, it's much worse than that. So mobile devices have anywhere from 50
to 550 millisecond
of latency and then the download begins. So there's a lot more
time spent waiting for the connection and talking back and forth to the server.
Now why is that important?
Well when you think about requesting a particular screen, the screen may have
lots of CSS, lots of JavaScript, some images, different types of fonts, and
other types of things. So if a particular screen has 71 requests that need to be
made, if it's a Web page, and each of these have an average of 80 milliseconds
latency, well those 80 milliseconds really don't add up to that much and,
depending on the number of connections we have, a lot of these can begin loading
somewhat simultaneously. When we think about phones jumping that latency up to
over 300 milliseconds and knowing that the phone will probably be on some sort
of network that it's sharing with lots of other devices, it may not be able to
open many different channels, so we may be limited to only four requests at a
time or eight requests at a time, and that means that it will have to wait for
a number of these. So having lots of requests on a particular screen can
cause the load time to go way up and really hurt the overall user experience,
so we need to understand how many resources are on a particular screen
that we're working with and how much data is going to flow back and forth because
the network is somewhat limited. So we've tried to think about how people are
going to be using their devices and what they do, what the actual technical
networks and hardware experience is going to be, but what about the overall user
experience? A lot of mobile apps have been created and number of mobile apps are
considered failures. Well
why do mobile apps that get created fail? Well over 60% of the reasons
of why people say their mobile app failed, were user experience related.
And that we didn't understand the user, we didn't get the right features in, and
didn't really engage the mobile user the way they had hoped. So a lot of these are
user experience problems. So when we design for mobile apps, we need to
remember that it can be used at any place at any time. It is portable so that
at any given moment we could get interrupted and that means that we'll
stop using the app or we'll be distracted and when our attention is fragmented
this session will be very very short. In general you have to think about creating
apps that a six-year-old can use and then your design will probably work for
any of the users that can be distracted as they're walking down the street
trying to work with your app with one thumb. So speaking of walking down the
street, when you think about interacting with a mobile device,
we're going to be using it with our hands. Sometimes people use one hand, some
people use two hands, so you can see that on the phone
it's about half and half, and when we say half and half, some people use it with
one hand and some people with two, but even the two-handed people do it a little bit
differently. And the same thing is true with the tablets. So if we're holding the
tablet in landscape mode versus portrait mode, we may interact with the tablet in
a different way. So it's important to think about how our users will be using
our apps and on what kind of target device they're going to be working with.
So when we say that we're going to be working with our devices using our hands
well, if we think about it in a little more detail it's really with our fingers and
our fingers are much bigger than we expect. A baby's finger is about 7
millimeters and a pro basketball player's fingers are somewhere down in the
19 or 20 millimeter
size, but the average person has about an 11 millimeter index finger and that
means that we need to give a certain amount of padding usually about 2
millimeters or 10 pixels in between any of the areas that we wish to target for
touch because the fingers are so big they can't be any more precise and you
need to have space in between these to make sure that we don't get incorrect
clicks, or incorrect touches. So that's one set of problems and then the other
set of problems is a lot of times when we're working and we're thinking about
our Web approach we could go ahead and highlight a piece of text very easily
and then we could go ahead and alter that text. If you think about trying to
do the same thing with a phone, going ahead and clicking at one particular
part of the sentence and then highlighting things is much more
difficult, and trying to do
cut and copy or paste and have access to all these pieces it's going to have to be a
lot bigger because the size of the finger and touching these individual
controls, these will be too small to be able to do that. So we really have to
think about design and alter our design on how that works.
Now when we say we're going to be using other fingers, sometimes it's actually our
thumb, and we said that you may be using it with one hand or two hands and if
you're using it specifically, if you see most of, if you believe a good majority
of your users will be using one hand, it's important to think about well on
the screen where in the real estate should most of our things be, and down at
the bottom it's easy to get the things and it's not too hard to stretch to most
of the screen but there are certain parts of the screen we either can't
reach or it's actually painful to kind of move our thumb in that direction to
be able to do that. And depending on which device, and how big the device is,
you can see that
the amount of area that we have trouble getting to can really increase quite a
bit. Now as we're building for the device a lot of people will say "okay well you
know, we already have a Web site, so let's just use responsive Web design" and Ethan
Marcotte went out and basically said that "responsive Web design will not
serve as the perfect replacement for mobile Web sites" and what he was really saying
there is that when we target mobile and we optimize it, the performance of that
site and the way in which it's going to work, the user experience is going to be
vastly different. So responsive Web design and just reusing our current
Web site making it responsive may not create the type of experience that our
users are looking for. And part of the reason for that is that mobile apps have
now began adopting a number of different mobile patterns that help make up the
screens and improve the user interface and the interactions that the users have.
So there are a lot of very interesting patterns that have emerged, things like
the carousel, things like the accordion and the timeline or things that
you've probably seen before and are familiar with because they are that
prevalent in mobile applications. One other thing to think about is that we
have the difference between personal applications and work apps, so there are
B2C apps where we are consumers and they're distributed as apps in public
stores and they have really great user interfaces because people know that
individual people are going to be using them and we have to persuade them that
we have a great app and that they're really going to enjoy the experience.
Many times on our business to enterprise apps, they're distributed internally to
employees and
the thought is that we can invest less in the user experience because it is an
enterprise app. The problem with that is that these days in a lot of places we
have our Bring Your Own Device type of policy and the user will be able to use
their own device or the user will compare the experience to what they're
used to on their device, which means that a lot of B2E apps that are built for the
enterprise are going to be compared or running right next to a typical B2C app.
So the user expectations are very high and they're going to compare that app so
it's important that that app is still designed well and makes sense. So when
we're designing the different parts of our app one thing we should always
remember is designing for perceived performance. And why do we say perceived
performance instead of just designing for performance? Well we want to design
for good performance but we may have different types of information that is
readily available
why not put the information we do have on the screen as quickly as possible, and
then go ahead and load the rest of the information when it's available? So
perceived performance is about how it appears to perform not necessarily how
it is performing, so sometimes it's displaying some data keeps the users
sort of distracted and happy while they're reading that information we can
begin loading the other information asynchronously as needed. So when we
think about designing a mobile user experience
remember that it is a smaller screen so we're not going to be able to fit it all
and that responsive Web design won't always work, so we need to be able to
target the mobile experience really well. To do that targeting we need to know who
our user is and what they're trying to do, and when you begin thinking about a
design a lot of times you'll put in a lot of features and you really need to
go back and think about your user and remove as many things as they don't
absolutely need.
Because we're on a smaller device with a little bit less power
we may want to make sure that our app is as focused as possible, because their
expectations for performance and usability are very high. So for us to be
able to design a mobile app we may want to think about this overall experience
and storyboard it out and make sure that we understand the navigation and the
transitions between pages, and understand that really well because that's going to
have a huge effect on the overall user experience. So in general we have to
really shift the way we're thinking about designing applications because
mobile apps will take a lot more work and are a lot different than what we may
have experienced in other places. So, in this section, we talked about how
designing mobile apps is different because people think about them
differently, the devices have different capabilities and we want the overall
user experience to be really good because expectations are high and to be
able to generate that type of great experience we really have to change the
way we're thinking and understand a lot of new dimensions that are affecting
that overall experience.