Projects/Liberty/UI: Difference between revisions
Purple-bobby (talk | contribs) |
Purple-bobby (talk | contribs) →Design of the User-Interface: Expanded application user interface |
||
| (2 intermediate revisions by the same user not shown) | |||
| Line 19: | Line 19: | ||
Luke Wroblewski tells us <ref> 1: Luke Wroblewski, An Event Apart: Properties of Intuitive Web Pages, 2012, http://www.lukew.com/ff/entry.asp?1498 </ref> we need to consider: | Luke Wroblewski tells us <ref> 1: Luke Wroblewski, An Event Apart: Properties of Intuitive Web Pages, 2012, http://www.lukew.com/ff/entry.asp?1498 </ref> we need to consider: | ||
* Interaction Design - how on screen objects move in response to the cursor | * Interaction Design - how on screen objects move in response to the cursor; behaviour/conversation with user | ||
* Visual Design - information is presented in an engaging or understandable way | * Visual Design - information is presented in an engaging or understandable way | ||
* User Research - study how the users interact with what they see in the application | * User Research - study how the users interact with what they see in the application | ||
* Copy-writing - choose wording suitable for your audience or users | * Copy-writing - choose wording suitable for your audience or users | ||
* Information Architecture | * Information Architecture - providing the necessary information and suitable presentation for the user task | ||
* Conventions - existing learned behavour from other applications | * Conventions - existing learned behavour from other applications | ||
* Proximity | * Proximity - related functions are located near to each other | ||
* Muscle Memory - the menu item or button is always in the same place, clicked without looking | * Muscle Memory - the menu item or button is always in the same place, clicked without looking | ||
== The Screen == | |||
The '''file browser''' or '''gallery''' present an image of each pattern or design, coupled with meta-data for the selected file or files. KDE provides tags and user comments to files, so files can be grouped in virtual folders not belonging to the underlining file system. | |||
At the zoomed out level of the designer application, the view is similar to the gallery, but zooming in on a file moves the gallery to the side and fills the main work area with the file opened for design work. | |||
Zooming in or out can be used to access more or less detail, parts of the design are labelled automatically, but the user can overwrite this label, the search box has something to search for. | |||
A number of tool boxes can be docked to the sides of the work area, and tool box items can be copy-dragged to the design or search box (to find and select parts of the design with the same class). Drag a red thread item from a tool box to the search box, and a search results list highlights all the red parts of the design, displaying their labels. | |||
When a new design is created, a quick to use first-time wizard briefly shows the user how to get started. The template tool box allows images, drawings, patterns, and other designs to be added to the design. The templates have tweak-able properties available after insertion into the design, such as the image template allows the user to reduce or increase the target number of threads (colour depth) with a manipulator handle. | |||
A special tool box holds the recently used tools, the template tools will pre-load this with suitable tools. | |||
Any change made to the design is saved automatically shortly after, and the pattern version of the design is also updated (in a background task). Any deleted parts are moved to a scrap-book and can be recovered, this allows out-of-order undo in a logical way, I think. | |||
== References == | == References == | ||
Latest revision as of 02:48, 29 April 2013
User-Interface
I think there are three, large-screen, small-screen and thumbnail.
| Large Screen | This is the Desktop/Laptop user, the screen has plenty of room to view the work and be surrounded by tool boxes. Major design work can be performed in this environment. |
|---|---|
| Small-screen | This is the Netbook/Pad user, the whole screen is mainly given to the work, with a small menu/toolbar to a short side of the window. Minor amendments to the design can be performed in this environment. |
| Thumbnail | This is the display on the machine. It requires a small colour image and the file-name to be displayed. |
The preview-image allows file operations to be applied to the correct design, I hope some sort of service would allow a design to be copied to a (say) JEF folder to have the design converted on-the-fly.
Design of the User-Interface
Luke Wroblewski tells us [1] we need to consider:
- Interaction Design - how on screen objects move in response to the cursor; behaviour/conversation with user
- Visual Design - information is presented in an engaging or understandable way
- User Research - study how the users interact with what they see in the application
- Copy-writing - choose wording suitable for your audience or users
- Information Architecture - providing the necessary information and suitable presentation for the user task
- Conventions - existing learned behavour from other applications
- Proximity - related functions are located near to each other
- Muscle Memory - the menu item or button is always in the same place, clicked without looking
The Screen
The file browser or gallery present an image of each pattern or design, coupled with meta-data for the selected file or files. KDE provides tags and user comments to files, so files can be grouped in virtual folders not belonging to the underlining file system.
At the zoomed out level of the designer application, the view is similar to the gallery, but zooming in on a file moves the gallery to the side and fills the main work area with the file opened for design work.
Zooming in or out can be used to access more or less detail, parts of the design are labelled automatically, but the user can overwrite this label, the search box has something to search for.
A number of tool boxes can be docked to the sides of the work area, and tool box items can be copy-dragged to the design or search box (to find and select parts of the design with the same class). Drag a red thread item from a tool box to the search box, and a search results list highlights all the red parts of the design, displaying their labels.
When a new design is created, a quick to use first-time wizard briefly shows the user how to get started. The template tool box allows images, drawings, patterns, and other designs to be added to the design. The templates have tweak-able properties available after insertion into the design, such as the image template allows the user to reduce or increase the target number of threads (colour depth) with a manipulator handle.
A special tool box holds the recently used tools, the template tools will pre-load this with suitable tools.
Any change made to the design is saved automatically shortly after, and the pattern version of the design is also updated (in a background task). Any deleted parts are moved to a scrap-book and can be recovered, this allows out-of-order undo in a logical way, I think.
References
- ↑ 1: Luke Wroblewski, An Event Apart: Properties of Intuitive Web Pages, 2012, http://www.lukew.com/ff/entry.asp?1498