Design & Interactive Experiences

...Diablo Accessibility Article: https://rossminor.com/2023/06/08/diablo-iv-blind-accessibility-review/Send accessibility feedback to Blizzard: https://us.ba...

In this video, Sergey and Charles cover what is known about user experience design for the brave new world of Language User Interfaces (LUIs) that are enable...

Rachel Andrew has been writing CSS for over 20 years, and teaching people the things she has learned for almost as long. Since the early days of CSS, and certainly since “CSS for Layout” became a thing, we’ve been teaching CSS in pretty much the same way. Here is a block thing, here is an inline thing, this is the Box Model … and here is this weird jumping through hoops that makes a layout. It’s time for a change.

By re-imagining the classic “I’m a Mac… and I’m a PC” commercials, Jonathon Colman and Erin Hawk from REI help attendees learn how two individual disciplines — User Experience design (UX) and Search Engine Optimization (SEO) — can work together to help customers succeed in their goals and, in so doing, redevelop their relationship while growing their business.

Interesting and impactful text is often deemed a “print only option”. But we can have those effects now with real web text.

Content strategists at Facebook plan, structure, and create content for more than a billion people. But they’re not writers or content marketers—they’re interaction designers, information architects, and UX practitioners. They design and build product experiences that are simple, straightforward and human.

Over time, your users will become more accustomed to and reliant on voice-based interactions with their computers and, thereby, the web. Enabling them to complete critical tasks without a visual user interface will be crucial for the long-term success of your website. In this session, Aaron Gustafson will discuss how smart markup choices can improve the overall usability and accessibility of your projects without disrupting your current workflow.

“Progressive enhancement” is a philosophical approach to web design and development that centers users, with the goal of enabling everyone to access the content and complete core tasks, regardless of circumstances influencing how they access the web. In this session, I set the stage for why progressive enhancement is the gold standard for developing web projects before diving into a host of practical examples of how you can apply this practice to a range of interfaces. Along the way, I also show you how your entire team can (and should) get involved in the ideation, development, testing, and evolution of your interfaces and components.

Now that we have the tools to superpower our layouts, we can start to reimagine how we approach art direction and design on the web. By taking advantage of technologies, some new and some overlooked, we can create a progressively-enhanced design that’s powered by feature queries; one that’s localized for an increasingly global audience. In this talk drawn from her work for Slack and other properties, Mina walks through her process for enhancing design and shows how little changes lead to big design payoffs.

Today, Voice User Interface is a significant part of a tech roadmap for businesses. Irrespective of the industry, businesses are realizing the benefits that VUIs bring in and are cashing in upon them. Given the complexity, designing a VUI requires know-how and experience with computer science, human psychology, and linguistics, along with cognitive learning.

We know the importance of UX, and there is a lot of information out there about good design principles - when on a digital screen. But what about one of the most prevalent interfaces that we all encounter? Whether it’s the contract for your mortgage or bills from suppliers, printed documents are still one of the major ways in which we interact with our users. This talk covers design issues and tips unique to the UX of the physical printed world.

A talk for students and alumni of the MSc in Human-Centred Systems at the Centre for Human-Computer Interaction Design.

CSS is the language for describing the presentation of web pages, including colours, layouts and fonts. But we can use CSS to create works of art in your browser. Let’s take a look at the CSS properties which can help us do that.

The Digital Accessibility Lab team at Iowa State University has been designing and developing the A11yCats Game. The team embraces the disability community concept, “Nothing about us, without us.” The games impetus is to embrace disabled characters as playable characters and to form a research study of how disabled players want to be represented in games. Too often, players with disabilities are not included in any phases of game design and development. While disabled characters sometimes appear in games, they are nonplayable characters (NPCs). NPCs devalue and “Other” disabled persons. Further, the game is being created with accessibility in mind from the beginning with art, design, and code.

Graphic designers are as rare as hen's teeth at hackathons. It's highly likely that you may end up on a team without one! However, not to worry, this doesn't have to mean your project will look ugly. Over my extensive hackathon career, I've developed many ways to work around the absence of a designer and create decent looking projects that get judged on merit. In this presentation, I'll share with you the tips and tricks that can get you through.

