Lecture notes on the week seven lecture pod.
App UI Patterns: Launch, Tray and List
- Launch Screen
- Reinforces brand image
- Allows the app to load in the background
- Usually require a touch to continue
- Sidebar, hamburger menu, the draw, the off-canvas layout; these are other names for the ‘tray’.
- Designed to add more space to the experience
- Users may need to touch or slide to open the tray
- Made up of two main components; the active button and the tray area.
- The active button can be either a hamburger, user icon or custom icon.
- Should always be a visual button to make it clear to the user the feature is active.
- When making the tray, some rules include making a unique shape, displaying that it is an active design, large enough for a finger, make it look different when touched and make it part of the navigation.
- When creating the tray, allow for it to take no more than 70% of screen space to allow users to navigate out of the tray, as well as remind them which page they were on.
- Good design elements of the tray, include a clean design, short labelling, little scrolling, minimal gestures of (up and down/left and right)
- Don’t overuse trays.
- The List
- A note to the user they are travelling through various pages within the interaction.
- The list item should have an arrow indicating a lead to a new page as well as a design change to show that it has been selected. The navigation bar should be the same across all pages; it should include a back button to allow users to go to previous pages.
- Don’t allow ‘the list’ pattern to goo too deep i.e. lead to 4+ pages.
- Allow the last page to be actionable, whether it may be to share on social media or same as bookmarks etc.
Image Source: https://tubikstudio.com/color-in-ui-design-look-on-the-bright-side/
Lecture notes on the week five lecture pod.
- Persona = fictional user of the interactive.
- Scenario = the context within which they use it.
- Similarly to how a script is written for theatre or films, designers must create a user scenario, which predict how users (user personas) may interact with an interactive in a particular situation.
- It helps the designer understand what future users may look for when engaging with an interactive.
- Every scenario is detailed in different ways, however they should essentially include the who, what, where, why and how of the usage.
Image Source: http://www.uxforthemasses.com/scenario-mapping/
Lecture notes on the week five lecture pod.
- Developing personas for a potential audience allows the designer to fully understand who their creation is aimed at.
- Creating user personas embodies characteristics and objectives that potential users of the intended interactive may have.
- Generally, user personas include information such as age, sex, occupation, relationship status, hobbies, likes/dislikes, goals, skills, attitudes etc.
- Developing several personas of your audience is ideal. This can be tough as one doesn’t know who may see the project, however personas of the intended audience is enough.
- Detail and refine the persona as much as possible.
- Even adding a persona to the actual product as well as the user, a great method of practice.
- When creating a product persona (referred to as Artefact Persona) the following questions should be asked:
- If the product were a person, what would he/she be like?
- How would users be expected to react upon first impressions of the product?
- How would you describe the product to a friend?
- How is the product different from other competing products?
- Which celebrity, movie, car etc, would you compare the product with?
- Developing these personas are the building blocks of any design process.
Lecture notes on the week 4 lecture pod.
- To understand the smartphone, one must use it.
- In order, to design for each phone experience, you need to need to know how each platform works:
- unique user interaction
- interface elements
- device characteristics
Behaviours and Gestures of iOS
- The iPhone welcome screen is the first thing users will encounter
- The ‘5 second learn’ grasps the user’s attention and becomes aware of the iOS gestures:
- screen is touch
- user interface elements are touch
- use touch and swipe to engage the user interface elements
- hardware buttons are secondary to the touch
- Common gestures:
- Tap: building block to the iOS platform. Pressure of the finger comes into contact with the screen. Engages the user by using a 44×44 active area around the button. The pressure sensitive screen allows for people to use as lightly or as forcefully as needed.
- Drag: using the touch gesture to scroll or move an onscreen element e.g. an app icon.
- Flick: both a touch and movement of finger. Quick and less directed movement,
- Swipe: using larger contact area for directing onscreen movement, access menus, navigation trays/touch-heavy interface elements, slower/controlled interactions.
- Pinch: uses finger interaction to zoom in/out of an application. Based on two gestures; open = zoom in/close = zoom out.
- Shake: uses phones accelerometer to activate a user interface action.
UI – iOS Anatomy
- Bars: contain contextual information that informs us their location, navigation/initiate actions.
- Content views: app specific content that can enable behaviour such as scrolling, incersion and rearrangement of items.
- Controls: perform actions or display information.
- Temporary views: appear briefly to give you important information or additional functions.
- Key-board: specify which keyboard you want, e-mail, default or URL.
- Pickers and Date Pickers: combination of various inputs in 1 spinner.
- Inputs: slide and the switch; used to create interactive messages.
- Tab-bar: facebook, common in all apps.
- Navigation Bar: plays a critical role; centre = title of the content, right = action buttons, left = used to go back.
- Tool-bar: acts as a general place holder for icon/text. The goal is to support the current page with secondary navigation, e.g. safari – bookmarks
- Action Menu: access to secondary action or navigation.
Lecture notes of the week 3 lecture pod.
- Designing an app involves the following steps:
- Idea: -start with an idea and over time continue to develop this idea. To ensure an idea is strong there is a three-step process, i.e. generate —> challenge —> revise
- Ask the following questions; can the idea potentially make revenue? Is it possible to create? Is it an original idea? How much can you simplify?
- Short for ‘specification’, spec is the document that contains information about what the app does and how it will do it.
- It can often been seen as a contract that explains to people involved, what needs to be accomplished.
- The document often refines the idea and changes elements of it.
- Things should be kept short and simple otherwise aspects may be misinterpreted.
- Mockups that can be included in the spec or created from it.
- Rough sketches are produced and gone through with the client, once satisfied they are then digitalised and revised once more.
- Everything not realised in the spec are added on to the wireframes e.g. app flow or missing sections etc.
- Once the spec and wireframe are successfully finished, it is now time for a prototype. This allows for early testing of the app. The creator can either use tools such as ‘InVision’ and ‘Marvel’ where mockups can be an interactive that allows the user to get a “feel” for the final app or code the app from scratch.
- Complex apps with large teams have great benefits out of using InVision/Marvel as it is less time consuming and can be easily shared. However, smaller teams will benefit from going directly into code, and lays down a foundation of the actual app.
- Visual Design
- Focuses on the appearance of the app.
- It helps communicate the brand and makes the app experience more enjoyable.
- It supports the overall idea, by executing the spec, wireframes and prototype.
- The visual design can make or break the project as this is what will have a long lasting effect on the user.
- Development and design are two separate phases. However, both link, development doesn’t exist without design and design doesn’t exist without development.
- Get an idea
- Write it down
- Build a prototype
- Jump back and forth between design and development phases until you get a result.
Image/Information Source: https://www.smashingmagazine.com/2016/11/what-everyone-should-know-about-the-process-behind-app-design/
- Apps are a type of software, designed to perform specific functions the user may need. For instance, a calculator, compass or weather prediction.
- Three types of apps include: HTML 5, Native and Hybrid.
- Native – runs directly on the mobile device and developed specifically for an operating system, i.e. what may work for the IOS may not work for Android, therefore coding is altered to ensure smooth running of the app on that particular device.
- Pros of HTML 5 include being able to quickly transform any website to be made available on a mobile device while maintaining user friendly features. The best part, all the coding only needs to be done once. However, there are cons which include, poor user experience as well as poor performance. There is also no possibility of accessing the in-built features a smartphone has, such as the camera, calendar etc., from within the app.
- Pros of Native consist of the User Interface (UI) and User Experience (UX) running smoothly along with fast loading, powerful performance both offline and online, easier discovery on the systems store and is deemed much more private and secure than HTML 5. Cons are Native app creation is the most costly and time consuming as developers need to create coding for both IOS and Android as it is non-transferable.
- Pros of Hybrid include the ability to operate like a HTML 5 webpage but similarly operates and aesthetically looks like a Native app. Cons include slower performance.
- When designing an app the following should be considered:
- The UI needs to be familiar to the user and designed with the intent of being used through touch gestures.
- The resolution of the device must always be considered, time is important as you have a short amount of time to get the information across to the user, therefore the simpler the better.
- Screen space is limited, thus the elements of the app need to maintain their readability with compromising space.
- Context is important, understand what your audience want by conducting research and testing prototypes etc.
- Wireframes are vital before producing any project as you get a sense what the app may look like prior to its completion along with deciding if any alterations need to be made.
Telerik. (n.d). Unknown [Digital Illustration]. Retrieved March 8, 2017, from, http://venturebeat.com/2013/11/20/html5-vs-native-vs-hybrid-mobile-apps-3500-developers-say-all-three-please/