Overhauling UI to a more modern, user friendly interface

[Atif-Anwer]

Having used qiqqa since almost the first release, the interface is quite clunky and quite a bit dated. In the day of modern interfaces, most software look quite boring and uninviting. Qiqqa is absolutely critical for me, and I use it on a daily basis since it is my Go-To reference management software so the interface issues and datedness are something that i feel on a daily basis. (Plus it makes it quite less inviting when introducing to new users).
I wanted to suggest if we can overhaul the UI to something more modern. I want to make and submit/propose a modern and user friendly design (png's at first) which if agreed upon can be implemented easily in the current workflow (or even as a forked Overhauled UI release). I have a little experience in C# also; so i can convert the design from png's to a usable user interface if required; so that it looks neat, modern and inviting instead of the current (rather dated) look (without sacrificing the usability ofc).
Will you be interested in a complete UI overhaul , or atleast willing to see some updated UI/UX samples?

[GerHobbelt]

Will you be interested in a complete UI overhaul , or at least willing to see some updated UI/UX samples?

Absolutely. 👍

A working UI demo in C# has a very significant added value as I have to divide my time between various priorities and if you've looked closely at the commit tree you'll have seen I've been fighting with the Design View/XAML environment several times already, so any assistance in getting Qiqqa towards a more usable and modern UX is appreciated.

[GerHobbelt]

For more thoughts on the matter (which need to be structured still), see also https://github.com/jimmejardine/qiqqa-open-source/blob/master/DEVELOPER-GOALS.md

[Atif-Anwer]

Thanks @GerHobbelt for your extensive reply! 👍
Ive gone through the Developer-Goals and for sure you have a 'very' big library that i cant even begin to fathom! My libraries are a meager 750-1k pdf or so; which i shuffle around (export unused libs) mostly to keep within the 2gb limits of the online sync functionalty. But now that its all offline, I guess ill start to merge back my libs.

I got to know about qiqqa going opensource just two days back since there wasnt any update from v79 for quite some time. Overall i was quite happy with qiqqa as an end-user, apart from a few bugs and crashes here and there. But mostly, i really have issues with the text highlight feature which jumbles up the text and equations into weird textboxes of sorts. Highlighting and the annotation report are quite important for me, so i guess it was my one major greviance overall. That and the dated UI which, although quite functional, is a bit boring and really needs an overhaul. I tried looking for development activity but I havent seen any major updates or dedicated forum where to ask or suggest things (with active developers particitpating i.e) But going opensource is a great decision and i hope there is a great future ahead for qiqqa!

In time Ive tried Mendley and Zoetero, but as you mentioned, something is just not right for some users like us 🤷‍♂. The one feature i really like from Mendley though (and maybe can be added as a future feature task) is the auto renaming/arranging of the PDF library. It wold be nice to restructure the Qiqqa database with nicely named PDF's (instead of only when exporting them) and help with my organizational ocd :D #Wishlist

Design Overhaul ...

Wrt the design overhaul; I would suggest that for starters, ill design a UI (Illustrator/Adobe XD mainly) that I think is modern and enhances the core functionality of Qiqqa. To me the design targets are mainly that it should be minimalistic and easy on the eyes (modern MaterialUI/MetroUI style design), with more white space for the pdf reading and less clunky buttons. The features should be nicely visible but out of the way and give more realestate to the reading and searching part.

Once I have designed the layout, I can convert it into XAML, which i have a little expereince with. Like you, i'd rather prefer looking visually rather than xml code :D .. As you suggested, ill fork out your fork build when I get to the XAML design stage for easier merging lateron. As for the embedded browser and PDF renderer, the design part will be my focus to incorporate/enahnce the current qiqqa feature set ; but I dont have any development experience with chromium or pdf renderers etc so I can only help as far as the UI and UX go.

[Atif-Anwer]

Hi @GerHobbelt ! Sorry for very late update but work and IRL got the better of me. I have been working on a UI/UX design all this time in parts, and would like to share a work in progress so you can see if this would be a favourable way to go ahead.

I have designed a modern Windows UI based design which you can see below. its still a work in progress and I would like your and @jimmejardine 's comments if possible. I am designing in AdobeXD right now:

Interactive XD Version: (You can comment any tips or suggestions by placing a Pin on point or interest)

The design Concept
The Main Interface
Collapsible sidebar
Library View
Previewing PDF's

The entire set of images

Edit: Fixed link formats

[Atif-Anwer]

Small bump to @GerHobbelt @jimmejardine @jimme-jamatto .. if anyone's seen the design update posted above 😇

[GerHobbelt]

😨 Been away on long hiatus, sorry.

Expect (very) slow response from me until June 2020 as I need a lot of time to fix RL. My Qiqqa activity will be haphazard and happens mostly off net (yay 🎉 for git and a laptop: no need to be connected to fiddle with a project when you're tired of everything else... 😄)

[Atif-Anwer]

No issues. Just give the design a look if possible at your convenience and let me know if its ok. Then I will see if i can start porting it in C#

[raindropsfromsky]

Hi @Atif-Anwer,

As a professional UX expert (QA), I would like to have a look and give you feedback.
I checked out your GUI links, but none of them are working(?) Please check!

[Atif-Anwer]

Hi @Atif-Anwer,

As a professional UX expert (QA), I would like to have a look and give you feedback.
I checked out your GUI links, but none of them are working(?) Please check!

Thankyou @raindropsfromsky That would be great! Im not a pro; just a hobbyist so you might find more mistakes for a professionally designed layout.
I just checked the links; they are all working however the comment system isnt working when you click on them directly (redirects to github for some reason). If you copy paste them; they all work fine!

Edit: Fixed all the links. Was a formatting error at my end.

[raindropsfromsky]

Thanks, @Atif-Anwer!

I had a quick look. The images do have a modern look, but implementation-wise, they may require a totally different library. Otherwise, it will end up looking totally different.

Secondly, we should be working on the Information Architecture first; rather than Wireframe for individual screens. That way, we can refactor a lot of "noodle logic" feeling. (Hopefully, @GerHobbelt will make a debug version to deal with the noddle logic under the hood)

This topic is involving in a wider discussion. Can we take it to a separate area? If we have to share WIP artifacts, then it may be better to use a better medium (e.g. a shared folder on Google Drive, which also has a shared Google Doc for collaborative article)