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.

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.

Unpacking an App : Western Sydney U

Information Architecture

Tools/modules in order (this is the default order, prior to being reorganised):

  1. Maps
  2. Directory
  3. Events
  4. Emergency
  5. vUWS
  6. MyIT
  7. Students
  8. Central
  9. Library
  10. Shuttle
  11. Help
  12. Services
  13. Wellbeing
  14. Careers
  15. Gradlife
  16. Videos
  17. News
  18. Residences
  19. Books
  20. Food
  21. Social
  22. Summer
  23. Clubs
  24. Sport

How are they clustered/organised and can you suggest categories for the modules?

The modules aren’t particularly organized, they are assorted and do not have a consistent flow that progresses throughout both screens. The user can rearrange them however that doesn’t provide ease or convenience; having to flick between screens, can become rather intimidating. The application will benefit by grouping and categorising them based on utility, as well as maintaining the ability to move things around, allowing the user to customise based on priority.

Category suggestions include: “Travel”, “Social”, “Education”, “Emergency”, “Assistance”

Site flow map:

Print

User Experience Flow

Typical user flow:

Print

Are there any tasks or activities missing from the app?

The application is well equipped with a large variety of options and links that help improve the user experience, employing majority of the links that would be featured on the university webpage. Adding direct links to email and/or allocate systems, could be greatly beneficial in terms of the app usage.

User Interface

Is the app easy to use and navigate? What changes would you suggest? 

The application is easy to use, once familiar with its features, however to a user not “tech savvy”, it would become more of a task.

  • Minimise the intimidation, so many applications all the place makes it hard for a user to gain access to what they want/need.
  • Some links such as videos, seem rather pointless, maybe culling the irrelevant or underused ones, or even an option to remove from the home screen.
  • it isn’t clear that there are two pages of links, the dots at the bottom may need to be moved or removed, having two screens isn’t user-friendly.
  • Changing the order of the apps is a possibility! however, how would a first-time user know? the app would benefit by introducing a mini “tutorial” on application download or a “settings” button to help the user in their navigation and customisation.
  • The user flow needs refining and clarification, while clicking through the links, buttons such as “back” and the arrows need to be clearer in their use. Back, should be replaced by “home” as it takes the user back to the home screen, whereas the arrows allow you to toggle between the shuttle campus options and the shuttle map view.

Visual Design

How would you describe the visual design?

The application is clean and maintains a typical IOS design layout, consisting of standard icons, representing each link. The WSU logo featured towards the bottom of the screen.

Does it match the university’s brand image?

The design is consistent with the brand image, maintaining the use of the university’s colour scheme, and simple, one-dimensional icons.

What improvements could be made?

The application design is dull and insipid, and holds virtually no appealing qualities, it could be improved by developing a more graphically fun layout and style, as well as a minimization of the eyesore red that the designer has blatantly overused.

Visual Design Remake

Before:

After:

Unpackage

When redesigning the university app, I considered how myself as a user would prefer the app to look and the links to be accessible. I removed the lightning bolt icon, and replaced it with a settings one, that can be more easily noticed at the top left hand corner of the screen, from here the user will be able to access “customization tools”, I have also moved the screen number “dots” to the top, again to be more noticeable. The links I have categorized into 6 groups, which will allow the user to navigate more easily throughout the app.

 

Introduction to App Design

This weeks lecture focused on introducing the 3 different types of apps accessible through application design; HTML 5, Hybrid and Native. It delve into various pros and cons, but compared the way in which the abilities and performance can be affected multiple devices. In introducing us to these types of applications, the functions as well as the “need to knows” as designers, I feel more confident in completing the assessments and overall outlook on this unit.

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?

HTML 5

  • 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

Hybrid

  • 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

Native

  • 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.