Information Architecture - Steve Krug

1. “Don’t make me think.”
2. “It doesn't matter how many times I have to click, as long as each click is a mindless, unambiguous choice.”
3. “Get rid of half the words on each page, then get rid of half of what is left.”

Steve Krug's concepts on usability are wise words for anyone designing any interactive interface, and whilst his writings were originally in reference to web based usability, the themes and ideas can easily be appropriated for a mobile platform.

Simplicity is frequently referred to as one of the key factors to good interface design, minimalising the potential for the end user to be confused or uninterested. Shortening the journey to information is not considered as important as making sure the journey itself is painless and intuitive. Everything from the wording of available options to the colour of the border on clickable boxes can influence the time it takes for a user to decide whether they want to click through or not.

In terms of the architecture of the application, it is my intention to maintain a visual sense of 'real estate', where imagery and structure is maintained across all of the application. In a practical sense, this allows users to become familiar with navigational aspects of the application as well as developing an understanding of location in relation to other forms of content. If the app was to have the home button in different places when moving from page to page then the end user will experience a very disjointed journey to any content that they desire.

Structurally, I intend to construct a narrow and deep architecture, with real estate similar to that of Twitter for example, with a home button always present, and a small selection of shortcuts at the bottom of the screen. This allows the rest of the screen space to be dedicated to the content of each page, as well as making sure the focus is on the appropriate material. Functionality is something that needs to be at an optimal point for this application to maintain its audience, and therefore each user function should be effortless, much like Krug's views on navigation. For general sub-headings within the application, I have written a short list, and these are current navigational signposts to content, or external sites.

Within each section there will be more content, however these are the headings that summarise their subsequent content in the most succinct manner.

-Home
-News
-Sports/Societies
-Deals
-Events
-Email
-Blackboard

Krug raises the idea that some users prefer to browse first, whereas some prefer to use search functions. I'll need to make sure that both types of user can satisfy their usage trends as quickly as possible from the point of opening the app.

As well as structural hierarchy, there is also the concept of visual hierarchy to consider. Do some menu options command more attention that others? Is the space used efficiently to inform the user about which information is the most important and/or relevant? Ensuring that font thickness, spacing, and even bordering is consistent with the intended portrayal. All these things will come with the design portion of the product, which is already underway.

In summary, getting visual design correct can be a tricky task, however the benefits are massive. If users experience good architecture and design then confidence in the application, brand, or product is instilled, moving towards improving the overall customer satisfaction. 

Project Development - An Idea Evolved

Following some investigation into the coding and programming process for mobile applications, it seems like a more viable approach to develop the app from a conceptual perspective. This will involve completely designing the app from a visual perspective, rather than making an actual application, and then generating appropriate imagery to support the promotion of the application. Given this change in project style, the concept will need to push the boundaries of app design much more than before.

http://www.nextr.info/ is a website promoting an app for travel around Germany. The website itself has a smart layout, with interactive elements to enhance the experience the user has whilst visiting the site. Mousing over certain areas of the website brings up additional information or alternate screenshots. Using this method of presenting screenshots allows the user to customise their experience with the product in an online space, rather than presenting a predetermined video, with timed transitions. Having a smart and intuitive website suggests to the user that the product being advertised may also have similarly strong design and dynamic user interface, and subsequently works as part of the advertising itself.

Below you can see a portion of the website, including the additional information icons (+). The website also has an ingenious way of representing the transition from page to page within the app, placing two screens side-by-side and simply placing a directional arrow from one screen to the other. The arrow also shows the part of the app that has been selected to propel the user to the next page. This method of representation smartly sidesteps the limitation of displaying an app in still images.

This minimalist and efficient design is something I will try to utilise in my own presentation of my work, but that's something that will come further down the line. For now, I'm focusing on the conceptual possibilities oft the app which I intend to conceive.

With the app aiming to fill the gap for a students union mobile application, the product will need to meet the needs of both the union and also the students. Keeping this in mind, I will now develop a first draft for the infrastructure of the app.

Front Page Development

With the logo finished, and a rough concept of the layout we want, we began developing the pages to be used in our app. 

The areas of focus within the app were decided upon, and I developed a front page for the app, which doubles as a topside contents page. 

Using the logo developed in the last post, I expanded upon the page. Using the font 'Quicksand' (which was also used for the tagline) I created a menu system underneath the logo. 

The final front page can be seen below. 

Each option on the front page can be tapped to open a smaller sub menu, offering more specific areas within each topic of the fitness app. The other options open up from within the green rectangle which encases the first option. The drop down will push the other rectangles off the page, or under a fade around the logo. An example of the expansion can be seen below. 

Apologies for the odd colour of this image.

This is the front page that will be used for our app.

Branding, Fonts and Naming

