Monday, 26 November 2018

Patterns - Putting it Together

Well, we have spent an awful lot of time looking at how to get feed back and make things work for users, however we haven't looked at actually putting things together yet. Well, a part of that has to do with this subject not having anything to do with programming, but designing apps actually involves a lot more than simply writing code, crossing your fingers, and hoping things work.

Now, there is a lot of people who talk about not reinventing to wheel, and in a way this applies to app development as well (and when I say app development, I'm pretty much referring to anything, not just those things that you have on your mobile phone). There is this thing called consistency, and there are a lot of ways that previous developers have used to make their app work. In fact, if you look through many of the websites you will notice that there are a lot of things that happen to be similar, a pattern if you will, and it is these patterns that we will be looking at here, well at least patterns in general, but we will be moving onto patterns as they relate specifically to mobile devices, namely because they happen to be in a world of their own.

The Flow Zone

So, we are going to start of with a theory developed by a gentleman named Csikszentmihalyi (try saying that with your mouth full of crackers) and it is called the theory of flow and sort works as follows:

You see, to get people hooked to your product you need to keep them in the flow zone. If the challenge is greater than the users abilities they will give up in frustration, however if their abilities are greater than the challenge, then they will become bored. As such, you need to balance it out so that they remain entranced. Obviously, there needs to be some adjustments based on the skill level, which is why we also have novice and advanced settings, so that once the novice becomes bored they can then move on to the next level.

The thing is that you don't want to interrupt that flow, you know with pop-ups and the like, because users are likely to get distracted. I'm sure you've heard of people locked away in their room for hours at a time playing games - well that's because they are in the flow. Facebook keeps us in the flow by constantly giving us new things on the feed. As soon as the feed starts to repeat itself, or the content becomes repetitive or dull, we lose the flow.

But remember the interrupt. Sometimes we need to get people's attention, but keep them in the flow. This is how the so call 'free-to-play' games work. They get us into the flow, and then hit us in the wallet to keep us in the flow, but they do it so as not to throw us out of the flow.


This is a term that refers to how much effort it takes for somebody to work out how to use something. The easier it is to figure it out, the lower the excise is. Now we are not referring to the work itself, but the effort required to figure out the controls. Notice that where there happens to be monopolies, the machines tend to be pretty horrendous to work out how to use. The Melbourne public transport ticketing system is a good example:

Honestly, I tend to be pretty tech savy, so I generally work out how to use things anyway. However, despite the fact that supermarkets are attempting to move to automated checkout systems, they still need to employ people to show customers how to use the machines, and they're pretty horrendous to use anyway. I'm sure we have all heard the dreaded 'unexpected item in the bagging area'?

Well, maybe this is the problem:

In fact, I when I was in London, they actually had somebody in the Tube stations whose sole job was to show people how to use the automated ticketing machines, and even though London is a very tourist heavy city, it sort of does defeat the purpose of having an automated system, particularly if somebody is always going back to this particular person for help when they want to top up their Oyster Card. Then again, having a machine is cheaper, and quicker, and takes up less space, than ticket windows, and you generally need only a couple of assistants, at most.

Oh, and I probably should also mention that even if you have the instructions on how to use the machine printed clearly for pretty much anybody to see, you can be assured that they will simply ignore those instructions and look for somebody to help them.

Now Onto the Patterns

Patterns are a way to address the issues with flow and excise. Remember back to our Heuristic Principles, particularly consistency and standards. Well, that is important to be able to get somebody to use your app and to continue to use your app. If a method is consistent across a broad range of apps, then all of a sudden the effort in working out how to use the app drops dramatically. This is why we use patterns. Look, that doesn't actually mean that patterns are set in stone and are immutable like the Ten Commandments. No, they evolve in the way pretty much everything else evolves, and that is why we need to keep a look out to see what works, and what is being used, to know which patterns are popular at this time.

Want to get a good idea of the patterns that are currently in use. Well, check out this pattern library. Actually, I could just leave it at that, but lets move on a bit (and I'm sure I'll be coming back there again).

Titled Sections
Well, this is basically a pattern that uses titles to divide up various bits of the screen, or at least the menu options. This helps keep similar options together, and allows to easier navigation, or use of the checkboxes.

Card Stack
The best description of this pattern is probably to point you to the top of your browser where there are a number of tabs. Well, that is probably also called tab browsing, but the term card stack also applies.
Closeable Panels
Honestly, just go to this website here, it's a great example. It's also referred to as the accordion patter, or a collapsible panel. Well, they also have a tabbed panel, and you will notice that there is a difference between the collapsible panel and the accordion, namely that with the accordion at least one panel is open, while with the collapsible panel you can pretty much close all of them.

Page Layout Patterns
Firstly there is the left to right alignment, which probably has a lot to do with the fact that we (at least those of us who speak Indo-European languages) read from the left to the right. As such it is sensible to have your webpages go from the left to the right. It is probably going to be a lot different if you are creating an Arabic or Chinese language website, since they don't read from left to write, but that isn't something that we need to consider here.
Next is the diagonal balance. I'll so you a picture so you know what I mean:

Have you ever wondered why the save and cancel buttons are in the bottom right corner? No, of course you haven't because neither have I, but that is what they mean by the diagonal balance. I guess it once again has to do with how we Europeans process things from left to right. When reading we start at the top left hand corner and finish at the bottom right. However, I can assure you that now you know you will suddenly start seeing it everywhere.

Responsive disclosure
This is basically where options are hidden from view unless a specific button is pressed. In fact if certain buttons are pressed (or boxes checked) then sometimes things will be greyed out to prevent them from being used. Here is an example of this below:

Of course, we also have the situation were options are greyed out until a certain action is performed, which is referred to as responsive enabling.


Okay, while this goes without saying, it should still be said: the most important should be the most prominent, and the least important the least prominent. Take a newspaper column for instance - big headline to grab the reader's attention, smaller head line to tease them some more, bold first paragraph to explain the salient points, and then the rest of the article which only the die hard people will read to the end. 

In this case we should be using white space - in fact as Google proved, white space can be good - in the world of UX design, nature doesn't abhore a vacuum, it loves it. We should also have contrasting colours, and contrasting fonts - it makes things stand out all the more. What we are trying to do is to encourage the user to move their eyes over the page in the correct order, but also in a way that is natural for the user.

So, we should be using the same basic layout through the entire app, but we should also be doing it in a way to assist the user to freely navigate the app, and most importantly, not get lost. A user that gets lost or confused is a user that isn't coming back (unless of course they have no choice).

Now, consider Google's home page. Actually, no, let's take another website that is very similar to Google but doesn't do things that Google does:

This is a great example because what we have is the task that needs to be performed front a centre - that is to search for something. Like Google, there is basically nothing else on the screen. Here the user is focused on the task at head, and pretty much everything else (including the link to a page where they carry on about how privacy is important to them), is of secondary importance.

Navigating the World Wide Web

We have a number of ideas here as well. One is the pyramid system (and I'm really not sure why they call it that), but we have a home page, a way for navigating the pages sequentially, and also ways to pretty much get anywhere from the home and back again. Also, there is a pyramid structure where pages have parent and child pages.

Sometimes you might encounter a popup box, and you aren't actually able to continue or do anything until this popup box is dealt with. This is known as stop navigation, and is sometimes used for security purposes so that you don't accidentally leave the page before a transaction is completed which may result in you losing money. Mind you, the usual method is taking you to a blank page with the words 'transaction in progress, please don't shut down your browser or move from this page'.

Sometimes when you are navigating through pages, at the top you might see something like this:

home>Page>Page>Page>You are here

This pattern is referred to as the breadcrumb, namely because like the breadcrumbs (or the string in Theseus' case) that you leave behind as you are wandering through a maze (though why breadcrumbs is beyond me because bread is food, and rats eat food, particularly breadcrumbs, which is why Theseus had a much better idea) it enables you to go back to where you came from. You could always use the back arrow, but sometimes you arrive at a spot without having gone through the intermediate steps, and maybe those steps are where you want to go.

The progress bar is generally used when filling out surveys and forms, and you have probably seen that when doing so (especially if you are filling out government forms). They basically tell you how far through the form you are, and how much longer you have to go.

Finally, I'll mention the colour coded sites, and an image will probably help with this one:

This is very helpful where your pages may be the same, but the content is slightly different. The above site is a real-estate website, and uses the colours to indicate what type of product you are looking for. One is for buying a house, another for renting a house, and there are other pages such as share accommodation and also selling a property.

Content Organisation

Okay, wizards probably aren't all that common these days, but are generally used when installing software. Basically the design is to guide the user through the process, and to only request information when certain points are reached. Wizards can also be used to create profiles, particularly if we don't want to put too much information on the page at once. Another area might be where you are lodging a claim for an insurance company online.

There is also the concept of extra's on demand. Normally we are just given basic features, but if we want to use a more detailed search option you can actually request that by clicking on the button. This is an example of the heuristic where advanced users can arrange more advanced searches, or even if one can't find a specific object through a search, they can select options to narrow down the options.

Oh, and also there are the intriguing branches. These are basically hyperlinks, but it is used to great effect with Wikipedia. If you have been onto the site recently you will note that there are a huge number of links to other pages, and even options to go to a page that provides a specific part of the article in much greater detail. Hyperlinks simply aren't for referencing fake news.

Onto the physical layout, multiple windows are becoming less common, namely because people really don't want to have to deal with a heap of clutter on their screen. Instead we use card stacks, or tabbed browsing. However, we still have tiled panes, where the main content is in the centre, but in the left column we might have a menu (even a titled menu), a search bar at the top, and other information down the side.

You might also have noticed that some pages offer different ways to view the content - say as a list, or as tiles. This is something that is coming more common. There is generally a button near the top that you can press that changes the organisation of the data. Oh, and there are also the various sort options, such as sorting hotels by price from cheapest to most expensive, though ironically that isn't the sort that you arrive at the page on.

And Finally - Actions

Well, these are patterns that the user is going to perform, either by clicking a button, pressing on a menu, or dragging and dropping a picture. Once again there are patterns that apply. I'm sure we have all used a word processor, and they are a classic example of drop down menus. In  a way they are like titled menus, but the contents of the menu are hidden until the user clicks on them. We also have smart menus that will change depending on what functions are needed.

Next we have the action bar. Sticking with word processors, these action bars basically contain shortcuts for pretty much the most commonly used processes and are usually at the top of the screen. Actually, Blogger has an action bar, and the action bar also consists of drop down menus, for instance if you want to change the font, or the text size.

As for the all important done button, well, that should be prominent, and of a different colour. Once again, looking at Blogger, the 'publish' button at the top of the screen, is orange whereas everything else is off grey. The reason for this is that it is probably the most important button. However, at the bottom of the page is the 'send feedback' button, which I am tempted to do so request that they include super and subscript functionalities. Obviously they wish us to see it so that we can send feed back if we wish.

Now, some final things that once again apply to the heuristics. For instance, a progress bar applies the visibility of system status heuristic so that we know where we are and how long we need to wait. There are also preview screens so that we can view something before we actually go ahead and post it. In fact blogger has a preview button, though ironically it does not have a functionality to allow you to see how the page will appear on a mobile device or a tablet.

Maybe I should send some feedback.

Creative Commons License

Patterns - Putting it Together 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