Week 7 – Interface Design — May 22, 2017

Week 7 – Interface Design

Launch / Loading Screen

Used so promote the branding of the application.

The Tray

Allows the design to have more space without taking up screen space. Rather it is a hidden section, accessed through user gestures, like the hamburger menu.

The List

Similar to a tray where it holds hidden content, lists are used for individual pages to show the user they are getting deeper into a particular piece of content. The list can also enhance images where selecting an image can enlarge it. Sharing buttons or social media buttons are a big example of lists.


Summary

The launch, tray and list are important design interfaces that can be used to simplify your app without removing content. The loading screen is used to promote the business brand, while also entertaining the user while assets are loading. The tray is used mainly for navigation of global features and the lists are used for individual pages with large amounts of content that don’t need to be shown instantly.

Week 6 – User Scenarios — May 18, 2017

Week 6 – User Scenarios

What are user scenarios?

Using the “user personas” discussed last week, we create a scenario where the made up user is placed in. Such as Bruce who is a quick and efficient man being put in the scenario of needing to find out his bank balance at the shops. Having these scenarios helps us developers understand where our system thrives and also fails. If Bruce has to click on 5 different links to find his balance, even though he found it, he had to go through to many links. This process refines the experience and project so its more user friendly.


Summary

User scenarios are very important in discovering the strengths and weaknesses of a project. By coming up with more scenarios for our users personas to go through, the project becomes more refined and helps us understand what is important and not important to a user.

Week 5 – Personas —

Week 5 – Personas

User Personas

Personas are fictional characters representing real users. Usually in a project, 2 personas are created with 1 being the primary character. User Personas cover a few areas to distinguish their personality or habits. These include:

  • Age
  • Sex
  • Occupation
  • Hobbies
  • Likes / Dislikes
  • Behavior patterns
  • Goals
  • Skills
  • Attitudes
  • Their environment (or context)

This process of creating a user persona enables the developer to have a more detailed understanding of the target audience and user interactions. Creating user persona’s should always happen before designing or wire-framing, as it gives better insight into how to create the project for your target audience.



Artefact Personas

Used as a proposed way to visualise the personality of the project. To develop an artefact persona you need to ask yourself a few questions such as who would your project be as a person, what would they be like? How would you describe this person to a friend? Questions like these guide the development process which in turn creates a more refined artefact persona.


Summary

Personas are a way of personalising and contextualising your projects. Making user personas helps us understand the needs of a user, how to address the needs of the user and develop a more refined experience. Artefact personas assigns a personality to our project. Giving your project a personality helps everyone understand what to focus on when developing. As well as what no to focus on.

Week 4 – Understanding the Device —

Week 4 – Understanding the Device

Gestures in iOS
The first 5 seconds of a users interaction with an app are the most important. They are the building blocks and show the user how to use the app.

Simple gestures become second nature like tapping and swiping.

The tap –  gesture is the most common and simplest gesture. The standard area for a simple touch on a screen is a 44 by 44 pixel area.
The drag – is used mainly for scrolling or moving objects like apps.
The flick – is designed for a less direct movement.
The swipe – allows the user to access hidden, touch heavy elements.
The pinch – can be used to scale images or objects.


UI – iOS anatomy
iOS has guidelines or requirements for designing you app. Almost all iOS apps use similar toolkit features in their apps such as navigation bars, tab bars, toolbar buttons, segmented controls, map view and alerts. These features fall into 4 main categories – Bars, Content views, Controls, Temporary views. iOS have different keyboard types depending on the context off the app. Such as for entering a phone number, the numbered keyboard will display, typing an email will prompt the keyboard to have the ‘@’ key accessible without having to dig into menus to find it.


Summary

Knowing the device your developing for is very important. Without knowing common gestures, UI styles and the anatomy of the device, the app your developing will look odd in the chosen device market.

Week 3 – App Design Process — March 18, 2017

Week 3 – App Design Process

Idea

An idea can be anything. However to have a successful idea, continuous iterations of steps must be taken to test the integrity of the idea. Some of the most common steps, that are questions to ask yourself, are:

  • Is this idea financially viable?
  • Is this idea technically feasible?
  • Is someone else already doing this?
  • Could this be made simpler / differently?

Once these questions have been asked and asked again, your idea should now be ready to continue in the design process. Without this initial testing, the app would not survive the development process as holes in its structure would start to appear and grow.


Spec

