AppPage discussion #523
Replies: 20 comments 49 replies
-
|
I'm not sure. Doesn't it look a bit crowded? Are you doing this to optimize space? I think my idea was to move them up, into the same "container" but that's not any better. I was thinking this "line" could have more info (rating, size in mb,... ) which would also be an issue. |
Beta Was this translation helpful? Give feedback.
-
|
Yeah looks kinda crowded! This does not but I am confused about the alignment
This is were the current layout is good, with the border container around the app infos, the alignment is not so important |
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
|
return of the installdate? :) |
Beta Was this translation helpful? Give feedback.
-
|
What info is crucial to have up front? Just the version? The confinement? I wonder if we could add this as a one-liner above the buttons and then have all the other info (which isn't much atm) below the description in its own container. WDYT? |
Beta Was this translation helpful? Give feedback.
-
|
how would the version be displayed? different idea... back to two conainers but with 4 infos? |
Beta Was this translation helpful? Give feedback.
-
|
EDIT:
Like this
And below the description there would be a container with the details: 🍏 🪟 |
Beta Was this translation helpful? Give feedback.
-
|
hmmm isn't this again super crowded in the middle?
|
Beta Was this translation helpful? Give feedback.
-
|
made a PR, just to iterate, we can change it later |
Beta Was this translation helpful? Give feedback.
-
Nice
I don't think it's super crowed. What do you think about the idea of having a "Additional information" container at the bottom? Yes, your rating above with 0-5 stars looks much better 👍 |
Beta Was this translation helpful? Give feedback.
-
|
addidiotnal information is good! will try |
Beta Was this translation helpful? Give feedback.
-
|
will be hard to fill the grid, but some things could be added what snapd gives us, like size, website. but website is already in the header 🤔 |
Beta Was this translation helpful? Give feedback.
-
|
Depends on what info we can get from snapd, but something to choose from: publisher, size, version, rating, category, license, last updated, install date, links, report an issue, ...
if it isn't directly below the top container, I think it's okay to repeat that. |
Beta Was this translation helpful? Give feedback.
-
|
ok i add what we agreed on in the PR (stars + 4 infos if available) and iterate over the "additional information" section in another PR |
Beta Was this translation helpful? Give feedback.
-
|
Maybe I am not fully aware of the context, but I don't think we need the title Additional information. Everything here is information about that specific app, I think it's not necessary to explain that again. |
Beta Was this translation helpful? Give feedback.
-
|
Sorry, I just had another look into this, and if we collapse/expand this section, it should have then a title, so ignore my previous comment |
Beta Was this translation helpful? Give feedback.
-
|
Hey @Feichtmeier and @madsrh Could you please provide me a bit of context on why the app landing page has those borders for each section? IMO looks a bit boxy, but maybe there's a reason why. It might work as well without the borders on each section, helping the layout 'breath' a little more. Just a thought, though. :) |
Beta Was this translation helpful? Give feedback.
-
|
Those elements and their position adapt to the screen width Also all elements currently have this look, also in the search etc IMO if we want to change this, the style of all elements in the app need to change |
Beta Was this translation helpful? Give feedback.
-
|
It is a little boxy, but as Frederik said, it's less visible in the light theme. Please do a mockup if you have an idea for a different styling. Perhaps @Zoospora has some ideas 😄 |
Beta Was this translation helpful? Give feedback.
-
|
I have been working on some wireframes for the app page. As @Feichtmeier explained to me, the content of these pages can change from snap to deb. So, taking that into consideration, I propose having all that info below the type of package 'selector' – meaning that basically all info that changes when the user selects deb or snap is below those buttons/selector. I have two proposals, see below. Keep in mind these are just wireframes, we will need the Visual magic from @madsrh and @Zoospora :) (you can also see it here and here)
|
Beta Was this translation helpful? Give feedback.
-
|
Obviously I will need to include the rest of the content, but this is just to discuss that main section, where we switch from one package to another |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for your wire-frames @anasereijo ! Great ideas One thing is hard to value. the sizes of the elements you use are much smaller than in the real app. That makes you place much more elements in one row One last space to use is the title itself, which could be a border-less dropdown |
Beta Was this translation helpful? Give feedback.
-
|
Not-installed snap: Installing a snap: Installed snap: Installed but with an update or after you switched the channel: Big window: Small window: |
Beta Was this translation helpful? Give feedback.
-
|
@Feichtmeier see below some mock-ups I came up with quickly :) this obviously to be polished in terms of visual design, but you get the idea :D App that offers snap and deb packages:Not-installed:
Installed snap:
Installed but with an update or after you switched the channel:
Deb package selected:
I can also mock up the use cases where only offer one type of package, but that's also in the wireframes. I am yet to do the big and small screens, but should be quite straight forward. We might not even need the label 'available as' for the snap/deb switch or even the 'snap channel' one, but I added to make sure it is clear (we can iterate on that). Keep in mind that the information banner doesn't need to look like this! Open to suggestions. Maybe we can make it expand/collapse as suggested before, what do you guys think? |
Beta Was this translation helpful? Give feedback.
-
That also a publisher/maintainer for debian packages (not available atm ofc), but shouldn't we keep that in the top? Some might have long names like Krita below 👇 I do find the mockup above to have too much information. I think Apple does a nice job of minimizing the space (see here) and the Windows store has less information at the top, but then supply it with the "additional information" box further down the pages (like this).
|
Beta Was this translation helpful? Give feedback.
-
|
Hey @madsrh, thanks for sharing that use case. It is indeed a long name :) I think it's okay to move it up, just below the app-name. Regarding the information banner, I agree with you – it is a bit busy but, as I said above, I am open to suggestions and visual input. I quite like Microsoft's approach, having the 'important' info at the top and then down the page having more info. However, if we want to keep it all within the same banner, maybe we can expand-collapse it. What do you think? |
Beta Was this translation helpful? Give feedback.
-
|
(sorry for the delay. I am not getting email notifications - will check what's happening) |
Beta Was this translation helpful? Give feedback.
-
|
Alternatively we could show a popup if we also found the opposite app format
|
Beta Was this translation helpful? Give feedback.
-
|
I think that the pop-up gives too much emphasis to the package type. |
Beta Was this translation helpful? Give feedback.
-
|
@Feichtmeier thanks for the screenshots, I will look into that and will try to mock up something, but I still believe we can fit everything as per the wireframes. One question I have is about the heading sizes, the app name is quite big. Is that our default h1 ? |
Beta Was this translation helpful? Give feedback.
-
|
Maybe the headings question is also for @madsrh |
Beta Was this translation helpful? Give feedback.
-
|
SORRY for the late reply @Feichtmeier will know how this is implemented |
Beta Was this translation helpful? Give feedback.
-
|
@anasereijo I think this is the 2. biggest headline yes :) We can reduce the size if you prefer |
Beta Was this translation helpful? Give feedback.
-
|
@Feichtmeier nice to know! I think it will be a good idea to relook at all font sizes and heading hierarchy when we have all screens in a more ready status. I will take a note of that. Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
when one compares the heaviness of the light theme window in to the dark theme window I think you are right, we need to lighten up the borders and reduce the color difference between the containers and the background canvas
here it is less bright |
Beta Was this translation helpful? Give feedback.
-
|
@Feichtmeier that is soooo much better, I think! Actually makes it look less "boxy". Thanks for making that change |
Beta Was this translation helpful? Give feedback.
-
|
@Feichtmeier just wanted to double-check that we will 'merge' snap and deb landing pages for the same app, correct? I was just exploring the store and I still see the pop up asking which package I want to see.
|
Beta Was this translation helpful? Give feedback.
-
Yes we can do. Currently I'm doing a merge of the package installer and the app, after this I will try to implement our ideas. 👌 |
Beta Was this translation helpful? Give feedback.
-
|
yayyy! can't wait to see how it will look like. thanks a lot |
Beta Was this translation helpful? Give feedback.
-
|
@Feichtmeier @madsrh I would like to know what do you think it's more useful to see at the top. As mentioned on previous comments, this section feels a bit too crowded (ignore the publisher name as it will moved below the app name as mentioned here). Therefore, I would like to select the “most important” ones to display them here first, and then we can do either 2 things: have another section at the bottom of the page with more info (as per Microsoft's store); or show 3/4 and have everything else collapsed. other question is if there is more info we can display? I could only find/think of these 7 things.
|
Beta Was this translation helpful? Give feedback.
-
|
Good idea. Those Infos should be all ! I give it a try |
Beta Was this translation helpful? Give feedback.
-
|
@anasereijo Sorry for the slow reply. I still don't get notifications here 😢
Must have: Review and version. And then maybe one of these Size or Published date 🤷♂️
+1, I like this idea, but maybe it's just me that can't imagine how the collapsed idea would look 😀 |
Beta Was this translation helpful? Give feedback.
-
Gallery WireframeBasically what we currently have, but I added a title to keep consistency with the other sections below and to improve usability. |
Beta Was this translation helpful? Give feedback.
-
DescriptionI think we already do this. Quite simple but just adding here for context.
|
Beta Was this translation helpful? Give feedback.
-
Reviews and ratingsPlease keep in mind that these are wireframes, focused mainly on functionality. It will be using yaru theme and some things will need visual design input. app not installed
app installed
app installed - star rating
useful / not useful feedback
report abuse
app installed - write a review
app installed - write a review - submitted
see all reviews
|
Beta Was this translation helpful? Give feedback.
-
|
@Feichtmeier @madsrh in case you didn't get a notification :) |
Beta Was this translation helpful? Give feedback.
-
|
oh, last weak I missed this one. I move those lovely wireframes to a new discussion |
Beta Was this translation helpful? Give feedback.
-
|
https://github.com/ubuntu-flutter-community/software/issues/751 |
Beta Was this translation helpful? Give feedback.
-
Permissions / ConnectionsI will be focusing on this next, but already opening a comment, so we can discuss in the meantime. Current store:
Testing store:
The user only sees this information/settings after the app is installed. In the old store, the user has to click on a 'settings' button and in the new store (testing), we display this section at the bottom of the app-page. I quite like the new approach, having a dedicated section rather than a popup, but I think it would be much more useful for the user for this info to be closer to the top, before the screenshots. I believe that, after installing an app, the user will come back to this page either to check for updates, install a different channel, or to access the connections/permissions and not necessarily to go through description, gallery, reviews again. What do you think @madsrh @Feichtmeier ? |
Beta Was this translation helpful? Give feedback.
-
|
I would also like to know why it's called 'connections' now? any particular reason? Thank you! |
Beta Was this translation helpful? Give feedback.
-
|
It would also be nice to have better description/names to the items, as per the old store. I believe these are all the options we can display - please correct me if I am wrong. We can even include a description as per that page. Just a thought - I will try to wireframe something monday |
Beta Was this translation helpful? Give feedback.
-
|
@anasereijo did you see my issue regarding "connections" here: https://github.com/ubuntu-flutter-community/software/issues/616 In short: The screenshot above is a mess and we should group settings.
Good point 👍 |
Beta Was this translation helpful? Give feedback.
-
|
Rather than moving gallery and description to the bottom, we could just simply have the two sections collapsed if the app is installed 🔽 |
Beta Was this translation helpful? Give feedback.
-
That's a good idea!! |
Beta Was this translation helpful? Give feedback.
-
Additional informationwe need to figure out what extra info we will show here, and what goes to the top of the page |
Beta Was this translation helpful? Give feedback.
-
|
this is being tracked here |
Beta Was this translation helpful? Give feedback.
This comment has been hidden.
This comment has been hidden.
-
|
Lol |
Beta Was this translation helpful? Give feedback.
-
|
cool I unlocked it, maybe this was the reason |
Beta Was this translation helpful? Give feedback.
-
|
@anasereijo @madsrh I can work on the "info section" after we are done with the deb/snap dilemma ok? 😸 🌞 |
Beta Was this translation helpful? Give feedback.
-
|
Of course. :) have a nice weekend |
Beta Was this translation helpful? Give feedback.
-
|
our yesterday session live design/live coding outcome is now in the snap :) nice session btw! WDYT about merging the snap "emblem" and the snap channel dropdown?
|
Beta Was this translation helpful? Give feedback.
-
|
Ok. I might have had the idea because it looks like a button. |
Beta Was this translation helpful? Give feedback.
-
|
Ahhh, now I think I understand! We kept the active part of the toggle and removed the other half, so now we're left with something that looks like a button, but you can't press it. Is that what you mean? |
Beta Was this translation helpful? Give feedback.
-
|
I think this is something @Zoospora can also have a look and maybe propose something. |
Beta Was this translation helpful? Give feedback.
-
|
Hey! Of course! I'm working on the different elements, both the icon and this. As soon as the proposals are closed we'll post them here. |
Beta Was this translation helpful? Give feedback.
-
|
I created a Discussion to follow up on this |
Beta Was this translation helpful? Give feedback.
-
@madsrh
Thinking of one of your previous ideas, do you think this
is better than this
?
Beta Was this translation helpful? Give feedback.
All reactions