Supratim

Remove Unnecessary Complications

mail@heysupratim.com — Fri, 03 Jan 2020 00:00:00 GMT

Its a slow process

As a new designer, we often feel we aren’t thinking critically enough. Even for the first iteration of our design, we decide to fixate on brainstorming. We think we are making progress with our design but more often than not, we keep raising more questions about our first version. As simple as it sounds, the solution to this is “Iteration”. You have to learn to make progress in versions.

Almost all major product decisions are a result of longitudnal smaller strides. Your first version should answer the top-level requirements of a brief. I have been part of design showcases and critiques where designers missed obligating to primary revenue-stream/business goal because color-scheme correction became top priority.

A strong structure

Get a strong information architecture set up before you wireframe other components. A well-formed element and information hierarchy for your design can help negotiate design conversations better. Once you have the IA set up, its time to stop worrying about radical changes to page midway in your design. This is also important to keep good designer-developer relations. Being a developer myself I can sympathize the pain developers feel when they see a big page structure change in a minor design refresh

Normalize

Learn to normalize design conversations. It’s going to sound funny but not everything everyone says is worthy of incorporation into your design. If every major product had everything everyone thought should be there in that product. All products in this world would look something like this Frankenstein’s monster. As a designer, you have to learn to accept and reject certain conversations or certain aspects of a conversation that can influence your creation.

Tooling Nerd

Do not over complicate and stress over your design tools. Its true tool selection is important and primarily dictates how fast you can get something done. But having a counterproductive discourse around tooling is plain ridiculous. It’s like rejecting to construct something great because you dont have fancy builder's kit.

Communicate Effectively

Learn to write and communicate effectively. A great starting point will be to listening to someone complete their part of the conversation and then taking 20 seconds before you speak. This might sound rudimentary but this is something I am never done learning. I constantly find myself in situations where a better explanation or defence for my design would have helped me escape tricky situations. An important skill to learn is to argue effectively. A great book that has helped appreciate the effectiveness of taking a strong stance is “They say, I say”. This book, even though meant for an academic audience, has some strong examples and direct methods for effective argument building.

Not your usual design book suggestions

mail@heysupratim.com — Tue, 17 Dec 2019 00:00:00 GMT

Dear Data

A beautiful book written or rather sketched by two information designers Georgia and Stefanie about data visualization. The book is in the form of these postcards that the authors send out to each other with a visualization of a data they decided to track that week. Each week they jointly select one aspect of daily life and depict in the form these hand-drawn visualizations.

The beauty of the book is in the details. How it captures the non-linear nature of the human experience. How it’s always contradictory. Throughout the book, you will see this almost poetic display of visual metaphors. Each of the designers has this distinct style and they showcase it in their visualizations. Its a must-have.

Resonate

This is a book on visual storytelling and let me tell you one thing about it. Its so good. Nancy Duarte writes about the art of influencing an audience with storytelling. The book tells you about the fundamentals of laying out ideas to create a narrative. Something that I remember is how you should also plan for the journey your audience takes along with you. For effective storytelling, you have to take them from one manner of doing to a new manner of doing something

You also need to acknowledge the sacrifice an audience has to make to adapt your narrative. Its a natural tendency of humans to resist your design and find errors in it. You should contemplate all the ways in your audience might resist and make sure you yourself address those concerns as a first step.

Sketching User Experience

This is a must-have book for all User Experience Designers. The book is primarily about techniques and process that uses sketching to put “experience” front and centre in our design process. One of the advantages of sketching is their ambiguous nature. If they don’t specify everything, they tend to encourage diverse interpretations which can help the design process. One of the examples that stood out was effective story-boarding for sketching the interaction and experience of using a product.

He also talks about paper-based flipbook animation for defining direct manipulation based sketches. Lets say, you had to define how a user scales a rectangle in a graphics app that you are designing for. A paper flipbook style animation can help you here

Handbook of Usability Testing

Usability testing is fascinating because it lets you see the design through your user’s eyes. It brings a unique value to the design process that no amount of discussion or debate would ever surface. This book starts out by talking about a great situation that might make you convinced to do more usability testing. Lets say, a user receives a prompt on an application that you designed, that asks them to “Hit enter to default”. Someone could choose to reply something as strange as “I have never defaulted to anything before and I am not going to start now”. How do you accomdate for that in your brainstorming session? A usability test is your best bet to uncover something like that.

The book talks about what usability testing is, when should you test for your product, How to develop a test plan, what are the methods of testings, How do you find participants and much more. For me, the most valuable part was about the skillsets required in the test moderator. The person overseeing the testing should be a people person and should be empathetic to the hurdles users face when they are performing the task.

Emotional Design

Emotional Design by Don Normal is a wonderful take into observing how designers can create usable and also emotionally affecting products. The book details out the 3 different aspects of design — the visceral level which concerns with the appearance of a product. the behavioural level which has to do with the effectiveness of using a product and the reflective level which concerns with the contemplative part of a design. A design artifact tells a story and connects with the user if it affects on any of these emotional levels.

An example of this could be Instant messaging which may attract you on a visceral level by being this new form of communication where you use stickers, gifs, video and audio to deliver your message. On a behavioural level, it’s letting you communicate while you perform other tasks, its hidden from sight and is available when you need it. On the reflective level, it’s letting you stay connected with friends family no matter where you are. That short buzz is letting you know that someone “is there for you” at this moment

I hope these suggestions proved useful to you. Keep learning, suggest some other good books that you know of.

Comparing Alan C Kay and Engelbart's future vision of Computing Artifacts

mail@heysupratim.com — Mon, 09 Dec 2019 00:00:00 GMT

Abstract

"A Personal Computer for Children of all ages" by Alan C Kay was a fictional account of a machine of the future written for the ACM National Conference 1972. "Augmenting Human Intellect: A Conceptual Framework" is a report by Douglas C Engelbart on his vision for machines that increase human effectiveness. In this paper, we compare the abovementioned papers based on their philosophical views, frameworks presented, technical implication and intellectual implications.

Philosophical Perspectives

The conceptual framework put forward by Engelbart aims to increase the intellectual capability of humans to solve complex intricate problems of society. The capability mentioned in Engelbarts envisioned framework (and the artifact associated with it) is man's ability to comprehend better and faster. As every activity performed gains a global platform for execution, the urgency of finding solutions to complex problems becomes higher. The proposed system in his paper aims to augment the intellect by extending his mental, motor and sensory skills. If done right, such an augmentation of lower level skills can chain up to give coordinated greater benefits. The end goal of the study was to foster the need for doing research and development in the domain of intellect augmentation. Finding upper limits to effectiveness of human intellectual capabilities and developing new systems that can match those limits. The framework begins by stating our capability of processing information in two ways. One via conscious mediation and one via self-generated information. We comprehend situations by using a composition of basic cognitive abilities. But such capabilities can extend through 4 kinds of augmentations- Artifacts, Language, Methodology and Training. Artifacts are the physical objects we manipulate, Language are the tool we use to give form to concepts, Methodology are the procedures we use for problem solving and Training is the upskilling required for increasing our effectiveness. Because human beings comprehend and execute in small steps towards total fulfillment of problem domain, there exists a hierarchy for the processes we take for solving these complex problems. Engelbarts artifacts aim to cater to all these process hierarchies and perform a process in any level of this repertoire.

