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. 

Early Page Design

Now the branding of the app has been decided, we've begun designing the UI. 

To the right you can see an early logo design, using the Amatic SC and Amatic fonts. We liked the concept of having different thicknesses of font within the logo, highlighting the fitness part of the name. At this stage of development, the name had not yet been decided upon. 

During this stage of development, a tagline was generated for the app, summarising our desire to be the only fitness app on the market, reinforcing our concept of an all in one app. 'The only app you need'. 

To incorporate this tagline, a small ellipse was added to the title bar, adding a dynamic aspect to the logo. The round shape was something we liked, and decided to work with more. 

Continuing to develop the logo, the ellipse was extended to create a smoother shape on the bottom of the logo, which could then be involved with the rest of the app. 

On other pages, the idea is to use the bottom of the ellipse at the very top of the page to be a home button, of sorts. When tapped a drop down will appear offering more options and navigation. 

At this stage the name was added to the design process, also taking advantage of the font thickness switch that occurred in the previous iteration. The thickness switch was done to generate focus on the word fit, highlighting the topic of the app. 

At this stage the ellipse was shortened again, however this is something that was still open for debate.




As a completely left field suggestion, we tried using a circle, only partly visible off the top of the screen. This dynamic shape was an immediate improvement on the previous generations of logo design. The round shape would also work perfectly in retracting to the top to act as a drop down home menu system. 







Once the logo was resized for phone display resolution ratios, we noticed that excluding the edges of the ellipse at the top worked well in the design of the app. 

This is the basis for page design, which will be expanded upon in the next post. 

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.