Category: Lecture Notes

Lecture Pod Seven

Lecture Pod Seven

by jordanevans334543798

App Interface Design (UI)

Launch, Tray and List

A launch screen is used to reinforce the branding for the app. it also allows the app to be loaded in the background while the launch screen is open. They often require a touch to continue. Although, they must not be confused with the home screen.

The tray component, also known as the hamburger, drawer, sidebar, and off-canvas layout. It allows the designer to add more space to the screen without the user loading the screen or view that they are on. It is made up of two components, the active button and the tray area itself. A slide or touch gesture activates these components. A tip for good tray design is to don’t overdo the trays or buttons as it could take away attention from the content.

The list opens second and third level pages, as well as opening or expanding details for a content section. It can provide a method to return to the home screen. The list is made up of 3 main components; the list item, the navigation bar and navigation button.

What did i learn

I learnt what the launch screen, the tray and the list is, and learnt further information regarding its functions, do’s and don’ts of placement and when to use and finally how to use properly and in what situation.

Lecture Pod Six

Lecture Pod Six

by jordanevans334543798

User scenarios 

Stories of personas that act out 

Represented visually 

You predict how certain type of users represented by your personas will interact with your website in order to complete a given goal. 

A scenario is a narrative describing foreseeable interactions of types of users and the system.

Scenarios include information about goals, expectations, motivations, actions and reactions

What your future users will look for?

Even if your personas fail at the task, you now have a visual representation of your problem and you can go back and solve it. Scenarios should outline who, what, when, where, why and how of the usage

What did i learn 

I learnt how to properly create and effectively use an user scenario, as well as how they are presented visually on an interactive and informative level. 

Lecture Pod Five

Lecture Pod Five

by jordanevans334543798

Personas

User Personas

Inform and validate design and user experience

Represents goals and behaviour of hypothesised users

The concept was popularised in 1999 by Alan Cooper

Should include basic info as well as behaviour patterns, skills, attitudes, and environment

Consider the size of your audience and how defined they should be

Who, what, how, they will use the product.

Artefact Personas

Product Personality

If the product were a person, what would they be like

How would users react to the product?

How would you describe the product?

How is the product different from similar ones?

Thing the product is most like ie celebrity, car, movie

Make the product something that would be familiar/ comfortable to the user

Start by choosing defining keywords, then choose key ones (around 4) and then further explore/ define those words

What did i learn

This week’s lecture explored user personas and artefact personas, two important components of our research assessment. 

As well as further knowledge on how to develop user personas and artefact personas, the main thing I learnt from this lecture was the importance of developing personas when creating a product. They are as important as the visual components of a design, as understanding the user is crucial to creating a successful design.

Artefact personas do indeed also help as they personify your product which allows you to better associate your product with your users.

Lecture Pod Four

Lecture Pod Four

by jordanevans334543798

Understanding the device 

To understand the smartphone you need to use the device. If you’re designing for iOS then use an iPhone, if you’re working on android then use an android or use both devices to design for both.

You need to know how each of the platforms work and what are there unique user interactions, user interface elements, terminologies, and device characteristics.

Part 1: Gestures in iOS 

As a user experience designer, this is the pinnacle of the 5 seconds learn.

  1. The screen is touched based 
  2. User interface elements are touch-based 
  3. The user will need to use fluid gestures such as touch and swipe to engage the user interface elements
  4. the hardware buttons are secondary to the touch experience 

No tutorials, customer support calls or YouTube videos, in less than 5 seconds that user has been introduced into the world of iOS and its touch gestures.

Common touch gestures

The Tap 

The Drag

The Flick 

The Swipe

The Pinch

Random Gestures

  • The Shake

Part 2: UI – iOS anatomy 


Apple has a set of guidelines or requirements, for designing a standardized user experience for its hardware and user interface.

UI Components

Screen sizes

The Keyboard 

Pickers and Date Pickers 

Inputs 


The Tab Bar

The Navigation Bar

The Tool Bar

The Action Menu


What did I learn


I now have an understanding of the iOS anatomy and the smartphone as a gesture device, when designing, the aim is to keep the keyboard use to a minimum. Allowing for swipes and touches as key selection navigational tools. I learnt all of the iOS common touch gestures and the iOS common UI components.

Lecture Pod Three

Lecture Pod Three

by jordanevans334543798

App Design Process

Through-out the years as technology has become more advanced. Designers and developers have had to adapt to these evolutions and future trends. The tools that are used to create the app are more advanced than ever and the layout, design, and function of an app has become more evolved in today’s society. There is a lot of demand for apps that make everyday life easier in some aspects. Whilst there have been new technological advances, there have also been new terminologies created and brand new career titles to facilitate designing mobile apps, but in its essence, the design process remains the same.

How do you go about designing an app?

Idea

Before you start thinking of a design or even drawing up a wireframe, you start with an idea. Anyone can come up with an idea, it could be a designer or perhaps a client, but ideas always come first. Having an idea evolve from the ground up can be more effective for the final result as you can come up with better ideas for it as you progress. As a designer, you want to generate your ideas, challenge them, then revise them.

When going through this process you need to ask yourself these questions.

·     Is this idea financially viable?

·     Is this idea technically feasible?

·     Is someone else already doing this?

·     Could this be made simpler/differently?

Spec or specification

It is a physical document that officially declares what your apps is described as and what does it do and how does it achieve it. In simple terms, it is a blueprint for your app. Specs are important as it is a breakdown of your overall app. Have your specs short and straight to the point and always list both non-functional and functional requirements.

Wireframe

Wireframes are a sketched layout of how your app demonstrates what interface elements will exist on your pages. This step is important as It helps you understand how your app is put together and structured. By sketching out wireframes you can gain knowledge on how to achieve your main goal by knowing exactly how your target audience goes through your app.

