Tuesday, 18 December 2018

Mobile Phones

The one main factor when it comes to mobile phones is real estate. No, not this type of real estate:

but rather screen real estate. Okay, I'm probably stating the bleeding obvious here, but mobile phone screens are a lot smaller than computer screens, so in this scenario basically every pixel counts. Have you ever tried looking at a desktop webpage on a mobile device? It's practically unreadable isn't it. As such, our apps need to be configured so they can relate to mobile devices, particularly since a lot of people only access the internet through a mobile device (which is probably not the most secure way of doing things, but that is another discussion for another time).

There are other considerations to take into account, such as screen widths. This isn't a factor with iOS devices, but it is when it comes to Android devices. Basically, because Android produces an operating system, it means that the screen sizes are going to change regularly, so we also need to take this into account.

Inputs are another factor. First of all mobile phones are touch screen devices, so the old mouse pointer is no longer a factor. Also fingers do tend to be of different sizes, so we also need to take that into account. Actually, when it comes to mobile phones there are actually a lot more factors in regards to input that we can take into account, such as the cameras, the speakers, and even the GPS system. All of these can be used by the app. Also, text input can be an absolute pain, so many consider taking advantage of auto-complete.

Have a look at this:

This gives us an idea of where the user can reach on the phone. As such we need to take this into account when developing the app. Also, swipe motions are important, particularly since people tend to swipe down, and not up.

Obviously mobile phones are portable, which means people are going to be using them while they are out and about. This leads to another thing - interruptions. They might get a call, or might want to take a photo, or a video. As such, people will want to change to something else, and then be able to return when they are finished.

This leads on to another point, and that is a micro moment. Have you ever suddenly wanted to know something, and opened up Wikipedia to actually find out. Well, this is something that we need to consider - when developing an app, one important thing to take into account are these micro-moments - people might have a sudden inspiration, and we need to capture that inspiration with our app.

So, when approaching app design for a mobile phone, we need to strip our app down to the base components, linearise the content, optimise the most common features, and also take advantage of what the hardware has to offer.

Now for the patterns

One Window Drilldown: This pattern, which is also used on normal web based sites, is probably best known for when you have a series of photos you wish to select. Basically you are presented with a number of options (usually as a grid), and when you press one of the options, the device focuses, or 'drills down', onto that selection.

Hub and Spoke: Okay, the iPhone and the Android have a lot of things that are different, however the hub-and-spoke pattern is reasonably similar. Basically you have a main screen where all of the apps are placed, and you can pretty much access all of the apps from this particular screen. Of course, when you have so many apps that you can't actually fit them on one screen (or use widgets in the case of Android), then you probably need more than one screen to fit them all on, however the principle does generally stay the same.

The above patterns aren't exclusive to the mobile phone, but due to the architecture, they have become quite prevalent. However, the following patterns have developed to work with the limited space that the phone offers.

Vertical Stack: You basically see this one everywhere. Due to the limited width of the phone (and while you can turn it sideways, honestly, who actually does this unless you want to watch a video - I know I don't) this is one of the best navigation tools available. Now, there is no hard and fast rule as to how it applies, and it can been combined (and usually is) with other patterns. What it means though is that pretty much everything is presented vertically, whether it be a news article, or a list of options from with to select. You may even see this with the accordion or collapsible panels. In fact, it works quite well with those patterns.

Film Strip: Another one that you probably see a lot, and it is usually used where there are similar pages to be presented side to side. Obvious example is the main screen on your mobile phone, where you slide either left or right to access apps that may not be on the screen you are looking at. Another feature tends to be dots at the bottom of the screen to inform the user at which position of the strip they are at, though this shouldn't be over used in the sense of putting endless amounts of pages on the strip. A small number usually suffices.

Touch Tools: These are tools that only appear when the screen is touched, or pressed, and will usually display an overlay in relation to the tool that is being used. However, the tool generally doesn't stay there for too long, and will fade after a few moments, most likely in case the user does not wish to take advantage of the tool.

Bottom Navigation: Have you noticed that a lot of apps have their most important navigation tools are the bottom of the screen. Okay, probably not but I can assure you that you will now. Okay, there probably isn't a huge number of icons here, just the really important ones. The reason being is because it is close to where the phone is usually held, so it provides easy access to these particular options.

Sidebar Navigation: This can actually be better than the bottom navigation in that it gives the app more real estate for important navigation tools that can't be squeezed into the bottom navigation. However, you generally won't see it unless you request it, and this is usually done via a hamburger menu at the top of the screen (so called because the three lines look like a hamburger). This has the advantage of releasing more real estate temporarily for navigation options, and also provides more space for more detailed navigation options.

Lists: There are a couple of lists, one of them being the thumb nail and text list. These are obvious on app stores, but can also be found in other places, Ebay and Amazon for example. Normally they appear after a search option is executed, and a list of responses then appears with a small picture and some text nearby. Another list is, well, just the list, where a number of options are provided vertically, and in a way the entire list is actually a button.

Infinite Scroll: This is usually combined with other patterns, such as the vertical stack and the list. Basically what you are doing is scrolling down infinitely (though sometimes you reach the bottom). What will happen is some information is provided and as you are scrolling, the app is loading further information so that it appears that the list is infinite. This can also be implemented by having a button at the bottom with an option to load more content.

Pull Down Action: Have you ever pulled a screen down on a mobile phone to refresh it. Notice how this has literally become second nature to us these days, and we actually scratch our head when this doesn't actually work. Yep, this is one of those patterns that is basically expected when it comes to mobile phones.

Generous Borders: Due to the nature of the phones, and the varying sizes of fingers, this is another one of those necessities. Basically we are looking at having a decent amount of white space around the borders to prevent people from accidentally clicking the wrong button. Mind you, sometimes some designers actually do the opposite to encourage accidental clicking.

Text Clear Button: Typing on a mobile phone is an absolute pain in the proverbial, and getting rid of that text is even worse. This is why the little 'x' at the side of the text box is generally included, like, everywhere. It's to make getting rid of unwanted text much easier (such as that message proclaiming your undying love to that particular person on Facebook - one time when you don't want to press the wrong button).

Take a lot at this video which explores concepts of app design:

One final thing to remember when it comes to mobile app developments is basically the fact that there are really only two platforms - iPhone and Android. Yeah, there is Windows but honestly, does anybody actually own a windows phone (well, one friend I know did, but I don't know if she still does). The problem is that these platforms actually have a pretty detailed list of design standards are requirements for apps to appear in the store.

Look, there was a time when Google was actually a lot less strict, but it turned out that this policy was a two edged sword since quite a few malicious apps were being added. While everybody was railing against Apple's tyrannical approach of allowing content on the phone, malicious hackers were having a field day when it came to Android, which in the end is why Google was forced to tighten up in that regards.

Well, maybe Facebook has now learnt a lesson or two about allowing third parties have unfettered access to data simply by the user giving them permission to do what they don't actually have any idea about.

Creative Commons License

Mobile Phones by David Alfred Sarkies is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. This license only applies to the text and any image that is within the public domain. Any images or videos that are the subject of copyright are not covered by this license. Use of these images are for illustrative purposes only are are not intended to assert ownership. If you wish to use this work commercially please feel free to contact me

No comments:

Post a Comment