As we move closer to the submission for this fitness app design project, it's time to start constructing the UI. After we chose the colour palette to work with, it was clear that the style we were intending to go for was to appeal to a unisex audience. 

Font design was something we considered while continuing to develop the brand identity of this application, and noticed that in tandem with the light-hearted and muted colours that a fun and cursive font would work for the logo. We also decided that we wanted a logo that contained no 'pop art' or representative artwork, and opted instead to have a text based logo, with the words being the focus. 

Since our name will be the focus of the logo, our app name is even more important than it would be normally. After some online research we discovered a number of fonts we liked in the cursive style, including fonts called 'The Hand' and 'Amatic', which became the front runners. Due to a funding issue, 'The Hand' was unavailable to us, and so the decision was made to use Amatic and Amatic SC. You can see those below. 

Amatic SC, Amatic

As you can see from the image, a name has been decided for the application. 

'Perfect Fit' was chosen from a shortlist of names, including 'Fitness Fun' and 'Fit for All'. The name was chosen due to its broad coverage of the topic, as well as being a play on words. 

With the colour scheme chosen in the previous post, and now the font decided, the page design can begin. 

App Design Progression

As mentioned in the previous post, the target audience for this app is broad. Whilst aware of the possible downfalls of broadening the target audience, as a group we feel it is the best way to develop the best possible fitness app. 

To achieve this we considered the different approaches that were available to us. Muted colours and flat design was something we quickly decided was in fashion, and therefore something we wanted to use for our design style. 

An example of good flat design is the iOS 7 interface (image below), which moved from an embossed and reflective style to flat colour style with no lens flare. iOS7 also moved away from aspects of skueomorphism, to a consistent flat design across all native apps. 

Learning from Apple's design style, we've decided to employ this in-vogue format within our design. 

Colour is an important aspect of design, and something we want to consider before committing to a theme and moving forward with the design. Below are some of the colour combinations that we considered, before choosing which we liked the most and moving towards early UI design. 

These colour samples all include muted, almost pastel like colours, with a range of connotations. The first sample is more focused towards a masculine audience, with richer colours more generally associated with men. The second seemed a little feminine, and therefore the third sample is the one we will be using for our app.

For the next post we'll be generating more of the branding and identity. 

Strava - Competitor

Strava Logo

Fitness apps are known to be highly motivational, however the app Strava has been under fire for encouraging reckless exercise. 

The app, which can been found here, has received criticism for pitting its users times against each other with the intention of encouraging the user to try and beat the best time for a particular route. The Guardian recently wrote that Strava may be 'tacitly egging on subscribers to cycle recklessly', which is certainly drawing negative attention from the national press.

Learning from the mistakes of Strava, leader boards are not something to include to avoid the encouragement of reckless exercise, which may endanger the user or those around them. 

The design of the app, however, is strong with a consistent branding style across all aspects. Orange is a dominant and prevailing colour, applied to every page that the app contains. 

In the picture to the left you can see the consistency of design, including some vibrant and intuitive ways to present the information that the consumer may require.  One thing that stands out from some research into the app is that the information is presented simply, with graphics and a simple grid system. On the other hand, the design style seems fundamentally masculine, with dark strong colours being the focus. 

For a fitness app to appeal to both genders, which is something I feel our app should do, then finding a sweet spot in unisex colours that will not offend either gender is important. Demographically, fitness transcends age groups as well as gender, so another aspect of the app should be that the app appeals to as many people as possible. Our target market will be all those interested in fitness and self improvement. 

Things to take from this competitor in the fitness market include the importance of encouraging sensible exercise that can still enhance the lives of the users, a sensible and market specific design style. 

Digital Media App Design - Initial Research

I've been tasked with designing a digital media application to solve a real world problem. In a small group; we will choose a topic, research the market and then design the product for an appropriate audience. The topic was chosen from this list of options: 

• Energy Consumption
• Personal Budgeting
• Food / Water Waste
• Fitness
• Commuting
• Local Government
• Education

As a group we decided to design an app for the fitness market. Whilst aware of the volume of fitness apps on the market, we concluded that there was no 'perfect' app, offering a range of functions in one well designed and easy to use product. 

A discussion within the group highlighted certain aspects of existing fitness apps that we feel could be improved. An example of this is EveryMove, an app designed to reward the user for simply moving and staying active, not necessarily exercising. While this seems like an attractive idea, as fitness apps go it is fairly limited. There's no particular plan or suggestions for activities to do, and the interface seems dated and socially focused. A link for the app is found here.

Lessons to take from this app is to ensure we have a fresh, attractive and functional design, while offering a strong and multifaceted service. 

For reference, find my colleagues blogs at the following links:

Jamie Blackhurst

Erika Carter

Thanks, 

Alex