By completing specs and wireframes you’ve shown you’ve made preparations and in the final result that’ll make all the difference.

Prototype

Prototyping is the step of creating your app to see if your version marks your goals. This is the step where you get early feedback and where you can improve your app. A bad experience with your prototyping might cause you to uncover various issues, allowing you to fix these issues before proceeding to the next stage.

Visual design

This next stage is all about designing the look of the app. It’s not just about making everything in the app look nice, there also needs to be a consistent and identifiable visual language throughout. Visual design is the opportunity to not only tell a story bu communicate your brand. Great visual design elevates the dull, clarifies the unclear and leaves a lasting impression with the user.

Development

Ideally, the developer has been part of all previous phases. Developers are essential to have during the overall development of your app because they could effectively improve your app by pointing out a feature that a designer might have overlooked. the developer chimes in with his or her experience and comments on the difficulty level of implementing these designs. There is also a discussion in terms of best tools and structures.

What did i learn

I learnt about the technological advancements there have been in the design industry, however the design process has always been the same. Before starting to think of the design or the wireframe you must think of an idea. I learnt the next stages involve wireframing and specs and the importance of those stages. Also the prototype, as it is a crucial step to help you find any issues and fix some bugs. The last steps include visual design and development, there needs to be a consistent and identifiable visa language and developers play an important role of all these stages. A good lesson is once the app is complete it is not final, there are always improvements and visual changes in the future.

Lecture Pod Two

Lecture Pod Two

by jordanevans334543798

App Design and Development Process – Prototyping

When designing for apps, you have to have a deep knowledge of different devices.

New device categories like smartwatches force us as designers to learn new paradigms.

Challenge the way you think 

Change the way you work

Lean UX cycles

Think, make, check

Sketching on paper allows designers such as ourselves, to think less of design and to think more on the actual function and flow. This is without distractions by design details such as colors, size, and fonts.

The term “mobile-first” simply means starting with the smaller screen, even if your app will run on both smartphones and tablets, beginning by design for the smaller phone is more effective adapting a larger design to a smaller one. 

The design process starts with mobile than a tablet than a laptop than a desktop.

Understand development

The success of the app depends on the designer and developer working well together to achieve a shared goal. 

Use a variety of operating systems

When designing a mobile app, if your target is the global mobile market you have to have access to at least Android, iOS and Windows phone devices and be familiar with the operating systems.

A useful exercise to understand patterns on operating systems is to download the same app on all operating systems and analyze their distinctions and similarities.

Prototype everything 

Prototypes help us to evaluate file user testing and apps usability, ideally, you don’t have to wait long until you build your prototype. 

What you see is not always what you get 

With apps, you have to test on a mobile device to see how a user interface will look and function.

Apps are never finished 

It is a digital product that evolves. If there is a problem with the app, the user is always right, detecting problems is an opportunity on how to learn and correct our work, thereby improving it and building an easy to use the app.

What did I learn

I learned that designing apps requires a new way of thinking, I now understand that tablets, smartphones, and watches are separate and distinct devices. Sarah said that sketching on paper allows designers to think less of design and to think more about the actual functions and flow of the app and I think that’s really valuable advice and a helpful approach to learn and take for my future designs.

Lecture Pod One

Lecture Pod One

by jordanevans334543798

Introduction to App Design

What is an app?

App or Application is a software program that is designed to perform a specific function directly for the user or in some cases for another application program.

There are 3 types of apps:

Web App HTML 5, Hybrid, Native

Web app involves user interface or user experience, responsive web design that can be made to make a web application whether a conventional website or single-page application viewable on small screens or touch screens, stored on remote server delivered over Internet on a browser interface.

Hybrid is combined elements of both native and web applications, 

Native runs directly on a mobile device. Think IOS or android, it is a single platform only.

HTML5 vs Native

HTML is much cheaper and easier to use compared to native, so therefore HTML wins.

Web App HTML

It is important to have a well designed and functioning app because research takers state that more than 50 percent of the time-poor experience of an app would put them off using the companies service or product.

Mobile Website or Web App?

Pros and Cons
HTML5

Pros:

  • A quick option for making existing content available via a mobile device
  • Only needs to be built once and would be usable for every device

Cons:

  • User experiences inferior
  • Performance inferior
  • We live in an app world
Hybrid:

Pros: A mobile app built with HTML5 gives you the “space” or phones that can be used to bridge some of the gaps between native apps and a mobile website.

Cons:

  • Low/No bandwidth an issue
  • No unique mobile functions

Native:

Pros: 

– UI and UX smooth and engaging

– Devices capabilities optimized

– Faster load times compared to web apps

– Robust performances in online or offline mode

– Better discoverability ad brand image

– Superior security compares to HTMLS5

Cons:

  • Requires development for each mobile platform 
  • Expensive

What types of apps are there?

Apps are sorted into categories, there are 20 app categories on the app store.

Games, business and education are the most popular categories.

More than a hundred billion apps were downloaded on the app store.

App categories can be reduced to six basic types, these include utilities, entertainment, games, news, productivity, and social networking.

The more people you can affect and improve their lives the more successful your app will be.

As designers, what do we need to know about app design, now that we have some web design experience?

  1. users expect familiar user interface (UI) controls
  2. Touch input – Gestures change everything 
  3. High res is taking over
  4. Time is short
  5. The real estate is tiny
  6. Context is everything
  7. Wireframing is essential

What did I learn

I learned what types of apps there are and how they compare with each other. It is crucial to know these types of apps because it is basic knowledge and helpful to me as a designer if I choose a path that relates to a website or app design. I found the 7 points on app design very helpful as it shows me the importance and amount of work there needs to be delivered in app design.