Introduction:
I designed the user interface following the conceptual model rules, analizing how I could manipulate perceived affordances to make the interface intuitive. To find what constraints I could implement to prevent user from entering invalid input. To create natural mappings that are self-explanatory to the user. Finally, to take advantage of general conventions, based on range of users for whom project is targeted to. All of them combined create UI that after testing turned out to be very intuitive. Below are the effects of this analysis:
Affordances:
Configuration menu on the left of main GUI screen had to allow user to input his preferences regarding desired computer specification. For this I created two kinds of GUI components, which are sliders and buttons. Sliders afford sliding, therefore being useful for specifying details like price range or maximum drive capacity.
Constraints:
To allow user comfortable experience using our application I had to restrict his access to main parts of program. This allows to force user to familiarize with initial instructions first. For that usage, I designed separate „Start” screen that displays basic information about application. Only after pressing „Start” button, program will unveil the rest of its options.
Another constraint comes from buttons and sliders described previously. Sliders allow only to input one value, as we don’t want user to, for instance, enter 2 different price ranges. Buttons were chosen instead of input fields to prevent user from entering wrong specification. For instance, we want user to choose either AMD or Intel CPU (or both), not allow him to type „qwerty” as CPU manufacturer, because such doesn’t exist.
Custom titlebar provides constraint by removing „maximize” button, that is normally visible in other applications. Our interface is not scalable, therefore, there is no need to maximize its window.
Mappings:
Each PC component chosen by the algorithm allows for 3 actions – removing it, locking it and opening its Amazon page. To create a natural mapping, icons of those functions were placed next to corresponding components, suggesting user to which component they are related to.
Conventions:
For those 3 icons I also took advantages of cultural constraints. Removing icon is represented by trash bin, locking icon by a lock and Amazon product page icon by bent orange arrow known taken from official Amazon logotype. Power button is also represented by international power symbol defined by IEC 60417 standard. (Terence Eden, Joe Loughry, Bruce Nordman 2014)
List of References
Eden, T., Loughry, J., Nordman, B. (2014) Unicode Power Symbol [online] available from
<http://unicodepowersymbol.com/a-proposal-to-include-iec-power-symbols-in-unicode/>
[21 February 2016]
CUOnline Moodle (2016) Thinking About People [online] available from
<https://cumoodle.coventry.ac.uk/mod/resource/view.php?id=770822>
[21 February 2016]
