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