Alan Kay in his fictional envisioning portrays his artifact as a portable information manipulator. He hints at a near future fruition of the machine as its not far from the progressive reality of the time. Unlike Engelbart, Alan mentions about the issue with technological cures. They do not cure the source of the problem. With the perspective that everyone has a different model of any situation. There exists a need for technology to enable better understanding of the model of the situation. This is a parallel to Engelbarts view of comprehending complex situations. In pedagogical contexts, technology should be able to deliver qualities of a teacher who understands both his/her own model and child's model of any situation. The author like Engelbart believes learning augments through technological media. Like a child who is an actor of his surrounding and keeps learning from it continuously. There's a similarity in the viewpoints both authors carry about human learning process. We go from point A to B by understanding practical notions of the path. The Augmentation of Human Intellect Essay talks about multitasking capabilities of human as a higher order composition of basic skills. Similarly, Alan mentions that humans can benefit by keeping a lot of independent ideas in their heads at the same time. More so, if used for reflexive communication.

Frameworks

Engelbart states that intelligence runs through a hierarchy of processes. He believes intelligence attributes to the organization of knowledge and capabilities across these levels. What he describes as synergism. Where discrete processes handle their job in a coordinated fashion. The conceptualized system seeks out to amplify intelligence in a manner that someone augmenting their capability using the artifacts can perform better and faster than unaided people. This system is what he calls the H-LAMT systems. A two-domain system that comprises of the human process and the artifact processes. There's a flow of information, an interaction between the two processes where the man-artifact interface comes into place. H-LAMT intends to strengthen the individual processes and enable more synergy between the two. The framework draws its history from humans learning to develop capabilities to manipulate abstractions, concepts, symbols and externalizing those symbols and manipulating them. For the author, the conceptual framework favors the viewpoint that symbols and language help in evolving our cognitive capabilities. In this regard, they hypothesize that the manner in which humans use language and consecutively their intellectual ability is directly affected by their ability to manipulate external symbols effectively. Their artifacts and machines want to automate this external symbol manipulation.

Alan Kay in his essay doesn't mention a lot of any established framework but he mentions that if technologists want to create a box that works wonders. It should be for delivering attributes in a process that is not opaque to individual understanding of situations around us. Unlike Engelbart, his notion for human capabilities aren't as categorical. He believes an artifact like DynaBook can help augment the practical notions of getting from one level of a solution to another deeper comprehensive level of the same. He describes humans as actors rather than objects of our intellectual capabilities. Because they are constantly learning. He believes that by using a machine such as DB, we won't fear the process of acquiring a model of our situation. He specifically talks about teaching and learning which can use technology. While Engelbart focused on both the human and artifact components of this whole system. Alan mentions that it's the device which has a bigger role to play. It's as if our existing capabilities had nothing to do with our progress. Alan Kay fails to mention the evolutionary nature of learning. The multi layered process of pursuing higher intellect.

He later talks about Interactive learning, which can help us stay intrigued in conversations that are parallel to reality and question physical behaviours of objects. He mentions how DynaBook can connect to services like liblink and surface all past knowledge. This is a weaker argument in comparison to how Engelbart describes our evolutionary path to organize process hierarchies. The latter argued that our intellect depends on physical artifacts, our language, abstractions and our training. Alan also talks about humans being actors of our environment and how we keep changing our roles. A good environment for learning provides for avenues that allow us to change roles without reproach. This is something that Engelbart doesn't talk about when he mentions humans in his two-domain system. The way artifacts will evolve to accommodate for our intellectual limits, humans might find new limits as well.

Technical Description

Engelbart's hypothesized augmentation system had two screens placed horizontally on a flat surface, like an architect's drawing board. There were keys attached to both display frames on the side. There was also an always accessible light pen. The pen was in a natural resting position which allowed the user to reach it with less effort. Compared to this the DynaBook machine envisioned by Alan kay was a portable artifact weighing less than 3 pounds and had a display made out of phase transition liquid crystal. Compared to the augmentation system which didn't mention any power requirements, this required ½ watt power for running a 512 x 512 panel.

Engelbart goes into detail discussing the interaction mechanics of the device in repertoire hierarchical model. He begins with the composability of the symbols on the frame. Like assembling text was as easy as virtual text entry. There was no need to break lines as there was an automatic carriage return service. You could also lookup dictionary references and thesaurus functionality using the interface. The most powerful way of composition was using auto expansion of stored text abbreviations. DynaBook, was also capable of storing and editing text files. To enter text entry, you pressed on a thin pressure sensitive panel which emulated a key press using loudspeaker noises. The DynaBook could also link to the library services and retrieve information.

Talking about symbol manipulation, the augmentation system allowed easy light pen assisted deletion of words where the user would move the light pen in a stroke to delete a word. It even facilitated easy undoing of mistakes. This made the symbol manipulation far more powerful than a traditional paper pencil scratch pad. The interface also allowed for movement of words using two light pens and margin and line length alterations. There was also a proposed find and replace functionality. DynaBook didn't carry a lot of descriptive information about its interaction capabilities but it did mention that the book facilitated easy sharing of stored databases to other users and there was a filtration mechanism to aid in searching. There was also removal storage of one million characters that used in a strategic manner to reduce search latency. The language design for DB allowed for easy naming of objects and classes and retrieving them later by supplying their name. The objects were each individually controllable and the system allowed evaluation of any control path to show the messages passing between objects

Engelbarts system also allowed easy manipulation of conceptual networks. This was to support the knowledge discovery process used by humans, unstructured and not sequential. Engelbart called it the cut and try process. Drawing links between symbols would layout a node tree structure in the computer. This showed the logical flow from one statement to another. The DynaBook also allowed viewing topological information that helped aid in the operational model of knowledge discovery.

Both DynaBook and Augmentation system carried a symbol structuring notion. This meant that you could comment on the substructures and group symbols if possible. Processes could be either composited into a more higher-level process or broken down into more humanely manageable tasks. The DynaBook achieved this by maintaining state and logical attributes of every process. There was input, output and memory associated on the file system with every process on the system. If you composed these processes you could reuse it like the Augmentation system.

References

Engelbart, D. C. (2001). Augmenting human intellect: a conceptual framework (1962). PACKER, Randall and JORDAN, Ken. Multimedia. From Wagner to Virtual Reality. New York: WW Norton & Company, 64-90.
Alan C. Kay. 1972. A Personal Computer for Children of All Ages. Proceedings of the ACM national conference, https://doi.org/10.1145/800193.1971922

Smart home design can be dumb

mail@heysupratim.com — Thu, 28 Nov 2019 00:00:00 GMT

The new hip and happening buzz around designing homes, neighbourhoods and cities is an idea called Smart Design. Here, by “smart” we mean the optimized use of energy and minimizing a person’s interaction with their homes for the sake of comfort. These system use thermostats and sensor-driven devices to operate. According to Modern theory, this is architecture’s new relationship with technology.

The real problem with this relationship if you will, is the reduction of home occupant’s involvement in the creation of their comfort. Smart systems are often not conforming to the way prefer to regulate comfort. In a study conducted in Europe, residents were not even aware that their buildings had smart controls. People have a hard time understanding the workings of a smart interface with a mechanical system like lights, ventilation, air conditioning.

In a book that I read a while back, called the Smart Utopia, I discovered that people are still skeptical to live in a smart home where they transfer their control of comfort to some technological system. This shows that a designer's intention and people's usage, dont often match when it comes to using these smart home systems. This is because, the designers are imagining a typical household energy consumer as this “data-hungry and educated decision maker of the house, who is also techno-savvy and would adapt his or her lifestyle around energy savings. But, this doesn't correspond to each of us.

The rethinking of “smart systems” should be following our knowledge about heating, cooling etc. The building, neighbourhoods should be adaptable. The design should not disable the flexibility of an occupant to suit their own needs of light, air etc. Smart is dumb if it means locking people into predetermined patterns and disabling our use cases. Design should be cognizant of people’s right to exercise their knowledge when it comes to using any service.

I think “Design is smart” when all decisions of control don’t get snatched away from the user. Instead, you control for the cumulative measure but let the user do the fine tuning.

