Lecture Pod 07: App UI Patterns- Launch, Tray and List

Lecture Pod 07: App UI Patterns-Launch Tray and List

Lecture Pod 07 is about App Interface Design (UI) and explores the Launch, Tray and List. The first topic discussed is the launch/loading screen which is the branding for the app allowing the app time to load before you enter. The tray is a menu system which opens multiple option choices on the same screen without having to open another window. The tray option is implemented to further compliment the page they are currently on offering more options to the user. And the final interface design is the list which allows users access to navigation for second and third level pages while also allowing the user to return to the main page. Great mobile interaction with an app is all about intentional flow of Interface design without any dead ends when navigating through out the design.

 

 

 

Lecture Pod 06: User Scenarios

Lecture Pod 06: User scenarios

Lecture Pod 06 explores the concept of user scenarios which is described as the stories that the user persona performs in; these personas represent a type of user who is placed in a situation and completes sequenced tasks to reach an end goal using the app. This is a form user testing before the final app is completed to detect potential issues earlier on. The user scenario process is broken down into who, what, when, where, why and how.

Interpreting the issues, persona and context for which the persona will operate the product, it is our job to create the elements of the design based on these interpretations. This method and approach allows the designer to identify the functions that will assist the user in the final goals, they will apply to the design and they will be prioritized in the interface.

Personas are a made-up character who is placed in the context of the designed product and scenario in which they play in this narrative based on use.

Assessment 2 Wire frames – check and review

Rose Galea:

Best features and design decisions:

The number of features and options available to the user is great and are very creative.

The use of imagery, logos and illustrations adds to the playfulness and makes it more inviting.

3 improvements:

Certain user interface elements of the app are confusing and are placed odd places where I found it hard to find or interpret what they meant. Possibly better positioning of links and appropriate designs for easier interpretation would be great.

 

The colour scheme of certain pages within the apps design is very confronting and confusing as there are so many colours used. The pages themselves are also very crowded with too many icons and images. Making the pages simple with minimal illustrations or icons that are necessary may be the best way to go.

 

There are certain features of the app that are probably not necessary and aren’t needed. For easier use and understanding of the function of the app cutting out some unnecessary features may be the best way to go.

Phoenix Vaiotu:

Best features and design decisions:

The gym statistics page is a great feature for informing the user if the gym suits them, the information is also laid out nicely with great use of infographics providing a visual dynamic.

The simple us of color scheme and great use of info graphics is a great visual aspect of the app ensuring less visual clutter.

The ‘Gym Count’ live page is nicely laid out with visual elements to inform the user.

3 improvements:

The user information on the main menu page could have been laid out a bit better and more creatively as well as some more detail and possibly even the implementation of info graphics about the users.

The nearby page is very limited in showing information as to the wear bouts of the gyms nearby, as there is no visual map directing the user to the nearby gym it’s simply just gyms pin pointed near each other which makes it pointless. Implementing a map visual of the whereabouts of these gyms would make this feature more useful.

The register page is useless as the boxes to input the user’s information is empty without any description whatsoever of what to put into each empty box. Implementing text to describe what each box requires would make the page useful.

Lecture Pod 05 Interaction Design for smart devices-Personas

Lecture Pod 05 Interaction Design for smart Devices-Personas

User personas are explained which is explained as hypothetical users based on goals and behavior research methods used to record behavior patterns, goals, skills attitudes and context of which they exist in. Users Personas are analysed and looked at based on age, sex, occupation, hobbies, likes/dislikes, and personal details. These details are looked at to get a better understanding of the possible user persona. Looking at a user persona assists in creating a potentially more specific user base.

In regards to user persona a big audience compared to a smaller audience is analysed, user feedback is discussed explaining that it is important in the development of your project resulting in the end user satisfaction. To determine a user persona, you need to analyse what tasks will the user perform. The devices they are accessing, the reason users are accessing the content, as browse and search are usually applied to satisfy both types of users who either want to just browse or search for specifics. Mental models are looked at which allow the researcher to look at the methods a user may apply to solve an issue. Mental models help in the design process of the project as well as meeting the potential user’s needs.

Artifact Personas are looked at where questions of the product itself this time are used to analysed the product as if it was a person, some of the questions even give the product personality traits. Other research methods such as using experience key words are also used to do this

 

Lecture Pod 04 Understanding the Device / User scenario

Lecture Pod 04 Understanding the Device

Part 1: Gestures in IOS, firstly gestures of IOS is discussed as well as the 5 second learn concept listing the first 5 things a customer will do when they get in first contact with they’re Iphone. 1. The screen is touch based, 2. user elements are touch based, 3. The user will need to use fluid gestures to engage the user interface elements, 4. The hardware buttons are secondary to the touch experience.

Common gestures are then looked at such as The Tap in relation to touch based screens, The Drag in relation to scrolling and moving content on a screen, The Flick in relation to the touch and movement of a finger, The swipe which is based on moving from one element to another. The pinch based on two gestures to open and zoom in and zoom out and lastly Random gestures.

Part 2: UI-ios anatomy the UI elements of apples Iphone are section into sectioned four main elements which include Bars, Content views, Controls and Temporary views. The Keyboard, Pickers and Date Pickers, Inputs, The Tab Bar, The Navigation Bar, The Tool Bar and The Action Menu are all broken down and explain how the user gestures and navigation interact with the IOS tools.

