The mouse pointer has a protracted historical past of being a basic a part of the trendy interface. Home windows and Mac system pointers have barely modified in the previous couple of many years. Then again, video video games have a historical past of reimagining the pointer. A excessive proportion of contemporary desktop video video games use customized pointers which might be branded for his or her experiences. However what would it not take to design a online game pointer that additionally works in an OS-like interface like Roblox? Roblox is a platform the place customers can create and discover immersive digital experiences. Because it serves as a seamless metaverse between video games and experiences, the Roblox app offered a singular UX problem I used to be excited to work on.
I’ve seen the phrases “cursor” and “pointer” used interchangeably. I’m principally going to go for “pointer” to differentiate from textual content cursors, that are utilized in enter fields and command interfaces.
The Downside
The brand new Roblox desktop shopper was below approach, however the app was lacking an important UX aspect — mouse state adjustments. Not like how searching and enjoying are separate experiences for many desktop video games, the brand new Roblox desktop shopper permits customers to browse and play seamlessly in a single window. Nevertheless, the mouse pointer expertise wanted work. The “Hyperlink Choose” or “Hover” state had poor visible affordance. And the “Textual content Choose” state, which seems when a consumer hovers over a textual content enter subject, was lacking altogether. This was a chance to revamp and enhance the mouse pointer trifecta: Default, Hyperlink(Hover), and Textual content.
Designing a pointer for each an working system and online game is difficult on account of their totally different use circumstances. An OS cursor must be a impartial colour, excessive sufficient distinction for visibility, sensible sufficient for on a regular basis use, and never too lurid to trigger eye pressure. A online game cursor can ignore lots of these guidelines as a result of it normally corresponds to the model’s feel and appear to ship an immersive expertise. However is there a profitable solution to mix each of those attributes?
Roblox’s 2012 mouse pointers. There was no textual content pointer, so the hover pointer was used as an alternative.
Check out Roblox’s 2012 pointer. It went in the suitable course by utilizing impartial grayscale colours. Nevertheless the hover state used a black pointer, which confused new customers on a Mac pc. One different mistake is that the arrow shoulders had been drawn utilizing the vertical axis as an alternative of the arrow face axis. This implies the arrow is asymmetrical by about 6.eight%.
Default pointer was not symmetrical alongside the arrow face axis.
Look and Really feel
Right here comes the enjoyable half. What are the present tendencies of online game pointers for desktop? I compiled a number of the hottest gaming pointers and ranked them by graphicality and practicality. Most gaming pointers decide within the course of branded graphicality. The Roblox pointer would should be barely extra graphical than the frequent OS pointer whereas nonetheless maximizing practicality.
Mouse pointers from present high desktop video games. See what number of you’ll be able to acknowledge!
Not solely does the Roblox pointer have to look ample throughout all expertise genres, nevertheless it wants to enrich our design system, uiBlox. The uiBlox design system at present makes use of #FFFFFF icons on a default darkish theme. Our type makes use of 2px radius curves and a tough ratio of three:1 round-to-square corners in every icon. For the pointing hand cursor, I used to be impressed by our new emote paintings illustrated by one in all our superior designers, Amy Liu.
Left: Roblox’s iconography type makes use of principally rounded corners with little sharpness. Proper: Roblox’s emote design by Amy Liu.
Placing It All Collectively
After getting suggestions from different designers, we developed the ultimate pointer set for Roblox. The brand new default pointer is now symmetrical and provides an arrow tail for visibility. A drop shadow delivers modernity and depth in a 3D surroundings. The brand new hover pointer heightens accessibility by making the form distinct from the default pointer. Lastly, the textual content pointer is reshaped to a #FFFFFF 1px cursor to present it distinction on our darkish theme. The darkish stroke creates visibility on our mild theme and different Roblox experiences with mild backgrounds.
Roblox’s new 2021 mouse pointers.
A redesign is barely as efficient as its consumer suggestions. We surveyed 215 Roblox builders on what they needed to say about these new cursors. A big majority agreed that the cursors had been an enchancment in each aesthetics and value. Essentially the most thrilling statistic is our builders’ response to the Textual content pointer. Of the whopping 89% that agreed it was an general enchancment, 74% of them strongly agreed with that assertion. Figuring out our customers have a constructive response to those UX enhancements will assist us after we develop the remainder of our pointer set, in addition to different UI parts in-experience.
A big majority of Roblox builders agree or strongly agree that the brand new pointers are an enchancment to usability and aesthetics.
As Roblox expands past gaming right into a communication, social and even transactional platform, this one facet of the product will assist information the consumer as they navigate between the applying and its experiences. Our hope is that this can function a prevailing commonplace for digital metaverses from right here on out!
Excited by becoming a member of the Roblox Design workforce and fixing issues like this? Verify us out at corp.roblox.com/careers/ for the newest alternatives.
Derek Wong is a Visible Designer at Roblox. He works on Roblox’s design system, which shapes the consumer interface of the Roblox web site and desktop app. Neither Roblox Company nor this weblog endorses or helps any firm or service. Additionally, no ensures or guarantees are made concerning the accuracy, reliability, or completeness of the knowledge contained on this weblog.
©2021 Roblox Company. Roblox, the Roblox brand, and Powering Creativeness are amongst our registered and unregistered logos within the U.S. and different international locations.