This forum has been archived. All content is frozen. Please use KDE Discuss instead.

[Design help needed] UI for a small, in development program

Tags: None
(comma "," separated)
User avatar
einar
Administrator
Posts
3402
Karma
7
OS
Hello design gurus,

I'm currently writing a travel planner application (Qt5/KF5 based) and while early in development, currently I cannot envision a UI that doesn't suck. ;)

The application is still in development, but what should offer is:

  • A list of "activities" (lodging, transportation, attractions...) sorted per date
  • A way to input activities
  • A way to display activities, including (optionally) a link to openstreetmap for viewing

I've got most of the code part done, but I can't seem to imagine an UI that does not suck. In particular I'm struggling to think how activities should be presented to the user.

Currently (bear in mind that it is not finished yet) it looks like this:

Image

When an item is populated (icon is provisional):

Image

Or with a map out

Image

Yes, it looks quite ugly. Aside the (many) deficiencies of code, I can't think of a way to present the tasks: Would a lateral list suffice? Would it not? Also how to envision the task detail window? How to display the map? Another dock? Inline?

The task detail window is done via QML, so that's probably the most flexible to change first.

For the brave, the code can be cloned (you will require recent Qt5 and KF5, though) at

https://git.dennogumi.org/kde/holiday-planner.git

But what I'm interested mostly is in how to present things, so more on the visual aspect than the code (but code contributions would be welcome ;).

(Notice: I realize that the upcoming Plasma Next is far more important than this no-name app, so I apologize if this is a distraction).


"Violence is the last refuge of the incompetent."
Image
Plasma FAQ maintainer - Plasma programming with Python
User avatar
Heiko Tietze
Registered Member
Posts
593
Karma
0
OS
IMHO it's not that worse as a first idea. But it depends on the use case whether or not your solution fits the requirements. For instance you run into trouble with this design when the list of activities becomes lengthy, lets say >100 items. And you show a list of activities rather that managing it because users have to click 'add task' and will get another dialog. That's not convenient if you want to enter a lot of activities but makes sense if listing is more important. All depends on what user want to achieve with the tool. (PS: The first picture shows probably how you suppose the input could works. But 'Add task' at the toolbar usually opens a modal dialog because the toolbar is not used to switch between views. That's the reason why I was assuming it works via extra dialog.)
About street maps: Sometimes maps are shown with +/- buttons for zoom and arrows to navigate. I believe that's a no-go today. Zoom by mouse wheel and 'move' the map with left button down.
Two other thoughts: your alignment [1] is okay, but have a look for proper spacing. Some pixels between label and control improves readability. Secondly, please consider to group items that belong together. For instance, the details in the first screenshot would be moved a little bit downward and generate a horizontal line between 'Tasks' and the group header 'Details'.

[1] http://techbase.kde.org/Projects/Usabil ... /Alignment
User avatar
einar
Administrator
Posts
3402
Karma
7
OS
Thanks for the suggestions!

The maps are shown like this because it's opening a mobile view of OpenStreetMap, as there is no stable Qt5 version of Marble I could use (it'd make things much simpler). Regarding UI, I originally took inspiration from the (proprietary) web service Tripit (here's an image I found somewhere with a Google search):

Image

I'm mostly wondering, aside your suggestions, whether the map should stay hidden and displayed on click, or in plain sight.


"Violence is the last refuge of the incompetent."
Image
Plasma FAQ maintainer - Plasma programming with Python
User avatar
Heiko Tietze
Registered Member
Posts
593
Karma
0
OS
einar wrote:I'm mostly wondering, aside your suggestions, whether the map should stay hidden and displayed on click, or in plain sight.

It depends ;-).
Good usability starts with a description of the vision (what do you want to achieve with your program), the target user and scenario (who will use the tool, in which situation, and how is it operated), as well as destinata (users' goal) and animata (soft criteria for users). You may want to read the respective advices at the HIG (http://techbase.kde.org/Projects/Usabil ... tual_Model).
If I plan a bicycle tour from Tromsø to Kapstadt I'd like to always see a map. People seldom have a good impression of numbers like distance, coordinates, altitude etc. Therefore a visualization makes sense. On the other hand, when I plan a saleswoman's trip I do not care about the location. The task is just to follow the route step by step to have the shortest or fastest trip.
If you are unsure about your goals, users needs, and how it should be realized best we could run a survey...
User avatar
colomar
Registered Member
Posts
947
Karma
2
OS
Heiko Tietze wrote:If you are unsure about your goals, users needs, and how it should be realized best we could run a survey...


More in-depth interviews with a few people would be important as well.
User avatar
einar
Administrator
Posts
3402
Karma
7
OS
I understand that, I'm just wondering if it makes sense for something I started writing to plan my next holidays and then thought could be useful for everyone. ;)


"Violence is the last refuge of the incompetent."
Image
Plasma FAQ maintainer - Plasma programming with Python
User avatar
colomar
Registered Member
Posts
947
Karma
2
OS
einar wrote:I understand that, I'm just wondering if it makes sense for something I started writing to plan my next holidays and then thought could be useful for everyone. ;)


How about first trying to find that out? Ask some people (without showing them anything) whether they would find an application for trip planning (with the features you have in mind for it) useful and if so, for which specific tasks and contexts.

The fact that the way how your application came to be is quite typical for Free software is both a blessing and a curse: The good side is that it people are motivated to work in their spare time for without compensation on applications they personally want to use, the downside is that they may only work well for their specific scenario and preferences.
Your application is still young, so you still have the chance to make it useful for other people than yourself by asking them what they need.


Bookmarks



Who is online

Registered users: bartoloni, Bing [Bot], Google [Bot], Sogou [Bot]