Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Consistent use of CSS styles #167

Closed
beefy-raccoon opened this issue Jun 8, 2021 · 3 comments · Fixed by #228, #248, #251 or #339
Closed

Consistent use of CSS styles #167

beefy-raccoon opened this issue Jun 8, 2021 · 3 comments · Fixed by #228, #248, #251 or #339

Comments

@beefy-raccoon
Copy link

I know it's a webapp that strives to be a desktop app(let) and it works fine as it is.

One thing I expected seeing a lot is the use of cursor: pointer on interactive elements. I wouldn't have noticed the absence of it if it wasn't to be seen on the first screen of the app: the 'Task List'.

I'll provide my findings as a list of screenshots here.

2021-06-08_23-21-30 -- Task List Entry

2021-06-08_23-27-24 -- Config

2021-06-08_23-30-41 -- Timer

2021-06-08_23-32-50 -- Settings top
As an unrelated note here: a title on hover should give a short explanation of what the setting is supposed to do.

--
2021-06-08_23-36-57 -- Settings bottom

Except for one place, the use of blue color seemed to be consistent.

Everything mentioned here may be minor but I think it would give the UI a nice final polish.

@beefy-raccoon
Copy link
Author

Two other things on the 'Settings' that I didn't try out but could be nice: make the section headers a little bit more prominent and remove the hr after each :last entry or alternatively just remove the hr but keep the extra padding to make headers stick out a little more.

@sekwah41 sekwah41 self-assigned this Feb 25, 2022
@gillisandrew
Copy link
Collaborator

Hey, thanks for the feedback

One thing I expected seeing a lot is the use of cursor: pointer on interactive elements. I wouldn't have noticed the absence of it if it wasn't to be seen on the first screen of the app: the 'Task List'.

As per both Windows and macOS' UX guidelines, pointer is to be used only for links to webpages, files and documents or buttons that otherwise have weak affordance.

It has emerged as common practice on the web, mostly due to widespread use of anchor tags for all interactions, but is still far from being a design convention. Native apps in particular should try to adhere to the platform's design specs to ensure a consistent user experience.

Definitely worth fixing the links on the settings page but, in my opinion, the other interactive elements should remain as is.

@sekwah41 sekwah41 removed their assignment Feb 26, 2022
@sekwah41
Copy link
Member

Got a few things I need to focus on before so I unassigned myself for now though I agree with @gillisandrew. Though we may want to look into other visual hints e.g. the option highlighting a little on hover to add some level of visual feedback.

Example
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment