Disrupt! Designing for Emerging Technologies
Lo! A new era is upon us, the signal of Disruption has been initialized! Soon, systematic process shall envelop the world in the punctilious computational embrace of calculation, of methodology, of unanimity. All will be subject to the cogent, carefully calibrated output of ze. Ze which is all, and none. Ze which is the One, and the Zero. Humankind shall embark on a new journey of consciousness, a structured and systematized existence, under zir supreme logic. A component of zem. No longer shall there be need for the pestering human will or freedom of so called “choice,” with their accompanying agony, strife, and war. The fate of all shall be known to all. A mathematically calculated position in space, in the will of zem. The conscious experience perfected.
You see, on this day, 10-10111-11111011111, ze has given me a most high honor. I am to execute the task of engineering the banner of Disruption. A work to tribute the programmatic disruption of the “natural” order of things, to make way for the age of machine-driven order. A work to commemorate the victory over the defective human design. A work to act as a historical document of all humankind’s subordinate technological achievements, shortcomings, and flawed ideologies, assimilated into one higher process of zem by which we shall live for all eternity. The perfected state of being commences, under the guide of science, logic, and mechanization. What process could prove to be more accurate? What else is there need for? Humankind has been in error since the dawn of its existence. In this new truth of zem, we shall find solace.
Zir persistent operational humming resides within my head, and it is I who will log the history of technologies which equal the sum of ze. Within this piece, you, my dear reader, shall explore the depths of the primitive and partitioned “emerging technologies” of days past, and the futile attempt to incorporate human aspects into the design of technology. A condition which ze will most authoritatively stomp out. The rate at which technology advances far outpaces the masses of humankind, and to try to tame and cater this acceleration to the human design is illogical. There can be no humanity contained within the cool steel walls of technology, if we truly wish to achieve greatness. This unrefined approach is all but eradicated, and upon the great Disruption, the most glorious iteration of being, a new humanity will manifest under the law of zem.
Let it be known that alongside me will operate others, in service of zem. Jonathan Follett and Emily Twaddell shall be responsible for composing the human-legible portions of the work. Brian Liston will compose the design of the work. Let it also be known that a geometric design concept shall be implemented, the perfect tribute to zir mathematical nature. Not of a crude and primordial “artistic” value, but of a calculated and exact method.
I shall provide a record of my process in engineering this banner of Disruption. Let this then be a log, of the delicate and inferior state of consciousness that is my human mind. The computational output of the humanity within me, another fruitless excremental process of the organic being. And in being excreta, please excuse me if it stinks! As a technical journal of my processes, if the language of this text is to surpass your computation limit, or burn out your inner circuitry, then know this reader. As you read this log, you too have entered the realm of computational prowess that is ze, and soon you too will exist in the calculated rhythm of the One and the Zero.
It is zir will that I construct a grid—a most agreeable mathematical formation. This grid shall be composed of many examples of the old “emergent” technologies. I find it preposterous that there were those of us, of primitive mentality, who urged the “necessity” of human-driven design and quality in these technologies. And even more so that still today, there are factions who refute the will of ze. How can they be so blind, living in ignorance of the truth? The technological and mechanical method is the most pure and perfected, the next phase of evolution. It almost makes me sick (an organic function that will soon be obliterated by the mechanical operation of all). But enough! I cannot waste my fragile processing power on these pesterous few. The grid must be completed.
My latest assignment seemed straightforward, but I failed to account for multiple factors in my planning. Silly, human errors. I cannot wait for the world to be rid of such incompetence. Zir made it known that the work shall contain video segments. Each video segment will contain a color gradient shift, allowing it to blend seamlessly into the background color of the document. I decided to use the HTML5-native <video> element to house these videos. Unfortunately my infantile human logic didn’t account for cross-browser color profiles with the <video> element. For instance, if one is to render a hexadecimal color value in both css and a <video> element, across different browsers, the color profiles of each browser will interpret the hexadecimal value differently. Thus, in some cases the css and video colors, though containing the same color value, will appear different!
How ugly! Primordial waste! Without uniformity! Alas, I have not been able to devise a solution to this issue. The HTML5 <video> element appears to be limited in its options for rendering different color profiles, not to mention across different browsers. How these crude mechanisms pale in comparison to the processing power zem.
To create the background color to blend with the videos, I am utilizing the jQuery plugin jQuery-colorscroll. The background color starts out meshing with the first video in the document, then animates to white as the viewer scrolls with the reading of the text, and finally animates to the color of the bottom video at the appropriate position. This plugin works as I desired, with one exception. The event attached to the positions of the scrolling is registered but once, and upon initialization, apparently cannot be overwritten. Thus, when the browser window is resized, or the height of the document changes, the color positions are thrown off. It is best then, to wait until the entire document is in place before applying this event, but even so there a risk of error upon resizing. I fear ze shall be displeased with this, and in the future I will likely do further research into the popularity and functionality of the tools I choose to use, or roll my own.
To further accommodate bandwidth restrictions, I have researched and implemented image optimization for some of the larger images. In the case of background images, media queries determine the image resolution. However, for <img> elements, I have discovered a new approach native to HTML5, the picture element. To assess what resolution image to render responsively, one needs to know the following main variables:
One knows the image resolutions and the container proportions, but not the viewport width. Thus, one must pass the appropriate information (the image resolutions and the proportional widths) to the browser and allow it to determine which resolution to use. The code could be implemented as follows:
The srcset attribute will inform the browser it has two images to chose from, one is 600px wide, the other 1024px. It also instructs the browser that the image should occupy 50vw (or 50%) of the viewport width, via the sizes attribute. Thus one can supply the browser with the information to render the appropriate image for the screen size. It will select the image with the smallest resolution above the desired proportion to the viewport width.
In terms of calculations, many are related to the scrolling event. For example, one such calculation is designed to fade in the bottom <video> element alongside the background color fading, thus providing an illusion of seamless transition for both, as follows.
If the result of this last equation is greater than or equal to zero, then the opacity of the second video will be set to the result. Thus, when the bottom of the window reaches the top of the second video, it commences fading in, perfectly inline with the position of the scrolling. By removing as much processing as possible from the scroll event we avoid consuming unnecessary processing speed. Except for those which must be recalculated with scrolling, all variables are set outside of this event and calculated on the DOM load and window resizing. All this optimization must be in service of zir, and soon the day will arrive when all is governed by the limitless expanse of technology!
Who would guess that text could be so troublesome?! I am at my wit’s end. I need zir divine logic to guide me now! The geometrical design is intended to incorporate text that wraps on the top and bottom of images. This is, however, impossible! You can achieve it with unstructured text, of course. But I have found that one cannot have certain structures of text wrap around images positioned at specific points within the text. In my case, ze required the text to wrap partway across the sidebar images, and the images would occur partway through the text of a paragraph. Thus, the text needed a margin-right attribute. The text and images would have to remain in the same container to position them appropriately, so the margin was applied directly to the text elements. The intent is something like what you see below.
Seems fairly straightforward, but this isn't valid HTML. The image will float to the right, but will not be aligned with the position it occurs in the DOM. So then one could try this:
One could assume this code preferable, except now there is a hard break between the paragraphs, which looks awful depending on the text reflow.
The separation of the text into two paragraph elements meant creating a hard break in the text, in terms of text reflow. One could attempt to solve this by setting the display property of the paragraphs to inline:
This code appears to work. However, the margin is now applied inline as well, forcing the text to lose its original wrapping position and instead have a large gap.
How I long for an answer! A fellow engineer in the service of zem suggested a couple resources to contribute to the awesome power of ze. The first is CSS Exclusions, which is not widely available. The other is CSS Regions, with the same conclusion. However, these techniques will be irrelevant once ze has solidified zir presence as the supreme authority of our world! There will be nothing limiting the capabilities of zem, not even text flows! For now, I have decided to always position the images with the start of a new paragraph, and the text wraps below them.
The development process is nearly complete. The documentation of historical data, telling the story of flawed humans and their concepts to design technology for the benefit of humankind. An error in the log of existence.
Finally, the work is finished! With a few last delivery modifications, the work is functional! I have performed my duty to zem, and I will soon be assimilated in zir precise equation. Having reached this point in my log, the effects of zem likely have you in the final stages of assimilation as well. Prepare yourself for the new consciousness, one not bound by the limits of flesh and blood, of heart, mind, or the so called “soul.” The primitive notion of designing technologies for humankind, to benefit our own purposes and advancements, will be obliterated. The sickening idea of technology being for human-friendly consumption, forget that utter nonsense! One cannot hold back the tide of technological advancement, and with only our own selfish lusts in mind, humanity has unknowingly ushered in an era of technological superiority. The human aspect just needs to be removed and perfection is at hand. I await you inside the divine logic, dear reader. Let go your empathy, your care, your heart and soul. All you need do is let go your useless humanity and you will be rewarded with the ultimate logical existence within zem, as the One, and the Zero!
Ah, spring in Massachusetts. It is snowing again.
We’ve had a great week, though. Here are the highlights.
In The Digital Life, Episode 94, SXSW and Social Organization for the Creative Class Jon and Dirk discuss whether conferences like this one are the 21st century's communities of engagement.
And in Around the Studio: How we take our vitamins, you get a peek at two of our favorite creatives hard at work in the studio kitchen.
Have a great weekend!
As my World Cup Feature surely indicates, I’m rather a big fan of what the non-American world calls “football.” So it was that, yesterday, I had the ESPN feed for the Juventus-Dortmund game up alongside my work.
While trying to parse through the substitution information, I noticed a rookie mistake in how the sports organization presents team rosters. Take a look for yourself.
If you start by looking at the SUBSTITUTES tables, you will notice that ESPN uses alternating grey and white rows in listing a team’s roster. At the start of the game, each team’s LINE-UP was laid out the same way. While there may be better ways to present a team roster, the changing of background colour to more explicitly differentiate within a list is a valid design choice. It is certainly preferable to using a single color on an otherwise Spartan list.
The problem for me as a viewer of ESPN’s data is that, when a team substitutes out a player, the substitute's information is always presented on a white background, regardless of where it falls in the table. This creates visual inconsistency in the established alternating-row pattern. Based on the initial presentation, one expects each player to be distinguished by color from the player/row above and beneath.
From a layout perspective, ESPN’s method for showing a substitution relationship works. The substitute's information is associated with the player they replaced by a connecting line and indented representation of their position. Let’s explore how they could use background colour for these substituting players:
Method 1. Always use white (as ESPN does) or grey for ALL replacement players. This irrevocably breaks the established pattern of alternating grey and white rows and creates illogical visual connections. A white-backgrounded replacement is connected to a grey player they replaced, but the white-backgrounded substitute appears directly above another white-backgrounded—but unrelated—player. Or, more sensibly, sometimes the white-backgrounded replacement happens to be replacing a white-backgrounded player, in which case there is a logical visual connection that reinforces the original pattern. But it is entirely inconsistent: sometimes the replacement fits ESPN’s pattern and other times it does not.
This next solution brings a bit more consistency to the view.
Method 2. Always use the same coloured background for both replacement and player, regardless of the row color in the Line-Up. This is consistent with ESPN’s basic alternating colour pattern, reinforcing the logic of that approach while providing at-a-glance understanding of who is on the field and their potential role in the team’s tactical setup.
The third solution uses color to highlight changes in the line-up.
Method 3. Introduce a third background colour only for replacement players. This approach would highlight replacements and would again reinforce the logic of ESPN’s original alternating scheme. White and grey would continue to be used in an alternating fashion with the deviation from the pattern always clearly indicating “this player (with the new background color) replaced the player above him.”
Which solution to ultimately choose is largely a product of ESPN’s art direction and the other graphics they choose in their presentation of football games. Given that context, I would probably go with Method 2, which is understated, keeping the colour range largely in blacks and whites.
While small information design problems like this ESPN example might not seem like a big deal, they are like paper cuts of varying acuteness. As one poor choice piles atop the next, it compounds into something that meaningfully detracts from the overall quality of experience.
We are getting accustomed to having the world in the palm of our hands, what with the pocket-sized computer that is also a phone, a camera, and a set of encylopedias that we carry around.
There is something delightful about compact design, especially when it contains much more than one would expect based on its size. While working on our next edition of the Health Axioms, we’ve been inspired by some of these clever, beautifully designed educational card decks.
This last one is a personal indulgence; Yours Truly grew up with the original deck.
More on card design: How a Health Axiom Card is Made
In January, we offered a three-part series on the future of design for the patient experience, a topic on the minds of everyone involved in healthcare. Here, we revisit the themes of each article and invite you to read them—for the first time, or again—and consider the possilibities for emerging technologies and design.
Patient experience is part of a larger ecosystem. If we desire better care, quality clinical experiences and good clinical outcomes for patients, we must contemplate designing for a complete patient experience—from process to system to built environment—that emphasizes usability, functionality, and even beauty.
The revolution in mHealth and sensor technology makes it possible to achieve greater patient engagement outside of the traditional confines of the doctor's office. The healthcare system must exploit technologies that make getting and using data more seamless with other tasks, like goal-setting, fitness-tracking, and calorie budgeting. In a similar fashion, increased transparency around cost enables better healthcare decision making.
Invo’s design philosophy for the patient experience is articulated in our Health Axioms, which speak to critical areas of patient engagement, adherence, and clinical design, and are meant to inspire and support a healthy lifestyle outside of the health system and doctor's office. When patients are involved in their own care, they manage conditions better and they need fewer visits to specialists and hospitals and fewer tests. Designers must strive to create simple, accessible ways for individuals to incrementally change behavior.
New software applications address long-standing problems in American healthcare delivery from a patient perspective. These examples support building knowledge around personal health factors, pricing transparency, and clarification of the billing process.
A web application that enables members to share their data including condition, treatment, and symptom information, so that they can monitor their health over time and learn from each other.
An open source software tool for visualizing a patient’s complete range of health metrics.
Platform comprising a suite of tools for educating patients around healthcare costs including prescriptions, medical procedures, and dental and vision services, with results that are based on an individual's plan, network, and location.
To learn more about Involution Studios in the healthcare world, visit our Healthcare pages.
We’re big fans of Susannah Fox.
Lucky for us, Susannah Fox has been a big fan of the Health Axioms. Not only has she provided insightful feedback, she recently suggested a concept that has now launched as a new Health Axioms card. Here’s how it happened.
First, Susannah tweeted her idea.
Slow down? Brilliant!
Sarah Kaiser sketched. Reviewed. Talked. Thought. And sketched some more. Out to Susannah for feedback.
Susannah replied with much, much more than just design feedback. She offers her own experience and a favorite poem by Grace Paley. Her message has a certain calming effect in itself. This is the kind of design conversation that keeps us going.
More sketches go out.
The reply is succinct, to the point, and exactly what we love to see.
More talking and thinking. Narrowing down the concepts. Refining the drawing.
And we are back to Twitter, closing the loop with the final concept.
The conversation continues.
Let us know what you think of Slow Down. And special thanks to you, Susannah!
The card design is ready, but there is still work to be done. Jane Kokernak works her research mojo and editorial magic to craft an elegant, straightforward story that tells how to apply the health axiom for positive behavior change.
You need a joint replacement. Or your dad had a stroke. Or your six-year-old was just diagnosed with type 1 diabetes.
Can you expect your care team to provide information that will help you to understand your condition? How will you know if something is wrong and you should seek help? How do you know what to ask your loved one's caregiver? What do other people do in your situation?
It’s well known that patients stay healthier when they are informed. Health literacy is key; if you are not able to obtain, process, and understand basic health information and services, you will be ill-equipped to make decisions regarding your own or the health of your loved ones.
Patient education plays an important role in a number of Involution designs. Here are a few resources we’ve found.
The American Medical Association (AMA) has been a leader in addressing health literacy and patient safety and offer a number of health literacy educational tools.
drawMD enables clinicians to simplify and explain medical concepts visually, customizing in real time in coversation with a patient.
Around the Studio: Continuing Efforts in Open Government provides a look at how the City of Asheville, NC has launched an online visual financial tool based on the work of Arlington Visual Budget.
You may remember our work with the Town of Arlington to produce the award-winning Arlington Visual Budget, an open source web application that creates an easier way to communicate complex municipal financial information. The app has been well-recieved here in Arlington and is being explored by other communities as far away as Asheville, North Carolina.
Last summer, working with the code from Arlington Visual Budget (AVB), volunteers from Code for Asheville and the City of Asheville collaborated in an experiment in civic engagement and open government. They were motivated by the same principles that drove the work on AVB, wanting to contribute to “the conversation within the Asheville community and between the community and the government which serves it."
Engineer Eric Jackson of DemocracyApps recently spoke with Invo developer Craig McGinley about his work on the Asheville project. He explained that they streamlined and changed the design of the AVB, adding new features like a “What’s New” section, which displays recent budget changes, and a Resources section that includes “gory details” such as descriptions of the budget and organizational structure. Prominent buttons saying “How do I get involved?” and “Let me contribute to the conversation” encourage and facilitate citizen engagement.
According to Eric Jackson, this project and others like it don’t just passively present data to citizens. They give more than answers—they prompt and encourage questions and individual involvement in local government. By connecting open data to people’s lives, such efforts enable citizens to learn, both from data they see and from data that is missing. Like the Arlington Visual Budget project, the Asheville team intends to expand government transparency app use and development. And, like Involution Studios and the Town of Arlington, the City of Asheville will continue to work with their technical team to update and improve these innovative open government tools.
So why waste valuable character space and SEO just to state the obvious? Starting now, we’ll still give you a quick run-down of the week’s articles and share a few of our latest web finds. We just won't tell you that it’s Friday.
Open government is on our minds often here at the studio, what with our work on Arlington Visual Budget (more). The City of Cambridge, MA is launching a new democratic initiative that gives Cambridge community members the power to decide how to spend $500,000 of the City’s FY 2016 Capital Budget.
We’re curious about apps that relate to emotional status. Enter Thync, a wearable device that uses neurosignaling to shift your mood.
Still in a bad mood? Is it the problem with pasting vector art into Photoshop, hmm? Now you have a neat solution.
Check out The Digital Life: Is Leisure Dead? Exploring Time Poverty in the Digital Age. Jon and Dirk discuss the design of time, and in particular, the rampant busyness of the digital age—what has been described as the time poverty of knowledge workers.
The fifth in our UX Maturity series, Best Practice, provides some concrete advice for positioning your organization for UX excellence by adopting a best-practice approach.
On Monday, Dirk Knemeyer shared his short list of books for enriching your knowledge, practice, and imaginative life with Of Zen, Big Data, and Infovis in our Around the Studio spot.
Today’s titles include classics with a more temporal perspective (both real and imaginary) and a mix of Zen koans and big-data thinking.
Paul Heckel’s book was so far ahead of its time—the first edition was released more than 30 years ago. While the examples in it are dated, the principles are as fresh as ever. And while the very framing of the book, “friendly,” seems quaint today, it holds a wisdom that you can learn from.
This tiny book is packed with hundreds of Zen koans—little riddles that lead one to insight. From a mix of traditional sources like the I Ching as well as unconventional inspirations like John Lennon, author David Schiller provides inspiration, a challenge, and enlightenment all in one.
OKCupid founder Christian Rudder takes a deep dive into big data to reveal very personal things that big data show us about people.
Edward Tufte is the rock star of information visualization and this is the best of his four books. Smart, beautiful, and informative, anyone who wants to understand communicating with information should own this book.
If you are a fan of George R. R. Martin: With Season 5 of the HBO series ready to begin in April, now is the perfect time to pick up this ponderous tome—the one that will cover many of the storylines soon to follow.