Douglas Engelbart's "Augmenting Human Intellect" and current UX practice

mail@heysupratim.com — Thu, 21 Nov 2019 00:00:00 GMT

Douglas Engelbart's classic paper on Human Intellect Augmentation proposes the need to solve complex professional problems in different avenues. In his list of professions that can use his proposed system effectively includes Designers. It will be interesting to draw a parallel between Engelbart's proposition and current Design Paradigms and Workflows.

The paper points out the need for such a framework. The population and products around us are increasing at an alarming rate. Its creating this urgency of comprehending complex problems and finding solutions fast. This need extends to Users facing problems in Digital Design too. We are tackling issues of a diverse audience, languages, and differences in the access to technology. Thus, every User Experience touchpoint becomes a complex problem to solve. Design Sprint Cycle is an example of current design practices that emphasize such faster ideation. This process can provide a rapid and better comprehension of user needs and directly augments design intelligence. Stakeholders bounce off ideas that help gain better insights faster. It uses brainstorming as an artifact that helps externalize information on sticky notes or digital notebooks.

Engelbart's conceptual framework consists of Artifacts, Language, Methods, and Training. Components which increase human intellect. If we consider each factor individually, we can find interesting parallels for each in today's field of Digital Design.

Artifacts - These are physical objects that provide humans some augmentation means to derive solutions. A recent example of this can be the Apple iPad Pro with the Apple Pencil and procreate application which allows for on the go creation of designs. Such a device provides a means to solve design problems irrespective of their location. It allows for information storage, information handling, and information display. Every activity being essential in the eyes of the author for an artifact computer.

Language - It's the way words and symbols attach to concepts. Teams today have design systems built around a specific style-guide which allows the designer to not worry about small units of design and their form. They can instead focus on solving the User Facing problem and gain insights.

Methods - An individual working to better a User Experience has to organize his methods so that it's goal-centred and solves the problem. IDEO's framework of Design thinking is an exemplar guiding method. The approach asks you to empathize with users, define the problem, ideate, prototype and then test the solution.

Training - This is the conditioning needed by humans to use artifacts, language, and methods. Material Design utilizes a living design system that takes cues from the traditional print design so that designers don't have an abstract concept to understand. Concepts of ink, shadows, and elevation make for a comprehensible User Interface.

This system puts a lot of focus on generating newer artifacts allowing for manipulating text/ images with low human effort. Generative design and user-facing tools like Autodraw are examples of similar artifacts of research in the field of digital design, which allows for the faster synthesis of intelligence without much work. The system also specifies the two domains of methods used. The human processes and artifact processes. UX design remains true to a Human-Artifact process. The mediating section where cooperative interaction between the two domains occurs. Humans provide constraints to the system and the system generates the design for them. A hint of this phenomenon is visible in Responsive Design where constraint-based design is a major element.

Engelbart lists a concept of capability hierarchy which underlines the processes and actions used to augment intellect. The Discussion of the same in the context of current Design practices follows here

Mental Structuring: This refers to the internal organization of conscious and unconscious mental images that provides intuition, judgment, and inference. Design Specifications reflect such kind of structuring. It involves paraphrasing user needs into directives for the design team. It's not so much as a tool for judgment rather a guideline for working towards the right human needs.

Concept Structuring: This refers to the capacity to which one can grasp a tool and use it via mental mechanisms. UI designers use representative texts, labels, iconography to abstract out concepts to some visual element. This is also evident when designers wireframing where they bock components for the structure of the final design.

Symbol Structuring - Its called an important part of the language which allows representation of the concepts. Similarly, Designers resort to using Atomic Design where individual components are part of a library which you can use to generate complex combination with ease.

Process Structuring - This structure deals with the manipulation of the symbols to explain concepts. Current practitioners use iterative design to build the best product. They do AB testing and use Prototyping tools like invision to visualize the way the software interacts.

To conclude the comparative analysis. UX and UX practices are directly or indirectly using all components of the proposed conceptual framework to better the process and produce human-centred products. The hurdles of setting up tooling and workflow software are less now. Designers can now concentrate on breaking down user-facing problems and designing better solutions.

References

Exidesign: copy and transfer styles across different websites

mail@heysupratim.com — Sat, 19 Oct 2019 00:00:00 GMT

Abstract

Today, designers need to iterate over their mocks and this involves a cycle of referencing other style guides and adapting it to own use cases over a long period of time. Personal preferences and intuition cannot enable complete automation of this interface design process. One way of overcoming this problem is enabling faster design adaptation tooling. A system that designers can use to reference and adapt designs at a rapid pace.

In this research project, I explore the research design process, implementation and preliminary evaluation of a website design style transfer system called Exidesign. The system allows selection of a reference website design and a target design. The output will be a website with content and components from the source website shown in the target website's style. The referenced components of style are typography, layout and image styling.

Introduction

The traditional process of designing a website begins with the brainstorming and ideation phase. This process requires the designers to reference inspiring examples and generate a creative seed for their own design. This is a time-consuming step where the designer is using cues from existing website styles to generate his/her own visual language. The reference styles might be unique in their nature of handling either navigation, typography, layout or specific element styling. To fully test this reference design with its own content, designers have to go down to the CSS and Markup code to understand the implementation.

Automatically creating entire designs can lead to conflicts with a designer's personal preferences. A controlled environment of a traditional design tool like Sketch does exercise the preferences better. But, an ideation and referencing automation process can help surface different styles with the core content remaining the same. Our tool, Exidesign, facilitates this through style transfer. The user inputs one source website and one reference website into the tool. The system then transfers content from the source website and shows it in the target website's style. The components of the website considered in the style transfer are layout, navigation, typography and images

The underlying architecture of the tool optimizes a component match between source and target designs. We use a set of visual and semantic and relationship cost features to determine a good component to component match between two given websites. The final mappings between source and target websites produced use a single layer perceptron with the trained weights to optimize the visual, structural and semantic cost.

The primary research goal of this tool is to test the system's capability to reduce time taken to ideate website designs. Unlike parametric design tooling (Jabi, 2013). Work here is for improving referencing and adaptation workflows for interface design. Second, is to explore how modularized design component references can generate good design inspirations. This is to do with the qualitative aspect of dealing with more than one references for style transfer. A qualitative evaluation of the generated design will give valuable feedback on the output design the tool generates.

Figure 1: Interface of Exidesign with controls for specifying source and target websites

Pix2Code(Beltramelli, 2017), is a system that uses convolutional neural networks to generate usable front end code from an interface screenshot. The system uses a CNN to perform unsupervised feature learning for mapping the raw input image to its feature representation. A recurrent neural network takes the textual feature description of the image to create a DSL (Domain specific language) representation. The DSL (See Figure 2) is then passed through platform specific convertors that takes the DSL representation and transform it into UI code for specific platforms. XML layout for android and swift storyboards for iOS.

Figure 2: GUI and DSL in Pix2Code

Webzeigeist (R Kumar, Satyanarayan, & Torres, 2013) is a design repository that crawls visual and semantic features of websites. The authors developed a system for mining design data of websites at a large scale. The result was a repository of 100000 web pages elements and their characteristic attributes. The data comprised of the document object model for each page along with a set of semantic and visual features that described the page. They seprarated the CSS and image assets for third-party developers to access modular components of each design through their public API. They also processed and stored the visual segmentation of the websites and calculated some derived features like page node counts, a histogram of gradients for the images etc. Beagle (Battle et al., 2018) similarly tried to crawl and label interactive visualizations in webpages. Their research contribution is to find what visualizations are prevalent in website designs as well as what category of visualization idioms best suit a given task.

