Lecture 7.0 : App Interface Design (UI)

Launch/Load screen

  • Used to reenforce the branding for the app, while the launch screen is displayed the app will load in the background, not to be confused for the home screen

The Tray

  • The draw, the hamburger, the sidebar, uses a gesture to open the tray area.
  • Includes an active button that will allow the user to know it is clickable
    • make the shape unique
    • make the design look active
    • make a button look like its part of the navigation
    • make sure its large enough for a finger
    • make the button look different when its touched.
  • It is an extension of the experience, is to offer information or functionality, 60-70% of the screen.
  • Good design:
    • be clean and lean
    • keep the names short
    • don’t scroll too much
    • don’t add other gestures
    • don’t overdo a good thing’

The List

  • Opening second and third level pages
  • Opening or expanding details for a content section
  • Enlarging images
  • Opening screen or options
  • Every list button should have the same look and feel (typically an arrow), a back button is also typically to allow the user to know they can take a step backward.
  • Actionable page:
    • Provide an action button in the top navigation bar.
    • Provide an action button below the page content
  • Good design:
    • Don’t overdo a good thing
    • Don’t skip a step
    • No dead ends

Lecture 6.0 : User Scenarios

  • User scenarios are the stories that personas act out
  • Exercises in which you predict your persona will act out to achieve a certain goal.
  • Outlines: who what when where why and how
  • Personas guide the project and design, i.e. design specifics of what the app will need to satisfy the user.


  • A scenario is a narrative describing foreseeable interactions of types of users (characters) and they system. Scenarios include information about 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 daily activity.

Lecture 5.0 : User Personas

User Personas

  • They are fictional users, representative of our real users; a representation of our goals and behaviour of a hypothesised group of users.
  • Synthesised from interviews with real user, it is a 1-2 paged descriptions that capture:
    • age
    • sex
    • occupation
    • hobbies
    • likes/dislikes
    • other details germane to the product such as
      • behaviour patterns
      • goals
      • skills
      • attitudes
      • their environment (context)
  • What? Defining personas allow us to define what tasks a user might be completing. Would it vary depending on persona?
  • What? What devices are your users most likely to user? mobile phones (higher with users in their twenties)
  • How? Users who want to browse vs Users who want specific content.
    • task depended or user dependant, Browse and search.

Artefact Personas

  • Product personality questions:
    • 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 this product to a friend?
    • How is the product different from competitive products?
    • Which celebrity (or car, movie, etc.) is the product most like?
      • Most like?
      • Why?

Lecture 4.0 : Understanding the Device

What are their unique user interactions, characteristics and terminology ?

Part 1: Gestures in iOS 

  • What was the first thing you did when you got your iphone?
  • The 5 second learn:
    • the screen is touch based
    • user interface elements are touch based
    • the user will need to use fluid gestures such as touch and swipe to engage the user interface elements
    • the hardware buttons are secondary to the touch experience
  • Common gestures:
    • The Tap (44 x 44 pt area)
    • The Drag i.e welcome screen
    • The Flick
    • The Swipe
    • The Pinch
    • Random gestures i.e the shake

Part 2: UI – iOS anatomy 

  • Basic components:
    • bars: contain contextual informations where they are and help navigate
    • content views: app specific content
    • controls: perform actions or display information
    • temporary views: appear to give users important information
  • Application Choices:
    • Keyboard
    • Pickers and Date Pickers
    • Inputs, app specific
    • The Tab Bar
    • The Navigation Bar
    • The Tool Bar
    • The Action Menu

Lecture 3.0 : App Design Process

