Week 7: App Interface Design (UI)

Launch screens

  • Launch screens are used to reinforce the branding of the app.
  • Also allows the app to load in the background.
  • Launch screens are not to be confused with the home screen, as you wouldn’t go back to the launch screen after getting into the app.

Examples of iOS launch screens:

Screen Shot 2017-05-25 at 10.06.21 am

Examples of Android launch screens:

Screen Shot 2017-05-25 at 10.07.38 am

The Tray

  • Allows the designer to add more space to the experience.
  • The tray can include navigation, tools, profile information.
  • The tray area should take up to 60-70% of the wide screen width.
  • It is important to be visible UI elements that make it clear that this element is clickable.

There are two main components to a tray:

  1. The active button
  2. The tray area

Screen Shot 2017-05-25 at 10.14.16 am

Some Rules for the tray

  • Make the shape unique.
  • Make the design look active.
  • Make a button look like it is part of the navigation.
  • Make sure it is large enough for a finger.
  • Make the button look different when it is touched.

Advanced Tray

  • A tray with a scrollable view can give access to a larger tray area.
  • Includes other UI Elements inside the tray.

Having most of the options and links in theThis can make the tray into the one stop area for accessing content.

Example of an advanced tray

Screen Shot 2017-05-25 at 10.20.28 am

Good Design: The Tray

  • Be clean and lean.
  • Keep the names short.
  • Don’t scroll much.
  • Don’t add other gestures.
  • Don’t overdo a good thing.

The List

  • The list is most commonly used in mobile user experience.
  • Opening second and third level pages.
  • Opening or expanding details for a content section.
  • Enlarging images.
  • Opening screen or options.

Example of a pattern using the list

Screen Shot 2017-05-25 at 10.28.50 am

Example of navigation buttons

Screen Shot 2017-05-25 at 10.32.02 am

Navigation buttons are used to return the user one space back in the experience.

Advanced List

Screen Shot 2017-05-25 at 10.33.43 am

There shouldn’t be any dead ends to a users exploration to ensure this we must make your last Page actionable.

To do this there are 2 methods:

  1. Provide an action button in the top navigation bar.
  2. Provide an action button below the page content.

Good Design: The List

  • Don’t overdo a good thing.
  • Don’t skip a step.
  • No dead ends.

This weeks lecture pod allowed me to have a better understanding on different UI elements. Having a better understanding on what should and shouldn’t be in different UI elements will aid in the development of my app. For my app I will most likely be using the List element.

 

Week 6: User Scenario

What is a User Scenario?

A scenario is a narrative describing foreseeable interactions of types of users and your product. Scenarios include information about a users goals, expectations, motivations, actions and reactions.

Scenarios are neither predictions nor forecasts, but rather attempts to reflect on or portray the way in which a system is used in the context of a daily activity.

User scenarios predict how certain types of users represented by your personas will interact with your product in a given situation in order to complete a give goal. User scenarios allow you to test your product structure before its fully developed and isolate problems before they become problems.

Scenarios should  at least outline the:

  • WHO

  • WHAT

  • WHEN

  • WHERE

  • WHY

  • HOW of the usage.

 

User scenarios should be born from your user personas. you need to start with qualitative research so you can look for patterns in behaviours, goals among people how fit your user persona. out of this information you can better understand how a user may use your product and what goals they may have when using it.

As interactive designers it’s important to understand the process of using personas and user scenarios and a context to drive a design.

Week 5 & 6 lecture pods have showed me just how important it is to identify and understand the type of people you’re designing for. They have showed me that developing user personas and using them in scenarios is the best way to see how the product will be used. Scenarios can also be used to identify problems what you may have over looked. These two lectures have showed me just how important it is to create user personas and user scenarios during the development of my app.

Week 5: Personas

What are Personas and Artefact Personas?

User Personas

User personas are fictional users representative of a real user. User personas are a representation of the goals and behaviour of a hypothesised group of users. They are synthesised from data collected from interviews with users. That are captured in 1-2 pages descriptions include:

  • Behavioural Patterns
  • Goals
  • Skills
  • Attitudes
  • Environment or context, with a few fictional details to make them more realistic.

Here is an example of a user persona which should include the users:

  • Age
  • Sex
  • Occupation
  • Hobbies
  • Likes/Dislikes
  • other details germane to products.

The goal of defining these details is to establish the mindset and desires of the user. Personas are not only useful in the design process but also at the end to validate your wireframes to see if meeting your user’s goals.

Big Audience VS Little Audience

First we must establish who is your core audience and who is your fringe audience? Your design should satisfy your fringe audience but keep the focus on satisfying your core audience.

When defining personas we need to ask ourselves:

WHAT

  • What are the tasks your user is trying to perform?

Are there different tasks for different personas?

  • Are there different tasks for different personas?

Different personas take different paths

  • What devices are your personas likely to use?

Are they expecting a cross platform experience?

HOW

Users who want to browse vs. users who want specific content.

Mental Models

Mental Models are what thoughts people from around an idea and activity. They vary from person to person.
2 examples mental models for taking a note:

  1. The young who would use a smartphone app
  2. The old who would use a post it

Mental models illustrate how your users approaches a particular problem.

Artefact Personas

As a way of thinking about the proposed official design of the product. They are useful for client meetings. To develop an artefact persona you’d ask product personality questions such as:

  • If the interface were a person, what would she or he be like?
  • How would you expect users to react when they first view the product?
  • How would you describe the product to a friend?
  • How is the product different from competitive products?
  • Which celebrity (or car, movie, etc) is the product more like or least like? why?

Also it’s important to choose experience keywords that would define and govern the visual strategy. experience keywords represent the initial 5 second emotional reaction that the archetypal persona should feel when viewing the interface.

This week’s lecture pod helped me understand just how important personas are when designing an app. It showed me just how much insight can be drawn from a simple user persona. It can help the designer see how the user may be thinking. This lecture will help be in creating my very own personas for my app

Week 4: Understand the Device

In order to really understand the smartphone you need to actually use the smartphone. Planning for an app on ios you should always practice using an iPhone and the same goes for android. This is because each platform has a set of unique elements, terminology, and device characteristics.

Part 1: Introduction to behaviours and gestures in IOS

The Tap
The tap is the building block of IOS platform. Usage of pressure sensitive glass enables the finger pressure of the user to come in contact with the screen. Minimum of 44 x 44 pt active area.

The Drag
The Drag uses the touch gesture to scroll walk. It combines push and the movement of finger to move an onscreen element.

The Flick
The flick is like the drag but flick allows for a lighter touch for quicker and less directed movement.

The Swipe
The swipe is based on using a large finger contact area for directed on screen movement. It’s meant for slower and more controller interaction.

The Pinch
The pinch allows for finger interaction to control zoom in and zoom out. Pinching inwards to zoom in and Pinch outwards to zoom out.

Random Gestures
There are lots of different gestures, for example, one of the most random gestures is the shake.

Part 2: UI – IOS Anatomy

Bars
Bars tell users where they are and helps users navigate or initiate actions.

Content Views
Content views contains app specific content and can enable behaviour such as scrolling, insertion, deletion and rearrangement of items.

Controls
Controls perform actions or display information.

Temporary views
Temporary views appear briefly to give users important information or additional choices and functionality.

The Keyboard
There are different keyboards for different tasks depending on the user’s needs, for example, text, email, phone or URL.

Pickers and Date Pickers
This element allows for larger contact area for touch gestures making it easier to pick selection options.

Inputs
Inputs are app specific, the slider and the switch. These input methods can be used to create interactive message when selecting choice and images on the screen.

Tab Bar
The tab bar is one of Iphone’s signature navigation element for apps. It replaces tradition tabs found on most webpages with a language of icons small titles.

Navigation Bar
Native app navigation feature. The navigation bar plays a critical role using lists and pages in IOS.

The Tool Bar
The tool bar sits at the bottom of the screen and acts as a general placeholder for icons and text. The role of this element is to support the current view or page by providing secondary navigation.

The Action Menu
The action menu allows for secondary navigation within an app.

This should give a people a slightly better understanding of the anatomy of IOS. This lecture pod helped me to better understand the different elements that need to go into consideration when making an app. I now know that when developing my app I should keep some of these gestures and UI in mind.

Week 3: App Design Process

Article: What Everyone Should Know About The Process of Building an App

https://www.smashingmagazine.com/2016/11/what-everyone-should-know-about-the-process-behind-app-design/

Both app designers and developers have been through a lot of trends while the look, functionality and the tools to develop apps have changed. The process in which we develop and design an app has stayed the same.

The design process in broad strokes

Idea

  • Everything starts with an idea
  • Ideas should be able to change
  • You should allow your idea to grow so it can become the best version of itself that it can be.
  • Make sense to talk about a circular process within this phase.

 

The idea process

 

Questions you must ask

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

Once you feel satisfied with your idea it’s about time you put things into writing.

Spec

  • Specification or a Spec is the piece of paper that declares what your app does and how it is accomplished.
  • You must always do a spec
  • It’s surprising how much an idea can be refined, change and developed.
  • List both functional and non-functional requirements.
  • Explain what your app is, and not how it needs to be done.

Wire Frame

  • Wireframes, can be either part of the spec or built from the spec.
  • Draw on your experience of the platform conventions, knowledge of controls and interface paradigms.
  • Wireframes are then brought into a tool to be digitised, shared and revised.
  • Wireframes will be your first deliberate design made in a project.

Link to a helpful wire framing tool

Prototype

  • The ultimate goal of a prototype is to create a bare-bones version of the app so you can test your hypotheses and get early feedback.
  • Some designers tools such as InVision or Marvel  to create mockups. These allow you to convert wireframes into interactive apps.
  • While others use native prototype writing in swift.
  • How you choose to prototype depends on many different factors.
  • A bad experience with a prototype might cause you to uncover issues with your wireframes, your spec, or even the very core of your idea.

Visual Design

  • Visual design deals with the appearance of the app.
  • It is not just making things look nice, but also making sure that there’s a consistent and identifiable visual language throughout.
  • Visual design is not just a coat of paint applied to make things look pretty.
  • Visual design should create a coherent and consistent experience, tell an engaging story, and differentiate your product from others.
  • Supper overall ethos of your idea, goals from the previous stages you underwent.
  • The Visual design shouldn’t end when you hand it off to the developer. It should be continued and constantly evolving process.

Development

  • In an perfect world, the developer should have worked alongside the designer throughout the design process.
  • There is a desire to separate development from design. The best products are usually built by teams made of multiple professionals from various disciplines who have a mutual understand of each other.
  • Development should not be devoid of design presence and design should not be without development know how.

Iterate

  • You’re never actually done designing
  • While the tools, as well as the products, have changed a lot over the past few years the underlying process of making apps remains largely the same.
  1. Get the idea
  2. Write it down
  3. Build a prototype
  4. Enter into the dance between design and development until something comes out of it.
  • App design is more alike composing a symphony, each profession being a separate instrument.

I feel like this article is good for people looking into the process of designing an app the reasoning behind each step. as an up and coming designer, I think we should try can help people understand that design is about the continual process, not just making things look nice. This article helped me better understand the design process behind the development of an app. I also found it helpful in my own process of developing my app.

Week 2: App Design Process – Prototyping

Designing apps requires a deep knowledge of devices. As new devices such as smart watches come out, it is important to be aware of changes in the industry, and the potential to make new apps with those devices.

In order for an app designer to adapt, they must consider the following:

Change the way you work

