Mirror of the Rel4tion website/wiki source, view at <http://rel4tion.org>
Clone
HTTPS:
git clone https://vervis.peers.community/repos/yEzqv
SSH:
git clone USERNAME@vervis.peers.community:yEzqv
Branches
Tags
user-interface-design.mdwn
I want to design some GUI widgets and interfaces for use with Razom as a backend. In order to eventually acheive good designs ready to be implemented, I need to plan then and develop them carefully, while studying existing similar interfaces. So in general I’ll need two things:
- Learn about UI design practices
- Create a template for developing designs
For 1, search “user interface design” in StartPage and start reading (and downloading). Also, there is an awesome list of resources here. For 2, I can use the GNOME design team’s templates and guidelines. In other words, I need to have the HIG and the design page template.
HIG book: - stable version for my stable debian can be found in package gnome-devel-docs
, folder /usr/share/gnome/help/hig-book
. Maybe it can be read using Yelp too, let’s see… yes, it can. I have HIG 2.2.2. - latest version is just a bit ahead - 2.2.3 - and it just updates a few links, nothing more, so there’s no reason to use it
Design template: here
Also design pages to use as an example: here
Until I start using these guidelines, I’d like to start a bit.
Query Creator Widget
Data can be filled into GUI widgets in endless ways, and the choice of the widget depends on the GUI design and usage pattern. It can be a list, a tree, a form, a graph, a text view… everything is possible. However, some patterns are very common and writing general-purpose widgets to automate their work would be very useful. Here I’d like to design a query editor widgets for a table view, e.g. a GtkTreeView containing data from a GtkListStore.
Examples:
- the output of
ls -l
- Nautilus list view (when there’s no hierarchy)
- table of open bugs in Bugzilla
- Work View in GTG
- Issue tracker comparison table in Wikipedia
In other words, this is the table view resembling the way SQL databases organize data: in tables. A widget of this kind can help make the transition from an SQL-backed system to a Razom-backed system.
The thing I want to design here is not the table view, but the chooser which allows one to control what gets displayed in the table. I see 3 obvious approaches:
Have some default view, and using right-click->insert/remove/move the user can change the table columns. This is how Evolution’s mail view works.
Have a full widget through which the user can choose columns, determine their ordering for sorting, add conditions to apply to them and even more advanced things like manually entring a Razom query. This is how GNOME Desktop Search and Bugzilla work.
Combined approach: Things can be added using a right-click menu, but it is not limited to column names, but can also add expressions and conditions and so on.
Since 1 and 2 are mainly usability shortcuts and probably won’t work well for complicated queries, I’ll start with number 2 and later take care of the othe two. Next step: I want to do 2 things in parallel:
- Design my own ideas by thinking what exactly such a widget should provide (list of fields, conditions, sorting order and so on)
- Examine existing designs, both by bringing screenshots and by describing the user experience in words
Where to take examples? I’m opening a list here:
- Bugzilla
- Other bug/issue trackers
- GNOME Desktop Search
- KDE’s desktop search
- LibreOffice Base visual query creator
- The same for the Calligra counterpart
- The same for Glom
- Evolution mail filter editor
- LibreOffice Calc solver/scenarios dialog
Let’s start taking screenshots…
- GNOME Bugzilla
- Find specific bug: https://bugzilla.gnome.org/query.cgi?format=specific
- Advanced search: https://bugzilla.gnome.org/query.cgi