unstructuredstudio
Improve the design & messages in error pages across ZubHub
Describe the the feature request
When the user searches for a project that is not available yet, an error message pops up. To improve user experience and encourage the user to keep engaging with the platform, we can suggest other projects that the user may find interesting. The UI for the error mssage can also be made better.
@Adaking-slack Thanks for creating this! The error pages need improvement all across ZubHub. So, instead of targeting just one page at a time, it would be nice if this task was part of a larger project. Do you want to modify this task, document what all error pages need improvement, and invite other designers and developers to collaborate with you on this task?
@Adaking-slack IF you are willing then i would love to work on the design with you! Let me know and i will share some ideas!
Hi @Adaking-slack can we identify what is need to be modified so that I can work on the designs
@Adaking-slack Thanks for creating this! The error pages need improvement all across ZubHub. So, instead of targeting just one page at a time, it would be nice if this task was part of a larger project. Do you want to modify this task, document what all error pages need improvement, and invite other designers and developers to collaborate with you on this task?
Yes I do
Hello@Adaking-slack I would like to work with you to improve the error page design
hi @srish This is the design i was able to come up with. I belive that coming up with suggestions based on the user's search query can help with user retention
Another issue i tried to resolve is the error page that comes up when you click the project tab. The message User has not created any projects yet. Check back later!" feels like we are addressing a third party and not the user exactly, so i tried to word it better. I also added the click to get started to direct the user towards taking an action
@srish
Hello@Adaking-slack I would like to work with you to improve the error page design
hi, sure. I was able to come up with something, you can chech it out and let me know if you have other suggestions
@Adaking-slack IF you are willing then i would love to work on the design with you! Let me know and i will share some ideas!
hi, sure. I was able to come up with something, you can check it out and let me know if you have other suggestions
@Adaking-slack great work! I think the create project button should be under the click button to create instead of being in an entirely different section
@Adaking-slack great work! I think the create project button should be under the click button to create instead of being in an entirely different section
hi, thank you for your observation
great work @Adaking-slack i would love to collaborate with you on the designs
While acknowledging the commendable work done by @Adaking-slack, I propose implementing a distinct avatar design element. The current depiction of an envelope appears incongruent with our established style guide. I kindly request your assistance in refining this element to ensure its seamless integration within the designated style framework. Thank you.
Surely @srish, I think we should rework on the ErrorComponent to be a bit more flexible and understandable and also better looking. Am open to work after the designs
@coderatomy i believe @Adaking-slack used that as a placeholder to indicate that there'd be an avatar element there. It's a low fidelity design
@coderatomy i believe @Adaking-slack used that as a placeholder to indicate that there'd be an avatar element there. It's a low fidelity design
Got you! Thanks @Adaking-slack
@srish i worked on this using the brand guideline and asset, while waiting for you to assign issue/task to me
Certainly, @pachougu. This pertains to the page not found redirection page. I would like you to examine the ErrorComponent. Our goal is to establish a more realistic and intuitive error handling mechanism that is easily understandable both to humans and screen readers.
Here's the breakdown of how I envision this component:
Header: Provide a clear and concise title that succinctly explains the cause of the error.
Icon/Avatar: Utilize a realistic icon or avatar that is visually connected to the specific error, enhancing the user's understanding.
Body: Include a straightforward paragraph that outlines the error in detail. Additionally, offer guidance on what actions users can take if applicable.
We need a design that accommodates these requirements, including considerations for font sizes and appropriate icons to ensure a seamless user experience. Your expertise in this matter would be greatly appreciated. Feel free to add anything I missed
@Adaking-slack , re the comment by @srish to make it a part of a larger project documenting and fixing error pages across zubhub. On the mobile interface, I also noticed a challenge when you click on ̈ create a project" as a non logged in use, a 404 error page. The sign-in/sign-up page should pop.
Currently On Mobile, what you find is. a) Access zubhub on mobile b) Click burger menu to access create projects c) A 404 error page pops up.
The sequence ought to be: a) Access zubhub on mobile b) Click on burger menu to access create projects tab c) A sign in/sign up pops pop prompting visitor to create a profile.
I would love to work with you to locate more of these and improve the UX and the design.
Certainly, @pachougu. This pertains to the page not found redirection page. I would like you to examine the ErrorComponent. Our goal is to establish a more realistic and intuitive error handling mechanism that is easily understandable both to humans and screen readers.
Here's the breakdown of how I envision this component:
Header: Provide a clear and concise title that succinctly explains the cause of the error.
Icon/Avatar: Utilize a realistic icon or avatar that is visually connected to the specific error, enhancing the user's understanding.
Body: Include a straightforward paragraph that outlines the error in detail. Additionally, offer guidance on what actions users can take if applicable.
We need a design that accommodates these requirements, including considerations for font sizes and appropriate icons to ensure a seamless user experience. Your expertise in this matter would be greatly appreciated. Feel free to add anything I missed
Thank you for this @coderatomy I'm working on this
@coderatomy what do you think about this?
A second option showing the reason for the error message, the reason for the error and the steps to take
@coderatomy i believe @Adaking-slack used that as a placeholder to indicate that there'd be an avatar element there. It's a low fidelity design
yes, i do not agree with the image used, so I made use of the placeholder
@coderatomy what do you think about this?
A second option showing the reason for the error message, the reason for the error and the steps to take
I like the icons used
While acknowledging the commendable work done by @Adaking-slack, I propose implementing a distinct avatar design element. The current depiction of an envelope appears incongruent with our established style guide. I kindly request your assistance in refining this element to ensure its seamless integration within the designated style framework. Thank you.
Surely @srish, I think we should rework on the
ErrorComponentto be a bit more flexible and understandable and also better looking. Am open to work after the designs
I agree @coderatomy I think the big "Oops" message should be replaced because it is likely to scare away he user
Hello @srish and @tuxology, I would like to ask if this "add suggestion feature..." is still open for, well, suggestions? Or is it closed?
Hello everyone , I noticed there is a robot design for the error page already so we can come up with different copies for the pages it is needed and stick with the available design since it fits the ZubHub theme.
@srish
@Temabo I don't know if a robot glitching would fit the theme for every error page. For instance the no drafts or no projects page or no results can the illustrations send across the message? If the message is to say that something is wrong I think a glitching robot conveys that message