A spec is a blueprint or description of what your app does and how it accomplishes its goal. It is very important to do a spec sheet in both private and client projects. This gives everyone a clear guide as to what needs to be done and how these tasks need to be done in order to develop the app.


Wireframe

Wireframes are incredibly basic visuals, consisting of lines and boxes only, that show what the app will look like and how it will flow. Almost all people working on the app should be part of this process so they get a firm understanding of what the app does, how it will look and how it will flow when the user uses it.


Prototype

Prototyping is the flesh that is now put onto the bones (wireframes) creates previously. Although not final, these should give a clear understanding as to how the app will function at its bare minimum state.


Visual Design

We now start to put the cloths onto our app. This is accomplished by colour schemes, typography, brand components, imagery and more.


Development

Once we know exactly what the app will do, look like and function like, we move to the development stage. This is where a developer or a team of developers start to create the application. The more detail you provide in the previous stages, the better the outcome from the developers.


Iterate

Although people usually think that after development you’re done, the truth of it is that the process never ends. The app can always improve or be built apon.


Summary

Building an app comprises of some basic steps. However they should not be treated lightly as each step must be done meticulously in order for the app to be successful. Without doing each of these steps correctly, the app will never reach development. However if all steps are completed with high levels of detail, the app will not only be completed, but be able to be built apon and upgraded forever.

 

Week 2 – App Development Process (Prototyping) — March 5, 2017

Week 2 – App Development Process (Prototyping)

The area of design is constantly changing. Only a few decades ago, designers mainly focused on prints but as soon as the internet hit, the whole field of designing digitally came to life. Now we not only have to consider what device we are designing for, but what screen sizes, device abilities, user interactive abilities and more for our audience.

Some suggested strategies for adapting to the mobile app design world is:

Change the way you Work

  • This means taking on new processes that help us achieve out goal. An example of this is “Lead UX Cycles”. This is a wheel with 3 main sections, THINK, MAKE, CHECK. We don’t ever stop at a certain stage, rather we keep adapting per iteration. We find a problem, create prototypes or wire-frames that address the issue, then check if it helps solve the problem. And so on this cycle continues.
  • This forces us to priorities what information is is most important, where it should be located and how the user interacts with it. Only after this can we starts to consider other sizes of screens where we have more real estate to work with.

Understand Development

  • Learn to understand the entire process so you can achieve a better result. This means understanding the other tools or programs as well as the terminology used in the workplace. This creates a more free flowing environment and better understanding with the team.

Use a variety of Operating Systems

  • You can not use your own phone to test your application. You must be able to test your application on iphones, Android and other phones with different operating systems. For example the location of tabs changes between platforms and so this must be considered when designing.

Prototype Everything

  • It can be as simple as a drawing but it is also best to have a working prototype that has images, transitions and some functionality.

Summary

To make an app you have to stick to the app development process. However before getting into the process we need to consider how to adapt to the mobile world. Some strategies include, changing the way we work, understanding the development process, using different operating system and prototype everything we make.

Week 1 – App Design — February 25, 2017

Week 1 – App Design

What is an app?
An “app” is an abbreviated form of the word “application.” There are 3 main types of apps designed for mobile devices:

  • Web App (HTML5) – this consists of HTML, CSS and JS that are stored on a remote server.
  • Hybrid App –  these apps use both the web and native instruments to deliver the best of both worlds. This consists of online or offline modes, using the devices accelerators, camera, etc and data storage.
  • Native Apps – this runs directly on the device that does not need an internet connection or browser to run.

Previously HTML5 was more common as it was easier to implement and create. Native apps were to expensive and needed more attention and care with higher levels of programming and more complex strategies to implement.

There are 6 basic categories of apps that dominate the mobile device market. These include Utilities, Entertainment, Games, News, Productivity and Social Networking. Games are the most downloaded and most demanded category of apps on the market with 23% of all apps being games.

There are a few key attributes of apps we need to consider when creating an app, these include:

  • The Interface Controls (UI)
  • Touch Input (Gestures)
  • Screen Sizes and Resolution
  • “Time is short” (Get information out there fast)
  • Screen real estate is tiny
  • Context is Everything
  • Wireframing is Essential

 


Summary
Apps are all around us. They come in 3 main types, web apps, hybrid apps and native applications. Developed for all markets such entertainment, games, news, etc. When creating an app, attributes such as gestures, screen real estate, UI, etc need to be taken into consideration when developing an app.