[Mockup] Better home screen! #689
Comments
|
I really like that! Only thing I'm not sure about is the card style.
Do you have a suggestion how to fit it in a regular list? |
|
Hey @PaulWoitaschek, and happy new year :) Yes, you're right. I actually was thinking about making that card swipe-able to easily archive/delete the album, but thought it was a bit too much. Anyways, here's the new one, it's almost the same with little changes here and there:
|
|
Do you have a designer tool where I can see the dimensions / fonts etc? @0rAX0 |
|
Would Figma do? I made it in Sketch but the import seems solid enough: |
|
Thanks! What bothers me is the dummy cover, it does not really fit in general.
|
|
Awesome! It's coming along very nicely! \o/ I certainly can suggest a few concepts, but first:
|
|
BTW, not sure if you've noticed/it's possible, but the FAB's background is actually linked to the color of the playing album. :) |
|
It does not have to contain letters. There is no limit. |
|
Hi. Sorry to butt in like this but I wanted to make a case for cards. I really hope you don't mind. I've recently begun using the app, and I've used several others like it before. But this is the audio book player I've settled on for now. I'm a pretty big consumer of both audio books and podcasts so I really care about this. :) So. "A card is a sheet of material that serves as an entry point to more detailed information" [1]. List tiles make sense for things like songs and chapters that are part of another object. But audio books are not songs, even if they are audio. It seems to me like many authors of audio book players think they are. And there is the fact that list tiles shouldn't use overflow controls [2]. If you want to nitpick. The section Usage [3] doesn't say to only use cards during those scenarios. It says use during these, so there can be other scenarios which require cards. And when I read those I actually don't think they themselves invalidate the use of cards here. They just make more sense to me in this case. :) On a different note. The idea of swiping audio books that @0rAX0 was considering appeals a lot to me. When I add a library from a folder I would love to quickly send the ones I've listened to to the Completed section. I would also rename Not started yet to something more along the lines of To read so completed books can be swiped in order to be queued under that section. The behavior is a bit weird since swiping makes you think they go away. But if it is consistent maybe that is enough. Or you guys find a better way of handling this use case, if you are interested in it. Lastly. Thanks guys for a great app! It has all you need and it works well, but I'm glad to see that it is evolving into something even better. Regards, |
|
Thanks for the great input! I do agree with you and, like I said, I had a concept in mind that works best using cards. But the main problem I wanted to address here, and with it gone, Voice would be 10 times better, is the absence of categorization of audiobooks. And kudos for the "reading queue" idea, I would love to see it as well. We could use the 3-dots menu and "add it to reading list" and leave swiping to 'delete' and 'archive'. I also wanted the cards to expand revealing more information about the albums, but this is probably way outside the scope of this report :) |
|
@0rAX0 I look forward to the more airy design and more usable layout, provided by the categorization. |
|
I tried a few things and I must say: The dynamic colors do not fit into the current concept. The playing screen is really tied to the fact that it's blue and pink. So a redesign of the playing screen is an option here. Also I don't like the current cover placeholder. For me most of the books don't have a cover and all that blue just looks strange. |
|
@PaulWoitaschek hey, sorry for the late reply, crazy busy right now. Yes, I noticed that the blue and pink are not going to work with all the colors, but is having the blue that important? I think we could try a look without the blue (not sure how Shuttle works), of course if you still want to keep the dynamic colors idea. Let me know if you want me to try something before you jump to the code. As for the covers, I agree. I tried to make a few concepts on paper and currently only have one that's drawn in Figma (same link) please tell me what you think. It's supposed to change the colors, as well as the letters and have the same wave from the logo as a background. |
|
Not a fan of the three dots on each element/item in the list. I'm not a designer so just my two cents but I think a swipe over to reveal more options, press and hold, or pretty much anything other than that would be better. Love the app! Looking to try and carve out some time to maybe contribute towards fixing/implementing some of the issues as PRs. Keep up the great work! |
|
Another idea would be to have the option to sort on Last Played and Date Added. I'd be willing to take a stab at this but I'm new to Kotlin and Android and getting a little lost in the code. I think a RecyclerView is being used to list the audio books but there seem to be some design patterns involved too. I see a BookRepository and BookShelfAdapter. Might be somewhere in there. If OP has some insight ping me. |
|
Really busy right now too. No, we don't need to stick to the blue, feel free to experiment. Also sth else we need to take into account is the dark theme:
|
|
Hey @PaulWoitaschek, how is it going? I have picked this up again (sorry for the down time) and I want to ask you about your opinion of Google's approach to light/dark themes in their apps' redesigns (See Android Messages), it's easier to change the colors and the dark theme seem straightforward as well. |
|
I really like how clean light / dark theme is. Feel free to suggest more changes! I just integrated a bottom app bar, changed the fonts and moved the headers to the right. |
|
@PaulWoitaschek Okay, we're both on the same page regarding the new look. 👍 |
|
Well from a UX perspective it's really great because it's way closer to your thumb than the top appbar.
As I interpret the guidelines, it's really made for actions. |
|
Oh, I stand corrected. I didn't see that part before or maybe I forgot about it because it looked weird to mee haha. But anyways, I still think that a bottom action bar in Voice is unnecessary. |
|
Here are the first peek as promised @PaulWoitaschek I removed a lot of noise from the old design and made the interface way simpler. I removed the three-dots menu and went for a card, it's easier to tap the whole card and do something then it is to hit the menu, especially while driving plus it looks cleaner. Let me know what you think, and please help with the content/buttons... etc. I also attached the same design with a different album to showcase the flexibility of the interface (you can be as flexible as you want on a white canvas I guess :P) I'm working on the dark theme as well as an idea. Edit: Oh, and is there a service to pull the album details automagically? I think it would be cool to have Voice fill the details without having to edit every audiobook manually.
|
|
I like the design @0rAX0, Using the Pareto principle, most of the time when you tap on an Audiobook, you want to play it. Getting the Edit/Play intermediary screen will be the wrong screen most of the time. One Tap gets us to the player. |
|
Thanks @rinormaloku, You are right. I was thinking about making it play when you tap on the album art, but I'm not sure. I think the card is better than the three-dots but I need some input and tinkering to make it right. |
|
Actually, scratch that. I like this:
|
|
So here is a first version; without the new cover view and without the dynamic colors. |
|
Fails at installation I can never pass the package installer. Goes from the message installing to failed installation. |
|
Remove the previous installation, the signature is the one from the CI |
|
So let's focus on cutting a release and making further changes after that. Let's gather feedback; what do we need to change? You can always get the latest artifact by modifying the link like this: https://circleci.com/gh/PaulWoitaschek/Voice/307#artifacts So for build 308 it's 308#artifacts |
|
@PaulWoitaschek I think there is something buggy, I have a large folder with audiobooks and at one it is failing to represent the image and crashes (interestingly doesn't crash on load, but when I scroll down). Am debugging to find out the problem. |
|
We are getting very close to the release now. @0rAX0 and who ever wants to test: |
|
@PaulWoitaschek Please use the one on my profile. :) |
|
@PaulWoitaschek my email: rinormaloku37@gmail.com |
|
Invitations sent. Please open https://play.google.com/apps/testing/de.ph1b.audiobook |
|
@PaulWoitaschek Great progress! |
|
Dark theme:
|
|
@PaulWoitaschek @0rAX0 I think the current upstream has some great improvements over the last version on gplay and fdroid, the tileview really looks good :D Here are some additional ideas i had: Sorry for the really bad mock-ups, I didn't spent much time creating them ;) You could add a navigation drawer to further reduce the button-count. This could clean up some unnecessary elements like the audiobook-folder from the main ui. (they are not unnecessary, but i think 99% of the user do not add them that often, so if it moves to the drawer, it would be fine)
Also i think the current tiles are missing some contrast against the background, in the dayview they are the same color as the background, which looks pale The Playview looks a little bit generic at the moment, maybe some crazy designs could freshen it up:
The toolbar could be removed, and the buttons could be autohidden, or hidden in a bar that you can pull out (or just display them there all the time) The title which was formerly in the toolbar would move below the cover, which is now smaller than the screen, and has a blurred version of itself in the background(maybe a black border would make it better, idk) The white back button in my mockup could be replaced with an burger menu for the navdrawer, which would allow quick access to everything in the app This would give this app a real distinct look and make it easily recognizable I would be willing to implement some of it, but i dont know how long i'll need since im not exactly fluent in kotlin, but nonetheless i'd try, just say what you liked ;) |
|
Thanks. I split the remaining tasks into two. Please open new tickets for further changes (even minor ones) @0rAX0 |
|
@0rAX0
|
|
I still haven't used the new design on keep, but based on the pictures you
attached it's a little too much, especially on the dark version, it looks
like someone has activated an accesibility high contrast mode.
Is there a problem wih the version without borders?
On Thu, Oct 25, 2018, 22:58 Paul Woitaschek ***@***.***> wrote:
@0rAX0 <https://github.com/0rAX0>
How do you feel about setting a stroke color like in the new Google Keep
design?
[image: image]
<https://user-images.githubusercontent.com/743462/47532832-c0c8db80-d8b1-11e8-8907-278d63aa270b.png>
[image: image]
<https://user-images.githubusercontent.com/743462/47532854-cb837080-d8b1-11e8-9ed2-b11fa77696d5.png>
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#689 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AA_vkoRJCa-lo3tQAMDt9ImdyEq5dAO6ks5uojPpgaJpZM4RPnag>
.
|
|
Hi. I'm butting in again. :) There is a slight problem with contrast, especially with the light theme. Keep's new look isn't something to emulate. It's too busy and frankly looks like there's a bunch of bubbles if you use tags. But if the "cards" have a different background color than the main background and the stroke is subtle, then I think borders help. It's all about the balance. I played around a bit in XD and added borders to the two top cards. Depending on the screen in use you can hardly tell that the borders are there, but I think it is enough to help the eye and not create a distraction. I took the cards' background color and lowered the brightness by 4 and used that as the border color.
Granted I haven't seen what the testversion of Voice looks like on a small screen. Nor have I tested my changes on a small screen, but they look good on my monitor. |
|
@newhinton Sorry for not responding to your comment earlier. WRT contrast of the main UI, I need to test it first on an actual device but it's up for tweaking. No problem. As for the playview, it's outside of this report's scope, I was only after a home redesign. But I agree that many aspects of the app are in need of a remake. |
|
@nimbus77 That's much cleaner, but I prefer to test on an actual device first. |
|
@0rAX0 no problem there ;) But wouldn't the navigation drawer help in your case? It moves the settings-button, so that you are only left with the searchicon, and not both. (I mean, you get the burger menu, so basically you just move it, but it is on the other side so its less obstrusive) |
|
@newhinton As you said, it moves one button from one side to the other. Everything inside that drawer belongs in the Settings view, so we either have ONE icon which takes us to where we could fiddle with the app (usually once or twice in long time, like adding a folder) and we have your suggestion which doesn't rearrange of improve the old layout just hides the old scattered settings under a new component. |
|
yeah, i get that :D |
|
@0rAX0 @PaulWoitaschek is there going to be a new fullscreen player for 4.0.0 or is it just going to be changes to the book selection screen? |
Hey,
I've been thinking about doing a concept to improve the home screen for a while and I have finally did it! The problems it tries to solve are:
The concept contains:
The text was updated successfully, but these errors were encountered: