In November, I wrote regarding my team’ s work on fresh new website design tools . We also leaped a survey to rank the particular challenges of web design and development. A big thank you so much to everyone who participated within our open design process! We obtained over 900 responses in one 30 days, and discovered major findings which usually continue to inform the Firefox DevTools’ 2019 roadmap.
With guidance through Mozilla’ s data scientists, We chose the MaxDiff way for the challenge-ranking portion of the study. MaxDiff requires the survey taker to make trade-offs within subsets from the pool of options. This helps out ranking a large number of options, which would end up being too overwhelming for a regular credit card sort. It also produces a more precise overall ranking by emphasizing relatives differences in priority.
Used, this produced 10 survey web pages that each showed a set of 4 randomly options from a pool of twenty three total web design challenges. Participants needed to choose the “ least“ and “ most” impactful options in every set. The ranking was after that determined by scores computed using the subsequent formula:
# periods rated best – # instances rated worst
— — — — — — — — — — — — — — — — —
# times item made an appearance
The second portion of the particular survey focused on specific frustrations along with browser developer tools. For this area we only offered 7 choices, so we used a simple drag-and-drop credit card sort.
The highest-ranked issues definitely were related to CSS layout debugging — studying the root cause of mysteries like undesired scrollbars and unexpected size plus position. Accordingly, my highest concern right now is digging deeper directly into CSS debugging issues with further study and experiments. (You can help through my brief new CSS Debugging follow-up study ! More info below. )
Unsurprisingly, cross-browser compatibility was also a highly regarded choice. We’ re investigating methods to ease the pain of debugging internet browser differences, including auditing, hints, along with a more robust responsive design tool.
Mid-ranked issues included Flexbox , Grid , and Accessibility . We plan to keep on improving our Accessibility Panel ; however , for the moment we’ ll step back a bit from your successfully launched Flexbox and Grid tools. Letting them breathe and gathering more real-world feedback will allow all of us to swing back with fresh ideas later.
Lowest-ranked issues included Insufficient Visual/WYSIWYG Tools , Animations , WebGL , and SVG . The visual tools component was surprising— we’ ve noticed a lot of love for click-and-drag visible tools like the beautifully designed Visbug and Webflow . I suspect my old-school wording here— WYSIWYG (“ everything you see is what you get” )— brought to mind less-delightful experiences from the past. There are clearly ways to enhance developers’ lives with modern equipment in this space.
When it comes to browser issues card sort, we all hear you loud and apparent on the issue of “ Shifting CSS changes back to my publisher. ” We’ re currently along the way of adding export options to the Changes panel, and would love your own input on our designs ! DOM breakpoints are also in the plans for this season.
You can view the full MaxDiff and card sort rankings within this record .
Follow-up Study: CSS Layout Debugging
Now we need your assist again! The main takeaway from the 1st survey was that developers and developers of every experience level want to much better understand CSS issues like unpredicted scrollbars and sizing. We’ ve started researching and prototyping possible tool ideas for investigating particular types of CSS bugs, but we want your feedback to guide our function.
Please take a moment with the quick single-page CSS Layout Debugging survey and help us position the most time-consuming bugs. Your opinions will be immensely helpful in making clear our plans in 2019 plus beyond.
Victoria & the Opera DevTools team
If you liked Website design Survey Findings and Next Steps by Victoria Wang Then you'll love Web Design Agency Miami