How do you go about designing an app?

  • Idea:
    • Everything starts with an idea, it could come from you, or the client. getting the ‘right’ idea isn’t that important.
    • Keep the idea malleable and changing as long as you can
    • Is this idea financially viable?
    • Is this idea technically feasible?
    • Is someone already doing this?
    • Could this be made similar/differently?
  • Spec:
    • A spec or specification (blueprint) is a piece of paper that declares what your app does and how it is accomplished
  • Wireframe:
    • Also called low fidelity mockups, either part of the spec or built from it. normally done by Information Architects (iAs) or User Experience Designers (UX Designers)
    • Go through the spec, screen by screen, and mark up the app interface by page, helping identify inconsistencies in navigation, and or missing sections or links
  • Prototype:
    • It’s about creating a bare-bones version of the app with the goal of testing your hypotheses and get early feedback
    • Some people use tools like Invision or Marvel where you can convert your low-fidelity mockups into interactive “apps” that allow you to tap through the design
    • Different factors lead to how you choose to prototype your app. 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:
    • Deals with the appearance of the app
    • Not just about making it looks nice but making sure theres a consistent and identifiable visual language throughout its entirety.
    • It is to help communicate your brand and guide the user throughout the app.
    • It is a visual framework you use to create a coherent and consistent experience and differentiate your product from others.
  • Development:
    • Development shouldn’t be devoid of a design presence and design shouldn’t be without development know-how.
    • They don’t always however involve each other in the processes
  • Iterate:
    • Get an idea
    • Write it down
    • Build a prototype
    • Enter into the dance between design and development until something comes out of it

Lecture 2.0 : App Design and Development Process

  • Change the way you work:
    • Cannot afford to spend large times on details in the first stages
    • Short quick cycles, i.e. Lean UX cycles (Think – Make – Check)
    • Start small, iPhone, then move to a large screen. It is much harder to decrease the size to make everything fit onto a smaller screen
  • Understand development
    • Success of an app depends on the designer and the developer, work in parallels and be aware of the complexity of the design and implementation.
  • Use a Variety of Operating systems
    • you cannot just use your own system,i.e. iPhone, you must try your application on various platforms, not just IOS but android. especially if you’re targeting the widespread application community.
  • Prototype everything:
    • an agile methodology requires understanding how something will look and function prior to implementation
    • allow us to evaluate user testing
  • What you see is not always what you get:
    • you have to test apps on a mobile device in order to properly see inference, usage, colour, and size.
  • Apps are never finished: apps are constantly evolving and changing over time, much like all digital products.

Lecture 1.0 : Intro to App Design

What is an app? 

  • Application, is a software program thats designs to perform a specific function for the user
  • Web App / HTML 5
    • Responsive web design
    • stored on a remote server
  • Hybrid
    • elements of both native and web apps
  • Native
    • run directly on a mobile device
    • doesn’t need a web browser, it is single platform
  • More than half surveyed said, a poor app experience would put them off using the company products, therefore those using HTML 5 or Hybrid would have had lower ratings by the   consumer, where as those using Native, gain an instant advantage

Mobile Website or Web APP?


  • PROS :
    • A quick option for making existing content available via mobile device
    • only needs to be built once and would be usable for every device
  • CONS :
    • user experience inferior
    • performance inferior
    • its an app world


  • PROS :
    • a mobile app build with HTML5 gives you the ‘space’ on a user’s phone that can be used to bridge some of the gaps between native apps and mobile website
    • HMTL5 or hybrid (wrapped) apps attractive for internal teams that have web skills
  • CONS :
    • Low/no bandwidth an issue
    • No unique mobile functions


  • PROS :
    • UI and UX smooth and engaging
    • device capabilities optimised
    • faster load times compared to web apps
    • robust performance in online or offline mode
    • better discoverability and brand image
    • Superior security compared to HTML5
  • CONS :
    • Require development for each mobile platform
    • Expensive

What types of apps are there?

  • Utilities
  • Entertainment
  • Games
  • News
  • Productivity
  • Social Networking

** REMEMBER : the purpose of an app is to make peoples lives easier!

As Designers, what do we need to know about app Design?

  1. Users expect familiar User interface (UI) controls
  2. Touch input – Gestures change everything
  3. High resolution is taking over (higher pixel count per image, making images clearer and sharper, you need to consider this in relation to screen size etc)
  4. Time is short (clean presentation, and no complex navigation)
  5. The real estate is tiny (the screen is small, and the buttons need to be in a good separation in order to be selected easily)
  6. Context is everything (App users are looking for specific information, i.e. a restaurant app should say, location, and trading hours in an easily accessible area)
  7. Wireframing is essential.