‘Lean UX cycles’ or prioritising mobile devices by designing the phone version before the pc. Most app designers will start without a computer and instead will start with paper and a pen. Mobile first is also a buzzword in the industry as starting with a smaller screen is always more effective when adapting to larger screens.

Screen Shot 2017-05-25 at 12.12.06 pm

 

Understand development

Success of an app depends on both the designer and developer. They must work in parallel, they must both be conscious of the complexity of the design as well as the implementation. Learn to use development tools to build screens that can be transferred quickly and faithfully while communicating the design intent.

Use a variety of operating systems

You need to have access to android, ios, windows Phone and you need to be used to using them. Getting to know each device you can help you see interaction patterns, which are established solutions to problems of design. These are different on each system for example the location of the tab bar.

Prototype everything

Prototypes help you work out an apps usability. This must include more than just a flat still design and instead it must have images, transitions and gestures.

Prototypes help us work out an apps usability this must always be more than just a static design and must include images, transitions and gestures. For example the pop prototype took enables you to take pictures of paper designs and build interactive designs in minutes.

links to some helpful prototyping tools:

Proto io Prototyping tool

Pop prototyping tool

What you see is not always what you get

Apps must be tested on a mobile devices rather than a pc.

Apps are never finished

As app designers we need to abandon this concept of designing something that is finished. An app is never finished as it is a digital product which changes over time the same as websites and phones.

The core ideas of this post is that designing apps requires a new way of thinking and let’s leave web design for computer screens.

This post should give you an overview of the different ways of thinking app designers must have. I myself find it hard to have the thought process that nothing is ever finished. Because I aim to complete things not continually focus on one design.

Week 1: Introduction to App Design

What is an app?

App is and abbreviated form of the word application. An application is a software program designed to perform a specific function for the user or for another application program.

There are three types of apps

  • Web Apps – Stored on a remote server and is delivered over the internet through a browser interface.
  • Hybrid Apps – Combines elements of both native and web apps. Often mentioned in the context of mobile computing.
  • Native Apps – Developed for use on a specific platform or device.  Doesn’t need a web browser to run and potentially it doesn’t need an internet connection. It’s single platform, so for example either ios or android.

Web Apps, Hybrid and Native

Web Apps

Pros

  • Quick option for making existing content available on mobile.
  • Only needs to be built once and can would be useable for every device.

Cons

  • User experience inferior
  • Performance inferior
  • Its an app world – a mobile website would limit the users ability to deeply engage with a brand. Because people spend most of their time in apps while on their phone instead of browsing.

Hybrid

Pros

  • Gives space on a users phone to bridge gaps between native apps and a mobile website.
  • Useful for internal teams that have web skills

Cons

  • Low/no bandwidth an issue – people can’t use the app without a good internet connection.
  • No unique mobile functions

Native

Pros

  • UI and UX smooth and engaging
  • Device capabilities optimised
  • Faster load times compared to web apps
  • Robust performance in online and offline mode
  • Better discoverability
  • Superior security compared to HTML5

Cons

  • Required development for each mobile platform.
  • It’s expensive!

What sort of apps are there?

  • Games
  • Business
  • Education
  • Lifestyle
  • Entertainment
  • Utilities
  • Travel
  • Books
  • Health & Fitness
  • Music
  • Productivity
  • Food & Drink
  • Sports
  • Photos & Video
  • Finance
  • News
  • Reference
  • Social Media
  • Medical
  • Navigation

What do web designers need to know?

  1. Users expect familiar user interface (UI) controls
  2. Touch input – Gestures change everything\
  3. Resolution (High res is taking over)
  4. Time (users want information as quickly as possible)
  5. Real estate is tiny (functionality)
  6. Context is everything
  7. Wire framing is essential

This should give you an overview of what an app is, what types of apps there are, different categorises of apps and simple rules to keep in mind when designing an app. This lecture pod has given me some small ideas on how to go about designing my own app.