Outside visual features, Lim et al tried to understand the structural semantics for the web (M. Lim et al., 2012). They used a large collection of manually labelled page elements to train a support vector machine. Using this, they were able to give render time structural semantics of any webpage. You can see the example in Figure 3.

Figure 3: Structural semantics of pages

A strong motivation for building a design tool that assists in building off from reference designs is the speed and utility it provides to novices and experts alike. Lee et.al present a qualitative study to explore whether people can realize significant value by designing through example modification (Lee, Srivastava, Kumar, Brafman, & Klemmer, 2010). They found that people preferred designs created with the aid of examples and users prefer adaptively selected examples to random ones. They also concluded that users make use of examples when creating new designs. Prior studies also reveal that users generate diverse ideas when presented with diverse examples beforehand and generate more creative ideas if shown creative examples pre-evaluation (Siangliulue, Arnold, Gajos, & Dow, 2015).

The first kind of website style transfer is user-controlled and manual. CopyStyler (Fitzgerald, Michael J., 2008) is an example of such a user-driven browser-based tool that allows novices to have two webpages side by side for copying CSS styles between them. It used a browser extension to provide an in-browser GUI. This was a manual process of selecting source and target for transferring the CSS styling. Our tool removes the need to do any such manual transfer.

Figure 4: Interface of CopyStyler