Modern CSS gives us the ability to set type for a dynamic medium, which is something relatively new, and requires us to look at typography with a fresh perspective. Chinese typography traversed its own parallel path of evolution over the centuries and this talk will cover the use of CSS as the typesetting tool of the web for both Chinese and Latin-based languages.

As more people move into the online world, it is more crucial than ever to ensure that the world’s diverse written languages have their place on the web. Typesetting on the web doesn’t involve metal sorts and composing sticks. Instead, we use web fonts and CSS. We will be covering the various font properties which, over time, have been continually evolving, giving developers better control over the typography of their projects, as well as even better performance with variable fonts.

We have a problem: modern web technology is getting ever more complex. As a result, teams are struggling to produce their best work and we are often failing the people we are building for. One reason for that: the infamous and ever-growing gaps between design and development. How can we overcome those divisions and deepen our common understanding of the material we are building with? And why is CSS one key component of all that? In this talk, we will look at possible solutions and practical examples that will enable us to forge links between the disciplines and to design and engineer better with the inherent flexibility of the Web – together.

Open Sans, Open Sans, Open Sans – it’s everywhere! It’s the second most popular web font, it’s the new Arial. However, there is nothing wrong about Open Sans specifically, it’s just overused. Picking a typeface is an opportunity for your website, app or digital product to show personality, be memorable and stand out among its competition. And if you’re using Open Sans you’re missing out on all that good stuff.

In this talk I use my experience as a Front End Development Manager & Accessibility Lead to dissect the structure of a website. You’ll learn a 3 step process to evaluate designs & code to make decisions across disciplines to arrive at more accessible product experiences.

Accessibility bugs have long been thorns in the development team’s side since accessibility testing traditionally only took place as an afterthought near the end of the product life cycle. However, inclusive thinking really starts long before the first wireframe is sketched out or a single line of code is ever written.

Some of the world's greatest print design was made on known canvases, with known content using known color options. On the web, we have more flexible tools. Media queries, flexible units, Grid Layout and Flexbox let us do great graphic design. With flexibility.

When you’re designing a page, it’s essential to think about who your audience is — and that your audience may not have the same abilities as you. Making your documents accessible is not just about adding alternative descriptions to images; it’s about thinking through all the ways you can make your design work for as many people as possible. Join me as I explain the choices you can/should consider in an accessible visual presentation using text, such as font, color, contrast, size, column width, spacing, kerning, and more.

For centuries, typography has shaped the way we ‘hear’ what we read. In our web work, though, we've have to balance our typographic desires with user experience and performance, knowing that every weight, width, or style of a typeface required a different file download. Variable fonts change that, as they include every width, weight, slant, and other permutation of a typeface, all in a single file not much bigger than a regular font file. Now, beautiful web typography can be crafted to respond to screen size, language setting, even ambient light. In a detail-packed hour, Jason will show you not just how far the new capabilities can take us, but how to make use of them right away.

What is a Design System?

The web was invented to display text in a left-to-right horizontal writing mode — the way English and other western European languages flow. But as Bruce Lawson says, WWW stands for the World Wide Web, not the Western Wealthy Web. It's more important now than ever to be inclusive and global in our thinking, and resist imperialistic and nationalistic impulses.

CSS Grid revolutionizes how we create layouts on the web — but how exactly should we use it? When someone emails you a PDF, how do you know the best way to get started? Where should you use what code? How do you translate a static drawing into a dynamic layout? In the spirit of Smashing’s “no slides” rule, Jen Simmons will live code a design from start to finish (or however close to finish she gets before time's up). No net, no preparation. How does someone in the real world create a layout using the tools of Intrinsic Web Design?

2017 saw a sea change in web layout, one that few of us have truly come to grips with. We’re standing at the threshold of an entirely new era in digital design—one in which, rather than hacking layouts together, we can actually describe layouts directly. The benefits will touch everything from prototyping to custom art direction to responsive design. In this visionary talk, rooted in years of practical experience, Jen will show you how to understand what’s different, learn to think through multiple stages of flexibility, and let go of pixel constraints forever.

Gillian Bowan, PhD; Lead Researcher at Atlassian