User Scenario’s

User scenario #01

Jason is driving to his nearest Westfield store, upon arriving they open their phone up (which is placed on the dashboard) and open the Westfield “my parking” app to look for an available parking spot via the live feed of available spots on the app. Before using the app Jason places the phone on his dashboard to ensure safe use of the parking app while driving.

  • Firstly, he opens the app from his IPhone main page
  • Thus, accesses the My Parking Home page
  • He then presses Login and enters his account details
  • Once logged in he then presses the finding the parking spot link
  • They select what vehicle type they a driving where it be a car, bike or truck.
  • Then enter location dialogue box of which Westfield’s they would like to visit

They load up the available car parking spots displayed and follow the directions listed which include which entrance to take, the parking level and parking spot number.

Just before they arrive Jason quickly stops by a petrol station to fill up his car, after getting back on the road to the destination he realizes that he forgot where he was supposed to park and hurriedly opens the app up again and loads up the available parking spots to find an park in.

Jason finally arrives at the listed parking spot that is available in the parking lot and parks. Once parked the customer notifies the app they have parked, the app will then automatically record the current location of where they are. Jason then goes shopping for a few hours and when done opens the app again to find the original location of where they parked to find their car without getting lost. The driver finds the car gets in and then leaves to go home.

User scenario #02

Michael who is extra cautious before driving to his near Westfield’s store opens up the Westfield my parking app at home before leaving to see whether there are plenty of parking spots leftover.

  • Firstly, he opens the app from his IPhone main page
  • My Parking Home page
  • He then presses Login and enters his account details
  • Once logged in he then presses the finding the parking spot link
  • They select what vehicle type they a driving where it be a car, bike or truck.
  • The enter location dialogue box of which Westfield’s they would like to visit

Loading up the available car parking spots displayed and follow the directions listed which include which entrance to take, the parking level and parking spot number.

Happily, they realize there are many parking spots available on a few of the parking levels and then drive to the Westfield’s store. They end up being stuck in traffic and become frustrated and worried they will not be able to get a parking spot before it is peaking shop time at the Westfield’s store. Just before entering the Westfield’s store they quickly open the app again (the phone is located on a dashboard mount to ensure safety when using the app while driving).

  • They select what vehicle type they a driving where it be a car, bike or truck.
  • Enter location dialogue box of which Westfield’s they would like to visit

To Michaels surprise the page displays that there are only a few spots available left and hurriedly drives throughout the parking lot to find the spot he wanted only for it to be taken up by another driver. Frustratingly he opens the app quickly and is relieved to find another available spot a few meters down, he finds it empty and parks.

Michael notifies the app that he has parked pressing the notify park link which automatically appears on the page when parked and happily closes his phone and leaves to go shopping. When finished shopping, Michael opens the app again to find the original location of where they parked to find their car without getting lost. The driver finds where he parked gets in and then leaves to go home.

Lecture Pod 03: App design process 2 / Unpacking an App Exercise : Western Sydney app Mapping

Lecture pod 03: App design process 2

This article is based on providing a beginner in app design a step by step process a basic understanding on an apps development, majority of app creators use these fundamental and key processes to do so.

The first step in an apps development is the Idea. The idea of what your app may be. The important thing to remember is that the “idea” of what your app will be is an ever-evolving process and will continue to change throughout its development process. Questioning whether the app is feasible is also very important such as “is this idea financially viable?”, “is this idea technically feasible?”, “is someone else already doing this?” and “could this be made simpler/differently?”.

Secondly the Spec process is implemented which determines what the app can do and how this will be done. This is very important as it allows you to further develop the app’s concept and ideas providing what will be created and how this will be executed. Many of the presumptions and ideas will be evaluated, confirmed and scrapped.

Wire frames is the next step involved in production, wire frames lay out the visual mock up and blueprint for how the app may look, function and interact with the user. The wire frame further gets rid of any unnecessary and illogical navigation in the app, absent pages/links and counter intuitive flows.

Prototype is then next step which means to create and develop a basic and simple production of the app allowing the team to further test and use this simple production as a trial further weeding out any issues and evaluate the entirety of the app to make changes or abandon it entirely. This will in return save the development team further time and money spent on the apps possible visual design and its development.

Visual design is third last step; the role of visual design is to not only make the app appear to be aesthetically pleasing to the user but also ensure there is consistent and identifiable visual language. The visual design of the app is an ever changing and required process.

Development is the second last step which is the creation of the main elements of the app that should be a part of all the previous steps listed and the teams involved.  Although a balance needs to be there developers should not interfere to much with the other teams involved in the creation of the app, although they can ensure that other teams don’t make mistakes which can impact the apps development. This communication between teams needs to occur.

Iterate is the last stage of the app’s development the article stating that an app is never completed only further developed and is continually re-evaluated to ensure the best user experience and outcome. The process of creating an app is never the same and the order of steps and processes will be different for each. The steps listed above should be looked at as more of a guideline not to be followed religiously which will be changed to suite the apps creation process, as stated earlier every app’s creation process/steps will vary.

Western Sydney App mapping

 

Western Sydney App front page