Designing For Complex UIs

Not much can surprise us when it comes to interface challenges. We can design a decent card, a well-rounded accordion, an accessible modal and an exquisite hamburger navigation. But what if there are slightly more complex UX challenges ahead of us?

Designing For Complex UIs

Vitaly Friedman

Vitaly Friedman

Editor-in-chief & Creative Lead

Not much can surprise us when it comes to interface challenges. We can design a decent card, a well-rounded accordion, an accessible modal and an exquisite hamburger navigation. But what if there are slightly more complex UX challenges ahead of us?

Well, complex UI doesn’t have to be complicated. In this online workshop with Vitaly Friedman, UX consultant and creative lead behind Smashing Magazine, we’ll dive deep into dissecting how to solve complex design problems. Whether you’re working on a complex nested multi-level navigation or creating enterprise grade tables, this workshop will give you the tools you need to excel at your work.

We’ll take a look at:

  • Complex mega-dropdowns with 4+ levels of navigation, layout, interaction design, sideways navigation, breadcrumbs, top task analysis, mobile/desktop (e.g. large university websites),
  • Complex modals and overlays, confirm vs. undo behavior, right timing, intraction design, with guidelines and best practices to improve click-through rates and decrease mistakes (e.g. enterprise software),
  • Complex multi-page forms, focusing on form components, one-column vs. multi-column layout, error recovery, inline validation, routing, conditional reveal, disabled buttons, input buffering (e.g.complex multi-column multi-page forms with dozens of steps),
  • Enterprise-grade tables, complex use-cases with inline editing, filtering, tagging, sorting and search — on mobile and on desktop (insurance, loss prevention),
  • Dashboards and spreadsheets, with complex layouts, data editing, inline filtering, infinite scroll UX,“load more” vs. pagination, access to footer and access to the current state, mobile optimizations,
  • Complex filtering, layout, auto-apply vs. manual apply, filtering overlays, filtering and sorting intervals, best practices and guidelines, on mobile and on desktop (public archives, media library, large catalogs of products),
  • Autocomplete UX, with layout and interaction design, when to show/hide suggestions, search query iteration, autocomplete blindness, faceted search, smart suggestions, type-ahead pattern, keyboard navigation, on mobile and on desktop (e.g. in eCommerce),
  • Accessibility of complex interfaces, with technical considerations, focus traps, navigation, announcements of notifications, keyboard support,
  • Privacy UX, and how to gather accurate data while avoiding legal battles and respecting user’s data,
  • 100s of real-life examples, government and university websites, trip planners, financial services, eCommerce, online banking, configurators, insurance and mortgage calculators, data grids and enterprise products.
  • Checklist for complex UIs with guidelines and decisions to consider when designing any component in a complex setting.

By the end of the session, you’ll gain a packed toolbox with practical techniques and strategies for approaching complex UI challenges and tackling them well — plus a collection of real-life examples to apply to your application immediately.

Who is this workshop for?

This workshop is for interface designers, front-end designers and developers who’d love to be prepared for complex and time-consuming design challenges. You’ll walk away with a toolbox of techniques and examples of doing things well — in your product, website, desktop app or mobile app, be it a small mobile app or a large enterprise application.

When?

24 August from 9:00 to 17:00, Zürich


Buy tickets


Photo credit for overview page: SmashingConf SF, photo by Marc Thiele