For this assignment I was working with Melissa Granger and Sian Mansell.
Our task was this:
Form teams of two or three.
Take the following batch save dialogue box from Debabelizer and improve the layout, using the appropriate grouping, hierarchy, scale and proportion.
The original box looked like this:
It was fairly noisy and hard to read. We wrote down all the elements of the box but still found it confusing. As a class we wrote down what we knew about the project and what we didn’t know:
What was known:
- Apply the use of scale, contrast & proportion; differentiation, emphasis, activity and interest; etc
- Eight different sections of the GUI
- Header
- Functional requirements – apply, exit, cancel
- Information architecture – Design as defined by previous interface
- Emotional design – negative, develop concepts of positive emotional design
- Interaction design: Dropdown menus – user must seek (hidden info), buttons, information comes to the user
- Presentation design, Proportional relational scales, Font – legibility, scale, etc Colour as function
- Usability versus flexibility
What was not known:
- How the use of scale, contrast, etc will be applied
- Information architecture, Are all elements relevant?
- Emotional design – what is a positive emotion?
- No holistic understanding of program
- Interaction design – What is in dropdown menus?
- Presentation design – What proportional relational scales? What colour/s?
- Define level of usability versus flexibility
From this the class was able to devise a research plan:
What are the best practices in GUI design? – user-effective, goal-orientated applications (Adobe Suites, Apple iLife)
Information architecture – best practices, principals used
Emotional design – how to evoke positive emotions in the user, how to differentiate – how to avoid established competitor’s colours, light, type, etc
Define level of usability versus flexibility
We divided the research load between the 3 of us. Of course we found that information overlapped each other, which was good because it meant we were on the right track.
We found what was important in a interface was this:
- 3 basic emotions when using an interface: happiness, fear, curiosity.
- Like to maxmise the happiness, minimise the fear and control the curiosity
- Feedback is important
- Minimal information on screen is better
- Interface should have consistent personality traits
- Let the end user take control of the interface
From this we were able to develop a brief. Which was:
Aim:
To redesign the batch automation processor, given in D2-3.
Method:
Design Mandatory:
To invoke a positive mindset for the end user.
Must be called “Batch Automation”
A5 set stage size 297px x 420px
Design Elements:
Consideration to the following design principles –
Primary Objectives:
Signal to noise ratio
Consistency
Layout
Typography
Secondary Objectives (to be considered at a later date)
Maslow’s Hierarchy of needs
Flexibility vs usability trade off.
Audience requirements:
End user wants to use the batch automation processer. Has to simple and quick to use.
Technical requirements:
Elements can be changed in format, rearranged – but all must appear in one form or another
.ai file
After many paper prototypes we came up with this solution:
We had stripped the interface to it’s bear essentials however felt that the interface was boring. We decided to set the information into 4 sections, in order to break it down for the end user. These sections are:
- Script Settings ( Apply Script )
- Image Settings ( Source Folder )
- Open Settings ( Auto Naming )
- Save Settings ( Save Image )
In the headings of each title would be:
Script settings : 1. Script, 2. Display
Image settings : 1. Type, 2. Colours, 3. Advance settings
Open settings : 1. Image, 2. Location
Save settings : 1. Save, 2. Advance settings, 3. Auto Naming
*Note: Advance settings are what appear as the radio buttons on the original Batch Dialogue box.
We then played with many shapes and forms. We decided a circle divided into 4 sections that will lead the user into each section. We were now doing a complete redesign rather than working with what we were given. Our results were as follow:
Our idea was to lead the end user through the batch automation cycle. They would start of with what script they would like to use. The move on to image. Again moving onto open, where they would like the image to be opened from. Finally end with save. We had some debate about the colour scheme. Since we were using pictorial horizon it was hard to decide if the darker colour should show the shut off section or if it should show the open sections. We decided a lighter colour was more suitable due to other applications, this showed some consistency in programming.
The layout would look as follows:
Script Open:
Image Open:
Open open:
Save Open:
A few criticisms we received while presenting were. Typography of the title “Batch Automation”. It had looked it had just been slapped on there, while other typographic elements looked like they were well considered. The tabs at the bottom also looked like their own function. They were not part of the gestalt of the whole interface.
We also hadn’t considered if the end user wants to go back step. How would they do it? One possiblilty would be to grey out the area with a 50% opacity instead of a full colour block.
This what we were able to come up with in 6 hours of work. Further iterations we would like to have solved these criticisms and played with colour with the interface.
A small break down of the project was written by Melissa:
D2_3 – Redesigning Software Interface
What?
Lesson signal to noise ratio
Maintain consistency
Consider proportion and balance in the layout
Legible, relative and consistent typography
Simplify
Why?
Thinking outside the square
Differentiation
Standing out from the crowd
Adding visual interest but minimising clutter
How?
Broke down the Batch Automation into 4 major sections:
– Script settings
– Image settings
– Open settings
– Save settings
Additional components that needed to be present on the interface included:
– Apply (ok)
– Exit
– Cancel
– Help
Each of these sections where then broken down further, what elements are within these section.
Script settings
– Script
– Display
Image settings
– Type
– Colours
– Advanced
Open settings
– Image
– Location
Save settings
– Save
– Auto name
– Advanced
Typography Consideration:
Section headings
– Tahoma
– Size 7pt
Tab headings
– Tahoma
– Size 6pt
Dropdown menus
– Tahoma
– Size 4pt
Leave a Reply