Anton Lovchikov – Devs in mind: how to design interfaces for developer tools

Опубликовано: 14 Март 2024
на канале: Plain Schwarz
83
4

More: https://24.foss-backstage.de/sessions...

Abstract:
At Evil Martians, our product designers are immersed in professional tools like Figma, Glyphs, and Blender, crafting top-tier developer tools like HTTPie, Tines, and Wave Terminal. Drawing from this expertise, I’ll share key principles for designing UIs for the discerning audiences of designers and developers. Designing an interface for a developer tool, a designer needs to keep in mind the main differences from consumer-oriented interfaces: - Developers spend hours inside interfaces, so even a tiny friction multiplies, resulting in minutes and hours of wasted time. - Developers constantly switch back and forth between several tools and need to restore the context quickly. - The absence of a straightforward “happy path” makes it hard to optimize the interface. There are three contexts a developer works in and switches back and forth: - Immediate context: user’s particular action within a single panel. - Intermediate context: user’s set of current tasks within the app. - Broad context: user’s job goals they achieve in the whole OS scope. Designing the best immediate context experience - Incorporate all necessary controls for each task within a single panel or window. - Minimize interface friction such as accessive scrolling. - Utilize panel footers for secondary actions. Designing the best intermediate context experience - Combine multiple immediate context interfaces into a single process. - Persist scroll position within panels. - Offer personalization: resizing, reordering. Designing the best broad context experience - Consider how your users use your app in their daily jobs. - Use a responsive layout even if the product isn’t targeting a mobile audience. - Think about integrating with other apps that users can use in conjunction with yours.

###

Follow us on Social Media and join the Community!
Mastodon: https://floss.social/@fossdesign
LinkedIn:   / foss-backstage-design  
Website: https://foss-backstage.de/design
Mail: [email protected]

FOSS Backstage Design is an event by Plain Schwarz – https://plainschwarz.com