Improving SFOS apps design and helping with design

Design
#1

In the times of not even Jolla following jolla standards i want to provide help with designing apps to beginners and veterans. Many apps on sfos look terrible and i’ll be redesigning them. I’m not an expert but no one ever complained about looks of my apps.

So getting to the point, if you are beginner or veteran, you don’t know how your app should look/work like, or you have question about design of some component of your app, or you want me to review design of your app feel free to ask here. Also if you know some apps that need redesigning you can post suggestions here. Hopefully this help-thread won’t violate rules. I’m here to provide help to make sfos apps ecosystem better place.

And you might ask (well this entire category is about what you wrote above) well i don’t think anybody would think about designing app or stuff i wrote above so it’s a suggestion and offer of a help :slight_smile:

21 Likes
#2

You can take a look at s1p from OpenRepos if you like.

2 Likes
#3

Sure

Issues:

  1. Log list doesn’t have VerticalScrollDecorator (https://github.com/Michal-Szczepaniak/Morsender/blob/master/Morsender/qml/pages/Chat.qml#L333)
  2. Green and red phone buttons are barely visible and when highlighted they should have square background highlight instead of changing color
  3. In pulldown menu, Settings don’t need “General Settings” label cause you can aswell call them General settings instead of settings
  4. Log viewer could use PageHeader
6 Likes
#4

I’ll be greedy… I’d like to ask for a quick review of two apps.

  • S’Play

    • Because I think i did a pretty good job over all
    • …and with the landscape adaptation of the first and player page in particular
    • But i probably overlooked something.

  • SeaPrint

    • Because i know it needs some more sense of direction, since it is a work in progress.
3 Likes
#5

Ya’ll can be greedy as long as sfos stonks.

S’Play

  1. Live channels label should be much bigger. Not as in font but as in spacing. Look for example at jolla store, it has buttons like you but apps are below them, so i think you should do same with live channels (also Senast publicerade program same thing). Or move entire thing to separate page
  2. Make those first page “buttons” properly aka move label to the right, storeman and jollastore has label to the right
  3. Make player attached page. Will make returning to player page much easier than pulldown menu
  4. U missing about page

SeaPrint

  1. Basically remove the print buttons (file/pictures and entire thingy on the bottom). Instead make share plugin (look here https://github.com/Michal-Szczepaniak/Morsender/tree/master/MorsenderSharePlugin or into depecher) and you could move entire app to settings. Basically transparent sfos improvement.
  2. first page needs PageHeader
  3. Settings are missing Label in PageHeader
  4. Settings do not work in landcape mode (they rotate screen, bad dev :<)
  5. Add url look above
2 Likes
#6

THX, 1,3,4 are fixed in next release.

3 Likes
#7

Thank you!

I’ll space those out a bit, but Jolla 1 screen real-estate is a bit of a limiting factor.
I think this all needs to be one one page for usability, the app stacks too many pages as it is.

But wouldn’t i lose that when i pop pages on navigating back?
The documentation seems to say so. Are you suggesting i re-attach it everywhere?

I keep thinking i don’t have enough to say on such a page, but noted none the less.

There is a sharing plugin in the works, but until they are allowed in the store, the app needs a separate direct entry-point.

I did think it looks a bit barren… so what should it say? Available printers?

Noted, fixing.

Where? Not sure i understand.

2 Likes
#8

World isn’t about jolla 1 only anymore. Little scroll won’t hurt

no you wouldn’t. Check microtube for example

they’ll never be, ignore jolla store

yeah or app name even

on add url page it switches to portrait mode so it doesn’t work in landscape mode

2 Likes
#9

Fake news. If i navigate back another level, I lose both pages.
Microtube is just two pages deep as far as i can tell.

#10

Same is your app isn’t it? if you attach page to main page then go to second level and go back you should still have attached page

#11

Not really, no. Some are straight from the first page, some go like 4 levels deep depending on how you find the program.
At worst: First page -> Categories -> Programs -> Episodes -> Player

(so attaching something to the first page isn’t always how it starts)

#12

Hmm then you could attach page to front page when page is activated

#13

Hi Michal,

it would be nice if you could review my Watchlist app as well - is available both in the Jolla Store and via openrepos.

https://openrepos.net/content/andywuest/watchlist

Thanks in advance,
Andreas

1 Like
#14

Sure thing!

Hmm first of all, tab layout with only 2 pages seems quite empty… if it would be possible i would get rid of tab layout and make it an attached page. Would work exact same way but cleaner and more sfos-way. Tab layout is something you should only use if you reaaaaaaaaaally need it and in case of 2 pages, i don’t think u need it.

Then, i go to add market data and i see oversized font (return it to normal please) and i click on entry to add it. Nothing happens. I click couple more times. Still nothing happens. Then “oh! maybe i need to hold?” and on hold i can add it. Using onHold instead of onClick is quite bad idea because you are adding unnecessary complexity. make it onclick and it will be way simpler, faster and more user friendly.

About page… using textedit and labels like that… it doesn’t look good man. You can use same section names as you had in add market data to separate sections, or look into piepmatz/any of my app’s about page.

Settings, this NOTE text i would make it in the highlight background color, which is dimmer theme color. Hope you know which one i mean.

Add stock page, This code thingy on the right should be aligned to right (have same space as on the left.

But overall, except for tab layout it’s pretty well done! I haven’t got any bad looking apps here yet/

1 Like
#15

Thanks for the quick feedback. I will fix the stuff you mentioned.

One thing in the SFOS community is really strange - that there are no open source components that are available for usage which are needed by, well, virtually everybody, like the About page. The about page could be easily standardized, so you only pass the app specific values to it and everything else would be handled by the “standard” component. Same applies to the charting component i am using for displaying the charts - stole it from another project and patched to be more flexible - it would make more sense to have such a centralized maintained component that everybody could use…

2 Likes
#16

Well yeah… i’ve been thinking about making microtube/picoplayer’s videoplayer separate component but that’s additional work. And people are already cutting their time spent on working on app by not making it pretty and just throwing stuff together so…
Also tab layout could use making into separate component

1 Like
#17

It would be great if you could do this (if you have the time)! I wanted to include a proper music/video player in File Browser but didn’t have the time so far. Maybe I could use your component :).

That’s sad and true. Though if there were beautiful components available, even hurried apps might become a bit prettier ;).

Maybe this could be useful for someone: sf-docked-tab-bar (cf. my other post)

Actually, I created such a component: https://github.com/ichthyosaurus/sf-about-page Feel free to use it, it’s GPL.

I did the same for my weather app but didn’t create a separate component; I should do that… It would be very nice if you could make yours stand-alone and available for others.

I could create an organization on Github for collecting repos with beautiful components from the community. What do you think? (Would it help anyone?)

3 Likes
#18

@Mister_Magister Would you kindly have a look at any of my apps on OpenRepos? (Pick one you like…) I’d be happy about some feedback! :slight_smile:

#19

It would be great if you could do this (if you have the time)! I wanted to include a proper music/video player in File Browser but didn’t have the time so far. Maybe I could use your component :).

