Reference no: EM133886272

Tutorial - Interface Elements and Wireframes

Revise week 6 content and complete the following in your Weekly UX Tasks 5 to 7 document as required. As this is an advanced unit, you are expected to solve exercise problems yourself, although the tutor is available for advice.

Part 1:
Part 1 exercises relate to learning and applying techniques from the software Pencil in relation to this week's content.
Pencil Collections
Begin by downloading the Evolus Pencil Collections zip file from the Unit Information section of Moodle.
Unzip the zip file and it will extract to show 9 more zip files. Do not unzip those 9. Just remember the folder location.
Start the Pencil software and a New Document.
On the bottom left, click the "Manage Collections" button that appears as 3x2 dots.
You can change the order of collections, hide collections you are not interested in, and install new collections.
We are most interested in installing more collections, so you have some better user interface elements for prototyping.
Click "Install From File".
Go to the folder location that contains the 9 zip files.
Select android-lollipop-pencil-stencils-v1.1.0.zip and Open.
Click "Install From File" again.
Repeat the process to install ALL 9 collections one at a time.
If you get an error, it may already be installed, or you clicked on the same one twice.

You should have all of these now in your "Manage Collections" window:
Common Shapes
Basic Web Elements
Desktop - GTK Widgets
Desktop - Sketchy GUI
Desktop - Windows XP Widgets
Flowchart
Mobile - Android ICS
Mobile - iOS UI Stencils
Mobile - iOS Wireframe
Desktop - Prototype GUI

Generic Wireframe
Desktop Material Mockup
Community Material Vector Icons
Mobile Material Mockup
Gnome 3 Widgets
Bootstrap
Android Lollipop
Material Icons
Twemoji

All of these could play a crucial role in your low fidelity wireframes for Part 2 today, and your high-fidelity clickable prototype for Assignment 1. They each have different styles and versions of various UI elements such as buttons, navigation, menus, forms, icons, etc. Now we will look through a few examples.

Drag the following onto the canvas:

> Button
Android Lollipop > Button
Gnome 3 Widgets > Button
Material Mobile Mockup > Button (tooltip calls it Raised Button)
Material Desktop > Button (tooltip calls it @Button22)
Generic Wireframe > Button
One at a time, select each one, look at their properties that can be changed, and right click to see what other options they have. Make some changes to each button. Get professional assignment help service now!
Note that some have no properties and are instead embedded in their right-click menu. All text and colours can be changed in the top of the screen toolbar if not directly in the properties.
When making your own lo-fi and hi-fi prototypes you will need to decide the best interface element from the options that convey what you want them to.
Generally, hi-fi prototypes benefit from more property options such as colours, shadows, text position, icons, etc. But for wireframes, simple and greyscale is fine.

Go through each collection, and add to your canvas multiple of the following in any order (check week 6 content if you forget what they are):
Checkboxes
Radio Buttons
Dropdown menus
Text fields
Toggles
Date Pickers
Menus
Tooltips
As you can see there are literally hundreds of options for your UI, and some are very customisable.

Next, have look inside the "Community Material Icons" collection.
You may have already noticed that it is blank!
This collection is not to place icons directly on the canvas. It is an icon collection that is used with elements that have icons (such as the exclamation mark in the Information Tooltip above).
In the Mobile and Desktop Material Collections, many interface elements allow icons to accompany them.

Drag onto your canvas:
Material Mobile Mockup > Title Bar
Material Mobile Mockup > Focused Tab with Icon
Material Desktop Mockup > Button (@Button217)
On the Title Bar
Right click and change the navigation icon

Right click and Action > Select Resource Images for Icon 1...
Change the Collection to Community Material Icons, and choose an icon that would be appropriate for Notifications
On the Focused Tab with Icon
Double-click the text and change it to "Shopping Cart".
Right click and Action > Select Resource Images for Tab Icon...
Choose an icon that would be appropriate for adding a desired purchase to your cart.
On the Button
Double-click the text and change it to "Add to Cart".
Adjust the size of the button so it doesn't look weird.
Right click and Action > Select Resource Images for Button Icon...
Choose an icon that would be appropriate for a Shopping Cart.
Go back to Manage Collections and drag and drop the order to your most preferred collections.
When you have had a good play around with various elements, move on to part 1b. (There is nothing to submit for part 1a).

Creating a New Employee Details Form
Note: the following form is not related to your scenario.
Review the week 6 content for Form Design principles and using what you have learned about Form Design:
Start a new Pencil file.
Create a "New Employee Details Form" with the following requirements:
Name
Date of birth
Personal contact and address information
Country residency details (e.g. Citizen/working visa/etc.)
Emergency contact details
Bank account details (e.g. for payroll).
Consider the required information from each of the above that would be relevant for a new employee at a company. For example, the name condition would require First and Last name as separate fields.
You also must choose the type of inputs, how to split up the data and inputs required, whether any data is optional, whether they have default data, placeholder data, and/or tooltips.
It may help to search for examples of new employee details forms to see how companies split up their data.
Once complete, click > Export...
Set the output type to rasterized graphics (PNGs) and export the image, then add the image to your Weekly UX Tasks 5 to 7 document.
Crop any excess space (if any) around the sides of the image and resize the form to display clearly in your document.

Part 2:
Part 2 exercises relate to your major assignment. Revise the requirements and your scenario, complete the following:
Low Fidelity Wireframes
Review week 6 content for form design and wireframe principles.
You are going to create several wireframes for your scenario product. This will give you a good start in Assignment 1: High Fidelity-Clickable Prototype.
Look at apps on your own phone, see the layout and sizing of various elements and fonts. Note that on phones, text can be quite small (but not TOO small!), as we place them relatively close to our face.

Requirements:
Use the Material Mobile Mockup > Phone Frame as a starting point for each wireframe.
Create THREE wireframes for your UX scenario product: one wireframe screen related to each of Registration, Product Details, and the Payment screen.
Duplicate your first completed wireframe to avoid recreating the entire interface. Right-click the page title in the bottom bar and click Duplicate. Then remove elements not required for the next page you are creating.
As these are low fidelity, greyscale is conventional, placeholders for images should be used (Desktop Sketchy GUI > Image), but text should be representative of a final design, and hierarchy of headings, content and navigation should be clear (see examples in the week 6 content).
Use a clear font for wireframes (Roboto is good, size 14 minimum). Your High Fidelity-Clickable Prototype will require the final visual design such as typefaces and colours, but wireframes do not.
For these wireframes, annotations are helpful but not required as this is low fidelity. However, you can annotate some things with speech balloons if you feel it necessary to explain what might happen under certain circumstance - just make sure they do not obscure the wireframe. Assignment 1: High Fidelity-Clickable Prototype requires annotations.
If one or more of your wireframes would require the user to scroll down, you should still show the entire page including what is below the fold as the example in the week 6 slides displayed.