Unlike manually initiated style transfer, design tools can also suggest refinements passively. DesignScape (O'Donovan, Agarwala, & Hertzmann, 2015) is a system that aids the novice users by suggesting layout refinements in their design. The tool provides two kinds of suggestions. First, simple refinements that improve the current structure of the design. Second, changes that reposition components on the fly as the user continues to add elements to the page. In a similar vein, SUPPLE(Gajos, 2006) presents automatic interface generation for cases when device constraints and end-user characteristics are not unknown. It searches for the interface that best matches the device constraints and target user properties. The search uses a declarative description of the device characteristics and the user and device-specific cost function to generate the interface. User traces of system usage is also used to improve the interface transitions as the system matures. Another recent contribution to automatically generate interface is Brassau(Fischer, Campagna, Xu, & Lam, 2018). A design tool that converts natural voice commands into the appropriate GUI.

Instead of generating or suggesting entire interfaces, existing publicly available data can help improve portions of the entire design. Like font pairing between different sections of the document. Automatic font pairing (Jiang, Wang, Hertzmann, Jin, & Fu, 2018) through the use of a corpus of knowledge on visually pleasing font combinations helps suggest interface variations as well. Jiang et al. use k-NN and an asymmetric similarity metric to learn the visual relationships between fonts. Apart from fonts, the spatial, visual and structural attributes of all components, also play a role in deciding the importance of the design. Training a neural network on the human-annotated importance of components has shown progress in predicting the value of graphic design (Bylinskii et al., 2017). The authors claim such prediction about the order of value of different components in a design can help with automatic retargeting of layouts. (See Figure 5)

Figure 5: Heatmap of importance in a design

Use of the attributes of design components can improve browsing of example designs. Style based search(Bhardwaj, n.d.) uses recurrent neural networks to train a network on captured style attributes of web pages and then backpropagates the learned system parameters to make style based search possible. With the help of the learned parameters, the system allows for example-based querying for designs in a digital gallery. An example query being browsing webpages that have 3 columns and a big hero image. This kind of querying is not possible in traditional text-based search engines. In some situations, the organized attributes of reference design are not available in an actionable format. Like a flattened bitmap or raster screenshot. In this case, expert users, in particular, recreate the reference design in an interface designing tool, to reuse parts of the reference design in their creations. Rewire is an interactive system that allows designers to convert screenshots into usable vector designs (Swearngin et al., 2018). They convert each component in the raster screenshot into an editable vector representation. They test the system by integrating it with UI design tools and comparing it with using examples without any help. A real-time example-based help while designing can steer designers to create a visually pleasing interface. An example of such a tool is Sketchplorer (Todi, Weir, & Oulasvirta, 2016). A real-time layout optimizer that infers the designers intended action and performs local optimization to improve the final layout. It uses a predictive model of sensorimotor performance and perception to perform these optimizations.

Understanding the attributes and components which contribute to visual significance in webpage design is a complex task. This is because modern web documents have a deeply nested and complex hierarchical structure. Ply (S. Lim, Hibschman, Zhang, & O'Rourke, 2018) tries to tackle this problem by using visual relevance testing, a technique to identify the properties which have a visual effect on the page. It hides irrelevant CSS code and presents relationships between the attributes.

The most important component of style transfer in website design is the layout and structure transfer. Bricolage algorithm (Ranjitha Kumar, Talton, Ahmad, & Klemmer, 2011) uses structured- prediction to create coherent mappings between pages by training on human-generated mappings (See Figure 6). The main contribution is using ancestry and sibling relationships in computing the cost of each source-target node pair. The system directly transfers the innerHTML of the source node to the target node. This presents some rendering issues like text overflowing and visual artifacts in the positioning of content. In Exidesign, we overcome this issue by sanitizing content according to the virtual DOM constraints of the target node. We focus on text, link and image tags thereby preventing inconsistent tag matches.

Figure 6: Bricolage in action

Layout matching and inferencing in interfaces have extensive literature. Layout inferencing when components use absolute positioning can be useful if represented as a managed layout with views and components in a hierarchical structure. This makes porting of views based on different configurations easy (Ramón, Cuadrado, Molina, & Vanderdonckt, 2016). Familiariser (Todi, Jokinen, Luyten, Oulasvirta, & Fi, 2018) is a browser-based tool that reorganizes the layout of a page based on the historical pattern of interacting with different pages by a user. It uses concepts of familiarization used by the human visual system. The idea is to present to a user, a familiar-looking layout for any new design they encounter.

Figure 7: System architecture of Exidesign

System Overview

The Exidesign architecture has 3 main components to it.

Data Collection which includes page segmentation and feature markup
The single-layer perceptron learning stack where we reduce our visual and semantic costs.
Reconstruction of DOM with output mappings from step 2 to transfer content between pages.

Data Markup

To build the dataset, we use puppeteer, a NodeJS library that allows running the Chrome headless or in other words, without GUI. The library provides a high-level API for controlling any web content shown in a browser. It provides event listeners for content loading in the DOM and allows DOM processing through injected JavaScript scripts. We configured Puppeteer to run with a viewport of 1920 by 1080 and bypassed Content Security Policy as that interfered with the loading of remote assets and images in our pages. The standard flavour of jQuery was also attached to every page we navigated for use in DOM object manipulation. We used the NodeJS API for reading files from the filesystem and to load a text file with a list of line separated URLs. The list comprised of landing pages of some popular websites to constrain web content to be static. Apart from landing pages of popular internet services and digital products, we also crawled a set of 100 aesthetically designed homepages from gallery websites (see Figure 8). The selection criteria for choosing the webpages were -- Clear textual elements, bold and diverse imagery, simple navigation elements and a simple visual structure to elements on the page.

The node segmentation begins with puppeteer passing the window, document and root node information to our segmentation logic. Our webpage segmentation takes ideas from Block-o-Matic (Sanoja & Gancarski, 2014). The high-level working of the system is as follows. We parse the DOM tree for valid content elements, which includes a series of HTML tags that contribute to the content on a page. IMG, A, LI, DT, DD, <H1-H5>, P are example of such tags. We ignore tags like HTML, SCRIPT and LINK as they do not contribute to any visual content on screen. Tags that have the CSS property "display: none" stay hidden on the page.

Figure 8: Gallery of landing pages from lapa.ninja

Post this, we sanitize the content-container relations. This is because all modern HTML pages have deeply nested container tags that might not contribute to a content's actual container. Also, we reorganize any content that is within 40 px of each other under one parent. They get sub-contained into one logical container (See Figure 9). The logical sanitized tree is then processed in-order for attribute information. First, we filter and parse all the link nodes, then the image nodes and then all text nodes. The set of visual features we process for each node is common across the tree. The visual features include viewport coordinates, width and height, font size and font weight, font colour separated into the average R, G, B and alpha values. We use the computed style attributes in the page window information passed by Puppeteer to capture property values of a node. We use jQuery offset, and height and width functions to extract position and size information. For capturing the text nodes, we use the DOM text nodes filter as it proved much faster than manually scraping text elements. For every link node, we extracted its text content separately while parsing links and marked each link node as visited. This allowed for ignoring elements whose parents were link tags while extracting text nodes. For processing image nodes, we decided to exclude SVG path tags as comparing vector image elements to raster elements was not in the decided scope of this work. The URL to the image source was also captured by the value of the property src. The caveats to this were tags with images in the form of background-image and srcset. We handled those separately.

Figure 9: Example of the web page segmentation

Some of the structural features we captured were tag type, numerical and in page positional identifiers. For a unique reference to the element location on the page, we used their XPath reference as identifiers. XPath is a querying format representation for selecting and identifying nodes in any XML and XML-like documents. In the same vein, the XPath of their parent container is also captured. For a numerical unique identity for each node, we use an MD5 hashed output of their XPath. Each URL processed has its nodes and their attributes stored in a JSON representation in the file system. We use MongoDB for easy JSON storage.

Apart from the visual and structural attributes, we worked on an information capturing interface that collects design-related semantic features of every node (See Figure 10). The interface uses a Chrome extension that iterated through our segmented nodes. It prompted the user using our capturing interface, to categorize each element into its most fitting role on the page. After iterating, we settled on the following semantic categories. Logo, Primary Call to Action (CTA), Secondary CTA, Login, Header, Hero text, Hero image, Value proposition, Illustration, Product showcase, Navigation, Contact information, Social media, Footer link. There can be further categorization possible, but we found that the above categories best fit our initial set of landing pages processed. The capturing interface in its current state iterates through all nodes in the page sequentially. Batches and larger in-the-wild delegation can speed up this process. This kind of nuanced semantic categorization of elements helps improve the matching results of our perceptron. We understand that we can also adopt a more rule-based categorization for our nodes and decrease the mechanical effort needed. E.g. link tags in the top 1% of the page can be automatically classified as header navigation. Explicit human annotation of nodes allows for superior categorization and can contribute to much better matching of nodes while training our perceptron. The semantic taxonomy we used borrows terms from design and web development vocabulary. These terms best represent the utility and role of individual components of a webpage.

Figure 10: Information capturing inteface for semantic categorization of nodes

For training our perceptron we recorded node mappings between 20 pairs of webpages marked by a human. The criterion for selecting the annotator was a basic level of familiarity with web design. This mapping used the mapping annotation tool built using puppeteer and NodeJS. The mapping tool used puppeteer to pick any two URLs from the list on separate tabs. A red overlay marked each element. We used their top and left position and its width and height to draw the red overlay. The numerical id was also rendered on top of the boxes for easy identification. The tool iterated through all nodes on the first page and asked for a user input about the corresponding matching node on the other page. The input mechanism is a dropdown list with numerical ids and a no-match case. A mouse-driven side by side view interaction can greatly improve the process of matching nodes. We recorded the mappings as a set of node1, node2 pairs.

Learning Stack

We use all the visual, structural and semantic attributes captured for each node. We construct a feature vector for each node f_n={f_visual,f_structural,f_semantic} where the TAG type is one-hot encoded. We scale the viewport position, and node size and width to be between 0 and 1. Semantic features represent the boolean indicators like isCTA, isHeroText etc. We construct a weight vector w that corresponds to each semantic feature in f_n. All weights initialize with value of 0. At each epoch of the training, we match each node and its feature vector with the closest node in the target node collection. The cost metric we use is the Euclidean distance of the source node feature vector from the target node. We refer to each edge as e, corresponding to a node matched from source to target. The cost of each edge is c_e=wF_T-wF_S, where w is the weight vector. The total cost C_M of our generated mapping at each epoch of training is ∑_ec where we sum up cost of each edge between source and target pages. The weights update at each stage by W_next = W_curr + α_curr(C_HM-C_M), where C_HM is the total sum of edge cost in our human mappings between source and target website and α_curr is the current epoch learning rate. We chose an epoch range of 800 and averaged the learning rate in the last 10 epochs.

For implementing this perceptron, we used TensorFlow and utilized its gradient descent optimizer with a custom cost function as defined above.

Style Transfer

The output of the mapping process is a text file containing the pairs of numerical ids corresponding to the source and target website. We iterate through each pair and retrieve their content and computed styles from the MongoDB instance. The content of the text node is in the label attribute, for link nodes, the text is in label and URL is in the href attribute. For image nodes, we store the image source in the imgsrc attribute. For each pair in the computer mappings, we see the difference in tag type. If both nodes are similar tags, it's an easy content switch. For a non-image node, we overwrite source text on the target. For an image node, we carry forward the src, srcset and background-image properties. If the tags are different, e.g. a source node with a tag type as IMG and a target node with a tag type DIV. In these cases, we use the imgsrc as the background image value for the target node. To find the respective element corresponding to a node, we use the stored XPath reference to uniquely identify the element and then do the content switch. The other preprocessing, we do is render the text range that is within the bounding box of the target element so that we don't overflow the text. In cases where the text is larger than said width, we use CSS ellipsis on the text.

Style Transfer results

Figure 11: Source from baidu.com and style from www.google.com

We ran Exidesign on a testing pair of 10 websites and the example results showcase possibilities of the matching system. Figure 1 shows the simplest case of transferring the style across two popular search engine websites. The logo, top navigation links and primary call to action transfer nicely.

Figure 12: Content from www.coursera.org and style from www.udacity.com

Figure 2 shows more complex layouts. Style of udacity.com on coursera.org content. The highlights of this example are the big hero image transferred and boxed correct (See 4 in Figure 12). The logo (1) and card style links (2) also adapts nicely to the coursera logo and coursera navigation. The most interesting style transfer result is how the partner logos carried across the two websites. Two product landing pages with simple grid-based layout, one primary illustration and one block of hero text also had similar results.

Figure 13: Content from hunchads.com and style from www.advize.ai

The illustrations (See 2 in Figure 13) managed to scale and the hero text (1) transferred to its correct corresponding node on the target page. Like our second example (Figure 12) the partner logo elements also matched.

References

Battle, L., Duan, P., Miranda, Z., Mukusheva, D., Chang, R., & Stonebraker, M. (2018). Beagle: Automated Extraction and Interpretation of Visualizations from the Web. Proceedings of the 2018 CHI Conference on Human Factors in Computing Systems. https://doi.org/10.1145/3173574.3174168
Beltramelli, T. (2017). pix2code: Generating Code from a Graphical User Interface Screenshot, 1--9. https://doi.org/10.1145/3220134.3220135
Bhardwaj, A. (n.d.). Style Based Search Using RNN for Searching Web Design Gallery.
Bylinskii, Z., Kim, N. W., O'Donovan, P., Alsheikh, S., Madan, S., Pfister, H., ... Hertzmann, A. (2017). Learning Visual Importance for Graphic Designs and Data Visualizations. https://doi.org/10.1145/3126594.3126653
Fischer, M., Campagna, G., Xu, S., & Lam, M. S. (2018). Brassau. Proceedings of the 20th International Conference on Human-Computer Interaction with Mobile Devices and Services - MobileHCI '18, 1--12. https://doi.org/10.1145/3229434.3229481
Fitzgerald, Michael J., M. E. M. I. of T. (2008). CopyStyler : Web design by example. Retrieved from https://dspace.mit.edu/handle/1721.1/46032
Gajos, K. (2006). SUPPLE: Automatically Generating User Interfaces. IUI, 93--100. https://doi.org/10.1006/jssc.1998.8014
Jiang, S., Wang, Z., Hertzmann, A., Jin, H., & Fu, Y. (2018). Visual Font Pairing, 14(8), 1--10. Retrieved from http://arxiv.org/abs/1811.08015
Kumar, R., Satyanarayan, A., & Torres, C. (2013). Webzeitgeist: Design mining the web. Proceedings of the ..., 3083--3092. https://doi.org/10.1145/2470654.2466420
Kumar, R., Talton, J. O., Ahmad, S., & Klemmer, S. R. (2011). Bricolage. Proceedings of the 2011 Annual Conference on Human Factors in Computing Systems - CHI '11, 2197. https://doi.org/10.1145/1978942.1979262
Lee, B., Srivastava, S., Kumar, R., Brafman, R., & Klemmer, S. R. (2010). Designing with interactive example galleries. Proceedings of the 28th International Conference on Human Factors in Computing Systems - CHI '10, 2257. https://doi.org/10.1145/1753326.1753667
Lim, M., Kumar, R., Satyanarayan, A., Torres, C., Talton, J. O., & Klemmer, S. R. (2012). Learning Structural Semantics for the Web. Tech. Rep. CSTR 2012-03. Stanford University.
Lim, S., Hibschman, J., Zhang, H., & O'Rourke, E. (2018). Ply: A Visual Web Inspector for Learning from Professional Webpages. The 31st Annual ACM Symposium on User Interface Software and Technology, 991--1002. https://doi.org/10.1145/3242587.3242660
O'Donovan, P., Agarwala, A., & Hertzmann, A. (2015). DesignScape. Proceedings of the 33rd Annual ACM Conference on Human Factors in Computing Systems - CHI '15, 1221--1224. https://doi.org/10.1145/2702123.2702149
Ramón, Ó. S., Cuadrado, J. S., Molina, J. G., & Vanderdonckt, J. (2016). A layout inference algorithm for graphical user interfaces. Information and Software Technology, 70, 155--175. https://doi.org/10.1016/j.infsof.2015.10.005
Sanoja, A., & Gancarski, S. (2014). Block-o-Matic: A web page segmentation framework. International Conference on Multimedia Computing and Systems -Proceedings, 0(April), 595--600. https://doi.org/10.1109/ICMCS.2014.6911249
Siangliulue, P., Arnold, K. C., Gajos, K. Z., & Dow, S. P. (2015). Toward collaborative ideation at scale - leveraging ideas from others to generate more creative and diverse Ideas. Proceedings of the ACM Conference on Computer Supported Cooperative Work & Social Computing, 937--945. https://doi.org/10.1145/2675133.2675239
Swearngin, A., Dontcheva, M., Li, W., Brandt, J., Dixon, M., & Ko, A. J. (2018). Rewire: Interface Design Assistance from Examples. Proc. of CHI, 1--12. https://doi.org/10.1145/3173574.3174078
Todi, K., Jokinen, J., Luyten, K., Oulasvirta, A., & Fi, A. O. (2018). Familiarisation: Restructuring Layouts with Visual Learning Models. Proceeding IUI '18 23rd International Conference on Intelligent User Interface. https://doi.org/10.1145/3172944.3172949
Todi, K., Weir, D., & Oulasvirta, A. (2016). Sketchplore: Sketch and Explore with a Layout Optimiser. Proceedings of the 2016 ACM Conference on Designing Interactive Systems - DIS '16, 543--555. https://doi.org/10.1145/2901790.2901817

Design considerations for digital bulletin boards

mail@heysupratim.com — Sun, 22 Sep 2019 00:00:00 GMT

I have always been a little curious about visual communication through hoardings, banners and bulletin boards. Being in a culturally diverse metropolitan like Vancouver. I wanted to make some observations on traditional community bulletin boards located in public spaces to learn more about how people socially interact through and with this cultural artifact.

From our observation in the field sampling the large number of boards and their postings. We find two extremes in physical board design.

The first being, strategically designed bulletin boards like the ones installed at the Vancouver Public Library. Situated at the center of the main entry space. The institute handles the boards and provides individuals and organizations, a space to display relevant permissible content. The space grant is for a 3-week term. Also, to put up any notice, you require a written permission letter signed by library authority.

The second are ad-hoc postings. For example, the bulletin board space provided by glass walls of a currency exchange shop located in any Gas Town alleyway. These are advertisements or event annoucements from small businesses and service providers. No management body looks after these posters.

Findings

Posting Variety: A single board inside Vancouver Public Library displayed an array of 24 postings with 7 personal advertisements, 3 library administration notices, 4 social and community event invitations, 2 educational pamphlets, 2 recreational reading fairs, 2 cultural show information posters,2 posters on government initiatives and 2 library maintenance notices about food and drinks inside premises

A randomly picked wall from the Gas Town shop walls contained 12 postings. There was a single administrative notice, one cultural show notification, 2 repeated business advertisements and 8 personal advertisements.

Posting Appeal Factors: Postings with clean typography and minimal textual noise were the ones that caught attention. An instance from the observation had two young adults point out to specific posters to each other. Those posters were the educational listings with minimal text on them. Some posters with Bold typefaces also stood out due to increased emphasis.

Attention Catching Design Elements: Clean Typography, Negative Space and Simple Tones

A two-tone color palette was the most effective when surrounding notices were textual. With white background posters in the majority, an inverted color scheme also brought out distinctiveness. A big posting with sharp lines and large negative spaces around made it stand out

A Human face as a single graphic in the poster also caught a lot of attention. A poster at eye level with a smiling face made a child take notice in my observation.

Human Face (Left) and Bold Type (Right)

Bulletin Board Appeal Factors: The public library boards had an aesthetically pleasing design. A vintage style akin to a telephone booth sort of shape. The frames outside the board were black in color diverting all attention to lighter toned posters within the frame. The neutral color flooring kept viewer attention locked to the display section. Comparing to Broken glass panes as background. They reduced distinctiveness of posters at our second site.

Black Borders and neutral flooring locks attention

Grid based layout of postings made readability easier. An observed couple gazed over the display row by row. There was no overlap between posters. Whereas, the Gas Town postings overlapped and didn’t followa distinct spatial arrangements. The better boards also provided locks and glass shielding. These housings protected the notices from damage. The unprotected boards at our second observation were also exposed to rainwater splotches and wear.

Glass Shielding and Locks

Environment Appeal Factors: The centrally located bulletin boards at the Library benefitted from its strategic positioning. The area had clear segregation between glass walls and stone walls to create this attention space. High ceilings with uniform omnidirectional overhead lighting made the bulletin boards shine prime.

1. Central location 2. Negative attention space 3. Highly illuminated high ceiling 4. Directed Traffic flow

Well measured distance between library entrance and boards made sure people had to maneuver their way around the booth to reach to the eating joints. Some kids played with the booth exterior surface while running around them. Made their parents take notice of the space. The coffee shops were on the other end of the hallway. Such a high traffic eating/drinking spot directed flow towards center. CCTV monitoring in our second site made a person startle who was smoking near the board. Such a poster could play as a deterrent to attention. The Gas Town board was also located in a sort of a blind spot. One side of the passerby traffic ignored it wholly.

Blind spot for incoming pedestrian due to location of board

Discussion

Our study of postings in public spaces point towards some unique characteristics of digital board equivalents. Features that will promote public engagement and discovery. Analyzing the observations about the design of the space, board and poster play an important role. Here we propose some characteristics of a digital bulletin board that will not be shortsighted on limitations compared to the analog space.

Directed Attention Space: Good overhead illumination and tall ceilings in the physical space directs the gaze towards the board. A clear segregation present on two sides of the board also helps. Like, a solid concreate neutral toned wall and a glass wall on opposite sides. This separation focuses people's attention on the board standing between the two.

A digital board could use such optimized positioning to direct attention of users in an intuitive manner. Like its physical counterpart, two different user flows can have a contextually relevant digital board between them. An example could be a board presented post a user’s online reading experience. Placing the bulletin with enough whitespace around it will also direct natural flow of attention.

Directed Attention using whitespace and action positioning

Internal Grid Layout: A tabular or grid layout for the postings inside the digital board will provide quick scan-ability. This is a cause effect relationship that stems from our observation of row wise scanning done by one odd participants. A grid will also provide breathing space and remove viewing fatigue that plagues current digital notice boards. Such an approach also makes bold lines and geometry stand out. Similar category of posts can occupy a logical row or column. This provides users an option to ignore what’s not relevant to them.

Grid Layouts for postings in a digital board

Typeface Weight Animations: Minimal Typography postings which had big emphasized words caught attention. Bold font weights in a sea of thin weight text stood out distinctly. Some posters can also adopt an inverted color scheme for pushing emphasis on headings. A repetitive typographic scheme across all postings will cause viewers to overlook content which happened at our gas town board. The poster that caught attention was the one with the single word ‘Maps’ written in bold. Digital boards can adopt one or two posters in the grid animating between typefaces from thin medium to bold. A single word can transition from a think font to a thicker font. This will direct user attention to engage with the poster. This could also use user input like mouse hover to activate transition.

Typeface transitions on Digital Boards

Singular Human Faces: Postings with singular human faces on them fared well. In our observations, a young child playing around the boards was quick to discover an eye level poster which had a young kid smiling. Even a faded cultural poster with a Chinese woman dancing caught a lot attention. This leads to two design choices for a digital board. A digital posting space could have a handful posters to carry human faces on them. These images will be looking straight into the viewers eyes. Carrying out actions relevant to the content of the posting.

Images with Human Models

Adaption to Profiles: Automatic sourcing of human faces for digital posts will help in making the viewer connect better with the posting. E.g. A middle-aged man who sees a face like his in the poster will react positivetly to the content.

To sum up

Our data led us to four design characteristics for adoption by digital bulletin boards.

Creating attention spaces around the boards to direct focus.
Using a grid-based layout for poster scan-ability.
Using typeface weight transitions
Adaptive human faces on the generated postings

Analysing an experimental work aiming to enhance vection through multisensory stimuli

mail@heysupratim.com — Wed, 14 Aug 2019 00:00:00 GMT

Summary

The research paper on Enhancing Vection through Multisensory stimuli is an experimental work to improve existing leaning based locomotion interfaces. The paper proposes the use of extra cues that can enhance a participant's sense of self motion.

Introduction: The authors begin by stating how leaning based navigation systems overcome the limitations set by joysticks and head-mounted displays. They have some cueing which enhances the perception of motion, but not as good as real-world locomotion. Translation and rotation cues, movement of air by ears and haptic and auditory cues from feet touching the ground. All these multi-sensory feedbacks can improve leaning-based systems, if incorporated.

The paper cites past efforts to study self-motion enhancement by adding vibrations and auditory cues. But their impact on active locomotion using seated gamepad controls and leaning interfaces is unknown.

Related Work: The authors mention previous studies on leaning interfaces like the Wii Balance board and Walking in place interfaces. They point to research efforts in the area of self-motion illusion (Vection). Research around Provision of vestibular cues enhancing perception of motion was also used as literature here.

System Design: The setup designed by the authors combined sensory stimulations with sensors to detect user feet roll off process. It used a Wii Balance board with its load sensor. Actuators mounted underneath each foot provided cues. A head mounted display (Oculus Rift DK2) connected to the system provided visual cues. The graphics system was running on Unity3d. Two Arduino Megaboards controlled the vibrotactors.

Method: A multipart study conducted with twelve participants aged between 25 to 48 years and one female participant. The within-subjects study consisted of five sessions. Each session designed to address different questions. The experiment studied user perception and usability. During the study, participants gave a rating to each question using a 11 Point liker scale.

Conclusion: The experiment showed that vection improved drastically by adding vibrotactile and auditory cues. The auditory feedback helped improve self-reported perception of velocities and distances travelled. These results were irrespective of the control scheme used. This walking related cues have a generalized benefit to locomotion. The study outcomes also support the idea of substituting haptic and proprioceptive feedbacks with vibrotactile feedbacks.

Analysis

Following is a breakdown of the paper in segmented questions that analyze the aspects of the research inquiry used here. Here we talk about the worldview of the author, his strategy of inquiry, methodology used, methods in the experiment, use of theory in the work, assessment of validity and ethical concerns

What was the worldview and strategy of inquiry?

Ernst Kruijf et al. used a Post Positivist worldview in their research as they hypothesized with the belief that there is a potential for better usability in leaning based vection. As experimental results showed walking in place didn't show benefits. The authors did a multipart study to hopefully improve the existing system. This shows that they recognize conjectures are not infallible. This is a deterministic experimental worldview

The strategy of inquiry used is Quantitative Design. The researchers measured vection enhancement due to multisensory stimulus as a causal--comparative research. The variables in question are vection (DV) and Multisensory stimuli (IV). They measured relationship using correlational statistics to find out the degree of association the two variables.

What was the methodology?

This project used an experimental methodology and was setup in a controlled environment. To test the usability and user engagement of a leaning and joystick-based interface, they conducted rounds of experiments with a fixed pool of pariticpants and changed the parameters between each rounds. As this was a 'within subject' experiment, the control group and testing group was from the same participant repository.

What were the methods used to collect data?

To collected data for the research, the authors conducted a controlled experiment with an accompanying questionnaire. The participant demographic was all men with one female participant. 7 out 12 of the participants had played games and had corrected to normal or normal vision. Each session of the experiment answered a different research question.

The study used an 11-point scale as a measure for the perceived idea of motion and engagement. The users had to rate their perception out this scale both during the experiment and post experiment.

What work did theory do?

Theory in this paper extended the previous work and provided the lens for the research. Past work shows auditory cues and vibration can enhance induced sensations of motion but there isn't any work done to measure its impact on leaning and joystick interfaces.

Seperate studies on physical navigation and feedback systems exist but correlation studies between the two is new territory. This provided an opportunity to do a quantitative study on their relationship.

How was validity assessed?

Internal Validity: Before every experiment session, the researchers did a pilot study with three specialists. This pilot helped calibrate the HMDs and strength of vibrotactors. The subjects also went through a vection calibration phase. This helped formed a reference for the perception of vection strength and helped assess the validity of the system design using the help of specialists.

External Validity: There was no specific step taken to assess the external validity of the system. The subjects taken does not represent the demographic which can make the findings universal. Taking people with corrected vision and skewered distribution of gender makes it harder to generalize to external findings.

They assesed external validity through comparison with physical gait impacts and walking behavior of people outside.

What(if any) ethical concerns existed with the work?

The ethical concerns associated with this experiment were physiological harm, cultural representation and exclusion

The issue of motion sickness persisted across all participation and though the experiment points to approval and consent taken from participants. The work didn't point to post experiment debriefing. There might be physiological effects still persisting post study.

The other big concern was generalizing representation. The study had a skewed gender proportion in their subjects and excluded participants with vision impairments.

Why the authors chose the specific worldview, methodology, methods mentioned?

The authors used a post positivist worldview as there was a clear gap between previous work and real-world locomotion behavior. This showed that there was room for a quantified improvement. The authors wanted to be as empirical in nature as possible.

Their choice for an 'experimental methodology' was due to nature for controlled environment needed. They had to do a lab-based study because there were hardware requirements and for changing feedback/cues on the fly for participants in different control groups.

Their method of data collection was a questionnaire because the participant's self-perception of motion was the dependent variable. It required some form of quantified feedback scale. The questions helped them judge the impact of changing parameters like leaning or sitting interfaces.

Do the types of the knowledge claims fit with the approach?

The researchers here use postpositive claim for developing knowledge. It fits the approach as it shows a cause and effect thinking. They study the effect of introducing multi-sensory feedback on vection capabilities of participants.

The authors also reduce their claims to specific variables. Namely vection (DV) and multisensory stimuli (IV). The hypotheses that extra cues enhance self-motion perception fits a post positivist claim.

The study uses quantified measurement for engagement and involvement in motion and uses experiments to prove the hypothesis. This makes the investigatory claim to fit the post positivist umbrella much better.

Can you think of other approaches to conduct the research? Why might they be valid?

The study could have taken a mixed method approach with a constructivist worldview. This could have been useful because personal experience of participants would have had a greater role in defining the correlation between the variables. A constructivist worldview relies on the participants view of the situation. These subjective meanings would have helped realized the impact of motion cues better.

Qualitative parts of the study would have helped engage participants in open ended questions which would have given more room for external validity

The mixed methods approach would have helped us make claims on a pragmatic consequence-oriented stand. The strategies of inquiry would have involved collecting both numeric information as well as text information like interviews to better judge enhance vection capabilities.

References

John W C N Creswell. 2014. Research design : qualitative, quantitative, and mixed methods approaches. https://doi.org/10.1017/CBO9781107415324.004
Gerwin de Haan, Eric J Griffith, and Frits H Post. 2008. Using the Wii Balance Board as a low-cost VR interaction device. In Proceedings of the 2008 ACM symposium on Virtual reality software and technology - VRST '08, 289. https://doi.org/10.1145/1450579.14506573.
Ernst Kruijff, Alexander Marquardt, Christina Trepkowski, Robert W. Lindeman, Andre Hinkenjann, Jens Maiero, and Bernhard E. Riecke. 2016. On Your Feet! Enhancing Vection in Leaning-Based Interfaces through Multisensory Stimuli. In On Your Feet! Enhancing Vection in Leaning-Based Interfaces through Multisensory Stimuli. https://doi.org/10.1145/2983310.29857594.
Ernst Kruijff, Bernhard Riecke, Christina Trekowski, and Alexandra Kitson. 2015. Upper Body Leaning can affect Forward Self-Motion Perception in Virtual Environments. ACM Press, New York, New York, USA. https://doi.org/10.1145/2788940.27889435.
Bernhard E Riecke. 2011. Compelling Self-Motion Through Virtual Environments Without Actual Self-Motion-Using Self-Motion Illusions ('Vection') to Improve VR User Experience. Virtual Reality: 149--176. https://doi.org/10.5772/553

Designing better solutions at scale

mail@heysupratim.com — Sat, 27 Jul 2019 00:00:00 GMT

Designers have the profound power to change the world with our creations, actions and redesigns. This same power multiplies when our actions and product reach scale. Designing a new smartphone, an app, a customer service system or an urban architecture. They trigger a cascading chain of reactions and these reactions have an impact. Both social and ecological.

It’s time for us to take a multidisciplinary approach when confronting scale challenges. Collaborating with business managers and technical experts to together launch ideas for this global economy. We cannot be in our silos anymore. Human behaviour anticipation for what they will click next or scroll to is exciting but we cannot turn a blind eye to the mass ecological resource exhaustion happening around us.

We have the opportunity and the skill to challenge assumptions about the need for constant economic growth. As we design products that improve lives and increase standards. We cannot avoid the negative social and environmental impact of depleting resources, polluting ecosystems and disrupting the health and economic welfare of communities that rely on these ecosystems. Designing at scale includes a range of design actions from creating a service, optimization of existing process and unmaking a creation.

How do you approach these bigger problems?

Consider situations where a product has no utility for the customer or user anymore. Can we design situations where resources aren’t depleted for the sake of that separated customer? Think about the lifespan of designed products. The resources needed to maintain and use the product over time and what expanded utility can the product serve. If the product will become useful or obsolete over time is a temporality that we need to look out for.

Analyze the geographic footprint of a product. Is it accommodating more cultural roles than the personas we designed initially for? It might be a business decision to scale geographically but it’s a conversation that should be taking place. We should share our knowledge about problem discovery and solution exploration globally. We can also visualize the limits of information flows in different parts of this world imposed by infrastructure. Can we design for accommodating these limits of information flows?

The tragedy of the commons

Consider a smartphone designed by a US Corporation, its metals mined in Mongolia, manufactured in China, packaged in a paper produced in Brazil and shipped to a user in the United States. This describes a typical life cycle scenario.

End-user benefits from the phone, corporation profile from sale, miners, factory workers receive economic compensation for labour. Everything seems normal. But we as designers might be unaware of the conditions of the mining site, factory, or the uneven distribution of work practices. We don’t know that the temporal and physical separation of our work from the actual production process is causing harm to different actors in the environment.

This invisibility makes the job of a designer even more challenging. We are never given enough data to know what sociological challenges will be present in our design actions. It can be challenging to get all this information but we have to make an effort even when the systems or products we design are dynamic and disposable.

As a mandate ask yourself these questions –

Who is this design for?
Do I have all the information I need?
Who does it benefit and who does it affect?
What needs does the solution solve and what cost?
How is the design distributed?

We might say that these aren’t our decisions or problems to deal with. But if we collaborate with experts in says politics, business, urban planning, user behaviour or infrastructure, we can collectively solve these challenges.

What can I do as a designer?

Map out all stakeholders in the system. Primary customers and their primary needs, you, the company, the network of suppliers, providers of service that disposes of the product when it’s broken or no longer works, and secondary populations affected by the design output. Find out leverage points in the system, places where a small change can produce massive impacts.

Keep assessing the life cycle of the products or services that you are designing. This will help find acute impact spots in the system. This kind of Life cycle assessment is useful when dealing with mass-produced products

Think deeply about the consequences of your design actions. Restore exhausted valuable cultural or ecological resources and instill the capacity to pivot your design output in situations with unforeseen challenges

Supratim

Remove Unnecessary Complications

Its a slow process

A strong structure

Normalize

Tooling Nerd

Communicate Effectively

Not your usual design book suggestions

Dear Data

Resonate

Sketching User Experience

Handbook of Usability Testing

Emotional Design

Comparing Alan C Kay and Engelbart's future vision of Computing Artifacts

Abstract

Philosophical Perspectives

Frameworks

Technical Description

Smart home design can be dumb

Douglas Engelbart's "Augmenting Human Intellect" and current UX practice

Exidesign: copy and transfer styles across different websites

Abstract

Introduction

Related work

System Overview

Data Markup

Learning Stack

Style Transfer

Style Transfer results

Design considerations for digital bulletin boards

Findings

Discussion

To sum up

Analysing an experimental work aiming to enhance vection through multisensory stimuli

Summary

Analysis

What was the worldview and strategy of inquiry?

What was the methodology?

What were the methods used to collect data?

What work did theory do?

How was validity assessed?

What(if any) ethical concerns existed with the work?

Why the authors chose the specific worldview, methodology, methods mentioned?

Do the types of the knowledge claims fit with the approach?

Can you think of other approaches to conduct the research? Why might they be valid?

Designing better solutions at scale

How do you approach these bigger problems?

The tragedy of the commons

What can I do as a designer?