Why? Why would you do that? Read what you wrote “file browser”. What is it’s purpose? Playing videos and music? Then it would be called media player not file browser. File browser’s function is to browse files. Like my nanofiles. If you want to view photo or video, launch photo/video viewer app. I hate that in sfos apps that file browser suddenly cooks pancakes, like what is that?! Keep single purpose of the app, if it s file browser then let it browse files amen. Let video player handle video playing. Just like on desktop.

there are and it’s called silica. You can literally copy paste default configuration and have pretty app. But yet somehow people decide to make ugly apps on purpose. I don’t get it

The one i have in picoplayer is pretty neat and simple to use

Not only components but code/pages examples. I would add my examples there too and combined with this thread and my blog (i would put any sources used in blog there too) it could be another step in pretty apps evangelisation

2 Likes
#20

First Jammy

hecc it’s nicest app yet but there isn’t much in it either. When u click genres etc thingy on main page, secondary page with same thing opens anyway so i would just add entry pick music or something like that and straight up use the second page only cause that thing on first page is not sfosy at all and it’s counter intuitive. Second: For god’s sake please remove background from icons it looks disgusting.

Onto the todolist. you attacked page on left and right and it was almost first thing i’ve asked how to do when first trying to create app and everyone told me not to do it. So i’ll repeat, dont do it. It’s super counter intuitive. Use tab layout instead if you must or just move left/right pages to pulldown menu (there is enough space for that). Rest is acceptable (hard to think today)

Onto MeteoSwiss. Could you make graphs bit taller? numbers go onto eachother so it looks ugly. Other than that pretty damn good job sir.

Onto dictionary. I know what you were trying to do but i would go back to page header and put dictionary switcher to pulldown menu.

In general damn good work sir almost no issues

1 Like