EECE

418 Assignment 1 Pre-proposal

Adjusting Color Settings on an LG LCD Monitor

Raymond Huang - 12ay.huang@gmail.com

1) Problem Description

The fundamental interaction between users and computers are interacting with displays. They are ubiquitous: televisions, laptops, mobile phones, etc. And for the most part, they function well: vibrant colours, great viewing angles, and fast response times. For a certain subset of users, color accuracy is a critical feature. Artists, photographers who work with monitors need to calibrate monitors to get an accurate color representation. Most monitors have a few discretely placed buttons to adjust these settings.

Example of poorly corrected monitors

In our LG monitor, there are usually four buttons: Menu, Left, Right, Set/Auto, Power. The first four buttons are used to navigate the menus and set the various options available on the display.

Buttons available to the user

2) Functionality

The function of these buttons is to control various monitor settings to adjust the colour settings. The Menu Button initiates the menu to adjust settings, and also works as a back button once in the menus. The Volume Down and Volume Up buttons are used to navigate the submenus and also to set the values of options. The Auto/Set button is used to confirm actions, and to navigate between different options in the submenu. The main users interested in using a system like this would be artistically technical users, for example: photographers or digital artists interested in getting the most accurate color representation out of their displays. Color accuracy is important because it is easy for tones to warp slightly, especially if human skin tones have color casting. Another case would be the contrast levels, because if your display may wash colors or hide detail due for different curves. The physical requirements of this system are firstly: controls are placed discreetly, but obvious. When we are looking at monitors, we want to focus on the display itself and not distracting buttons placed along the screen. With this constraint, we want to have an intuitive interface to adjust the display properties. Physical buttons are used and they should have good: visual affordances, mapping, and positive transfer effects to minimize human error. Additionally, we must have responsive feedback to fine-tuning the display. We want the display to automatically refresh the content and show us the instantaneous values of the current color settings. There are myriads of display options available, and ideally there should be some mechanism to save states or presets so that users can easily compare different settings or to go back incase undesirable changes are made. The user experience should focus on ease of use. Users do not adjust their display settings very often, so there are no strong learning effects for remembering how to use the buttons or On Screen Display. Essentially, every time we dive into the settings, we are re-learning the buttons as we go along. Because of this, I think the two usability requirements are: straight forward controls to prevent pressing error, easy to navigate menus so that we dont waste time going through menus, and fast feedback to evaluate changes. This leads to the following questions: Are the controls intuitive and error-prone- free? Can I easily find what I am looking for? Can I easily see the changes I made to the display? Can I easily recover if I make a mistake? With regards to these three questions, a few problems were raised. My three main issues with the current designs are the following: ambiguous functions of physical button, poor-flow of menu navigation, and the inability to recover gracefully from value change error. Firstly, the four buttons for menu navigation are very ambiguous. To instantiate the menu, you press the Menu button. Because you press the Menu button to bring up the menu, our minds are mapping the Menu button to positive actions,

such as advancing into menus. It becomes awkward once you enter the menu, because the Menu button suddenly becomes back/exit. In fact, now the navigation is done either by the Volume buttons or by the Auto/Set buttons depending whether its surfing through categories or submenus. This makes it all the more confusing because the Volume labels give the notion of navigation. The menus are placed horizontally, so there is a visual cue to use the Up/Down buttons to navigate between options. Futhermore it makes no sense how Auto/Set should be used to navigate. This is a poor design choice because the buttons take on too many different mappings, and it is not straightforward when the context should change.

The left vertical menu uses Volume Keys while the middle menu uses set

Secondly, there is a problem with the menus coherency. Under f-Engine, if the options are not set to User, then all the other options are un-selectable. However, f-Engine is nestled in other menus, so the cause effect relationship is not obvious to the user. Another problem with the menu is the incoherency of the splash screen. It adds no additional features to the menu. Once in the submenus, we never returns back to this splash screen. Thirdly, one of the menus have double the number of options, requiring you to scroll. However, there is very weak indicators to show this is possible, and you are not aware of it unless you press Auto/Set enough times to reach the bottom.

If f-Engine is not set to User, all the other options in the left menu are grayed out, even though you can access them.

Thirdly, there is no way of un-doing changes. In the menus, I was unable to find a Restore to Default option. If we want more granularity, for example, to undo

the most recent action, that does not exist either. For each option, there are no visual indicators to show what its default value is, so we are left to guess.

3) Design Goals and Evaluations

For the first two problems stated, I wanted to improve the UI by 1) reducing the various mappings in the buttons because theyre prohibitively difficult to reinforce, and also to make menus non-ambiguous about navigation, especially the cues. To facilitate these changes, I wanted to keep the number of buttons the same but wanted to show there are better mappings. If we take advantage of the 4:3 in Wide button to help navigate the menu, we can use Up/Down/Left/Right and Menu. In this mapping, we do not need any button to take on multiple-mappings. Most monitors built today by LG are large high-resolution displays. It would make sense to make use of this real estate. The existing On-Screen-Display only uses a small fraction of the screen. If we expand the menu both vertically, so that all the items are placed in a long list, it would be much easier to navigate. We can keep categories separated by sub-headings and by using colours and shapes. We can also place the f-Engine, or newbie-friendly controls on the top, so it logically shows why all the other menu options are disabled.

Proposed Idea: F-Engine is logically placed, one large menu taking up the vertical space with grouped categories

Now, the Up/Down keys are solely used for navigating between different options. The Left/Right keys are used solely for adjusting parameters, and the Menu key is only used to toggle the menu on/off. All button ambiguity is removed. If additional functions are added, we can still stick to the vertical navigation by creating expanding blocks. To solve problem number 3, something interesting occurred. I realized that this feature existed, but on a second screen in the same menu. I feel this is very poorly placed. Even so, Factory Default resets all the display settings. If we do not want to implement an undo-button, what we can do is place an indicator

along the slider and flash a different colour when we have the default value i.e. Brightness: 100, Contrast: 70, Gamma: 0. To facilitate these changes, I specifically wanted to keep the buttoned interface the same. Therefore, these changes are mostly software based. In fact, none of the changes I requested require any sharply new functionality. All that changed are the button mappings and the layout of the On Screen Display. If we were to talk to the engineers at LG that implemented the interface, it probably would take at most 10 hours of coding at max to facilitate these changes. At a cost of 53$ an hour for a consultant (most common via Peak Usability for 2004), this project would cost between $500 to $1000. However, I imagine that LG uses a consistent UI across many product lines, so money would have to be spent optimizing the code, and making sure it works among all their product lines. I cannot estimate that aspect.