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.

Elevator Pitch

How often do you run late for class? say an early morning lecture sneaks up on you? guess you’ll have to go it without coffee? But that’s where give me caffeine comes in. GMC is an application, that allows you to order a coffee from anywhere on campus, customize, and pay for it, all that’s left to do, is pick it up. The unique customization and simplicity allows movement with ease, especially without caffeine in your system.

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

User Persona


  • Personas environment
  • Personas mentality
  • Impetus motivations
  • External factors impacting use


Scenario #1

Georgia sat on the crowded 9am train from Penrith to Parramatta, the wet weather making the train seem extra crowded, and noisy. Already running late, the constant chatter of other riders made her irritation peak, she had woken up late, having forgotten to charge her phone the night before, barely having time to fix her hair and brush her teeth, let alone have her morning muffin and coffee. Now sitting on the train heading for university, she found herself annoyed at the smallest of things, the tapping of the old guy’s foot, the business woman smacking the keys on her laptop. “Coffee” she said, “I need coffee”. Thankful for her portable phone charger, Georgia unlocked her phone. Clicking on the Give Me Caffeine app she logged into her account. She chose the coffee shop, Rawr, from her University campus and continued through her order. Selecting coffee, she chose her Large iced coffee, with and extra shot, and added it to her tray, she then went back to the menu and chose food. One blueberry muffin, added to her tray. Clicking on her tray she decided to add the order to her favourites before completing her order, and choosing a “pick up” time. Having already added her payment details to her account, placing her order was smooth and easy, selecting to pick her order up in 20 minutes just before class. After processing her app interface presented an order timer screen, which told her the progress of her order. Georgia sighed, sat back in her seat and waited for the train to pull into her station.

Scenario #2

The dry air on campus seemed to be extra blistering today as Michael sat underneath a tree on the front oval, doing some lecture readings on his phone. The heat making his clothes seem too tight as sweat glued them to his body in the most uncomfortable way. The bottle of water Michael had refilled what only seemed an hour ago, was long empty, a tap was nowhere in sight, his mouth becoming dry and parched. Exiting his reading Michael opening the Give Me Caffeine app on his phone. Logging in, he selected the closest coffee shop on campus to where he was, and continued to the order screen. Selecting Cold and then Tea, Michael order a large cold mango iced tea and added it to his ‘tray’. Selecting his tray to complete his order Michael, confirmed payment and processed his order, requesting it to be ready ASAP, thankful for already saving his payment method to his account. The screen showed his order progress, as Michael stood up, picked up his bag and headed off to collect his order.