From 2013 till 2016 I’ve done an industrial Ph.D. at Unister GmbH in Leipzig in cooperation with Chemnitz University of Technology. This means that I worked in Unister’s R&D department, which at that time developed a novel semantic search engine, and wrote my thesis about the part I contributed to the project. A few days ago—in an old notebook—I found a list of blog posts I wanted to write with the entry “Pros & Cons of an Industrial Ph.D. Program” not yet crossed out. I remember that I added this idea to the list after talking to Jürgen Cito, a Ph.D. student at the University of Zurich, at the 2014 International Conference on Web Engineering (ICWE). After chatting about the topic for a bit, Jürgen said something like “The pros and cons of an industrial Ph.D. program would really make a good blog post”. So here it is, in terms of an infographic made with Adioma, which I wanted to play around with for a pretty long time now.
I have to note that the con “less contact to your professor” wasn’t too bad for me because my second advisor Dr. Andreas Both, who was the Head of R&D at Unister, attached great importance to good and quality scientific work and publishing scientific results. This, however, isn’t something you can expect at any company. Overall, I list one more pro than cons because I had a really good experience with my industrial Ph.D. program and would definitely do it again!
When looking at current research, there is plenty of existing work inquiring into how users use search engines1 and how future search interfaces could look like2. Yet, an investigation of users’ perceptions of and expectations towards current and future search interfaces is still missing.
Therefore, at this year’s International Conference on WWW/Internet (ICWI ’16) my co-author Martin Gaedke presented our paper “REFOCUS: Current & Future Search Interface Requirements for German-speaking Users”, which we wrote together with Andreas Both. To give you an idea of what our work aims at, I’m going to provide a step-by-step explanation of the research paper’s title.
REFOCUS. An acronym for Requirements for Current & Future Search Interfaces.
Search Interface Requirements. From an exploratory study with both qualitative and quantitative questions we have derived a set comprising 11 requirements for search interfaces. The initial set of requirements was validated by 12 dedicated experts.
Current. The requirements shall be valid for current search interfaces. According to the experts’ reviews, this applies to eight of the requirements.
Future. Also, the set of requirements shall inform the design and development of future search interfaces. According to the experts’ reviews, this applies to ten of the requirements. Supporting the design of future search interfaces is particularly important with the wide variety of Internet-capable novel devices, like cutting-edge video game consoles, in mind.
German-speaking Users. Due to the demographics of our participants, the set of requirements can be considered to be valid for German-speaking Internet users. 87.3% of the participants were German while 96.6% lived in a German-speaking country at the time of the survey.
Before you receive feedback from users, the user experience and usability of your website are both ‘good’ and ‘bad’ at the same time.* Through a good design process you can only raise the chances of user experience and usability manifesting as ‘good’** once the feedback arrives.
* That is, the factors and of a linear combination with are unknown.
** Subject to definition. For instance, or .
According to Patnaik (2009), Design Thinking is “any process that applies the methods of industrial designers to problems beyond how a product should look.” The term was already used as early as 1987 by Rowe in his eponymous book in an architectural context and has lately become popular through research done at Stanford University and the Hasso Plattner Institute in Potsdam, Germany (Schmalzried, 2013). In his introductory article about Design Thinking, Brown (2008), the CEO and president of IDEO, uses the example of Thomas Edison to illustrate the underlying methodology. While Edison invented the lightbulb—which undoubtedly was a significant innovation in itself from a pure engineering perspective—he did not stop at that point. Rather, he understood that the lightbulb alone would be of no use to people, so he also created “a system of electric power generation and transmission to make it truly useful” (Brown, 2008). This means that “Edison’s genius lay in his ability to conceive a fully developed marketplace, not simply a discrete device” (Brown, 2008), which underpins that one of the prime principles of Design Thinking is to consider a broader context with the user at its center.
Three Requirements of Design Thinking
Brown (2008) characterizes Design Thinking as “a discipline that uses the designer’s sensibility and methods to match people’s need with what is technologically feasible and what a viable business strategy can convert into customer value and market opportunity”. Therefore, Design Thinking does not solely concentrate on users, but also takes into account the company perspective. This is necessary since without profitable companies, no human-centered products could be realized, which clearly do not come at no cost. Hence, Design Thinking focuses on people and industry to ultimately yield a methodology that serves both sides—if applied correctly; i.e., companies should not see designers as pure means to make existing products more beautiful, but to “create [new] ideas that better meet consumers’ needs and interests” (Brown, 2008). From all this, we can derive three requirements that have to be met if one wants to successfully apply Design Thinking for the creation of a new product. A product that is based on Design Thinking
matches people’s needs (Brown, 2008),
is based on feasible technological requirements (Brown, 2008), and
creates customer value and market opportunity based on a viable business strategy (Brown, 2008).
According to Schmalzried (2013), these are similar to the “R-W-W” method by Day (2007), which can be summarized as: “Is it real? Can we win? Is it worth?”
To give an example, consider the Search Interaction Optimization methodology and toolkit that are at the heart of my PhD thesis. As for requirement (1) above, in the context of my thesis I had to consider two target groups. First, I developed means for human-centered design and development that are both, effective and efficient from a company’s point of view. Therefore, my primary target group were the stakeholders, designers and developers applying the new Search Interaction Optimization methodology and toolkit. Then, the secondary target group were the users who are ultimately provided with more usable products by the companies applying the approach. Hence, matching people’s needs corresponded to matching companies’ and users’ needs in that specific case.
What is a Design Thinker?
When it comes to the characterization of a person who applies Design Thinking, Brown (2008) specifies that Design Thinkers are empathic, which supports the successful application of a “people first” approach. Furthermore, they exert integrative thinking (Martin, 2009), i.e., thinking beyond the scope of purely analytical approaches in order to create “solutions that […] dramatically improve on existing alternatives” (Brown, 2008). Third, a Design Thinker is optimistic, which means they believe that there exists at least one solution that is better than the status quo Brown (2008). In addition, a certain amount of experimentalism is required, i.e., a Design Thinker must be happy to try out new (and potentially radical) things instead of just doing “incremental tweaks” (Brown, 2008). Finally, and probably most importantly, Design Thinkers collaborate, particularly in an interdisciplinary manner and also have experience in multiple fields (Brown, 2008).
Three Spaces of Design Thinking
Contrary to existing processes and methodologies that are established and predominantly used in today’s IT industry—i.e., “linear, milestone-based processes” (Brown, 2008)—, Design Thinking does not happen sequentially. Rather, Brown (2008) states that it “is best described metaphorically as a system of spaces rather than a pre-defined series of orderly steps.” These spaces are given as follows:
Inspiration relates to actions such as investigating the status quo, defining potential target audiences, exploring the context the new product will be embedded in, going beyond that context to obtain a broader view, observing people, observing the current market situation etc. All of these are actions that “motivate the search for solutions” (Brown, 2008).
Ideation In the ideation space, scenarios and user stories are created, prototypes are built and tested (both informally and formally), outcomes are communicated etc., all in multiple iterations. That is, the “generati[on], develop[ment], and testing [of] ideas that may lead to solutions” (Brown, 2008).
Implementation The implementation space does not correspond to the technical implementation alone, i.e., programming tasks carried out by developers. Rather, it again involves a huge amount of interdisciplinary communication to pave the path to a usable product that is put into a broader context. This particularly includes business solutions and marketing, i.e., the implementation space “chart[s] […] a path to market” (Brown, 2008).
While a Design Thinking process usually starts in the inspiration space, transition between any two of the spaces is possible at any time (Brown, 2008), which clearly distinguishes it from established business processes. One example could be that while working in the implementation space, a Design Thinker notices that the new product can not be well communicated to customers, which might make it necessary to enter the inspiration space (again) and perform a new analysis of the current market situation and customers needs. If it turns out that a different marketing strategy would be sufficient, they can then return to the implementation space. A second example would be a series of several paper prototypes that all indicate the previously developed user stories to be irrelevant. This could result in a return to the inspiration space for defining new target audiences or paying closer attention to specific groups of users.
Design Thinking as a Process
A more concrete implementation of the Design Thinking methodology has been realized in the Human-Centered Design Toolkit by IDEO.org (2011). That is, although the underlying principles remain the same, they build on a more defined process. The toolkit guides designers (which, according to the Design Thinking methodology, can be project managers, developers etc.) through a three-step process, i.e., “Hear”, “Create” and “Deliver”. This happens in order to provide solutions that are “desirable, feasible and viable” (IDEO.org, 2011) from a human-centered point of view.
Complementary to this, David Kelley, the founder of IDEO and d.school, defines five elements for the Design Thinking process: Empathize, Define, Ideate, Prototype and Test (Kliever, 2015). By empathizing, you understand “the beliefs, values, and needs that make your audience tick” (Kliever, 2015). In the next step, the collected information are analyzed and translated into insights about the audience and the challenge to be faced (Kliever, 2015). Once the challenge has been defined, in the Ideation phase (which is also one of Brown’s Design Thinking spaces), everything is about finding possible solutions, i.e., it “is a brain dump of ideas, and nothing is off limits” (Kliever, 2015). Finally, in the last two stages, multiple ideas are translated into prototypes and tested with the audience (Kliever, 2015). Depending on whether or not a prototyped and tested solution proves suitable, it might be necessary to iterate one or more of the previous steps (Kliever, 2015).
It might seem counterintuitive to talk about Design Thinking processes after having introduced Design Thinking spaces earlier (“Design Thinking does not happen sequentially”). However, Kelley’s process is perfectly in line with the concept of Design Thinking spaces, where you do not follow a predefined path. The spaces and processes of Design Thinking go hand in hand. While you follow the above process, you necessarily move through the three spaces of Inspiration, Ideation and Implementation in no particular order, iterating previous steps if required.
To conclude, I would like to quote Steve Jobs, who said:
Design is a funny word. Some people think design is how it looks. But of course, if you dig deeper, it’s really how it works.
Moreover, I would like to refer to Google’s principle
Focus on the user and else will follow.
To give just one example for this, if you write a blog post, it will not become popular because you are using some fancy SEO tools. It will become popular if and only if you have created a piece of great content that fulfills the needs of your audience. As a Design Thinker, be bold, be unpredictable, be creative! You do not (necessarily) have to be a Photoshop artist for this. Hypothesize, but make your hypotheses testable—and test them. But still, do not rely on data alone as a starting point, which might prevent radical and potentially better solutions. Finally—and most importantly—do not let legacy processes restrict yourself. Yet, at the same time make sure that Design Thinking remains too unpredictable to become a legacy process itself.
Usability testing is often perceived as cumbersome and time-consuming and therefore not thoroughly applied. This was one of the key observations leading to the topic of my PhD thesis. Particularly conducting tests with actual users is often omitted, which results in the release of suboptimal products and websites. In my thesis, I tackle this problem through more automatic evaluation and optimization, however, in the specific context of search engines. Yet, every type of website—no matter if private or professional—should undergo at least one usability test before its release. Therefore, we need to redesign usability testing itself:
It must be quicker.
It must be cheaper.
It must be easier to understand.
Still, the result must be as precise as possible.
The U Score is a more general derivative of the findings of my PhD project that provides quick and precise usability evaluation for everyone based on actual research. Any designer or developer who isn’t able to conduct a regular usability test can answer a minimal but exhaustive set of yes/no questions and receives a single usability score for their website or web app. The questions have been designed to be as objective as possible and are based on established research findings. Also, for time reasons I try to minimize the need to involve other people, which, however, cannot be completely eliminated (still, you can receive a complete U Score with the help of only three friends who have a look at your site).
In this way, the U Score provides an approach to usability testing that is as precise as possible given the minimal effort it requires. It’s intended for situations in which designers/developers don’t have the chance to conduct a traditional usability test. Also, it addresses everyone who needs a quick assessment, has never tested the usability of a website before or is new to usability testing. However, please note that the U Score can only be an approximation and is not a complete substitute for established usability testing methods. Still, it gives you a very good baseline according to the motto: Any usability test is better than no usability test!
The current version of the U Score is still in beta development status. Therefore, I highly appreciate your feedback, which you can add to this public Trello board.
For implementation, I’ve relied on a number of well-known technologies and frameworks in combination with some that were new to me (the ones marked with an asterisk):
When I started working on HoloBuilder.com over a year ago, there was no support. Of course, we would’ve immediately helped anyone who sent us a question via e-mail or Twitter, but those options weren’t communicated anywhere. Users accessing HoloBuilder ended up directly in our augmented/virtual reality creator, the only way for communication with us being a “leave feedback” option indicated by a line chart icon. However, “leaving feedback” is definitely not the same as “getting support” or “getting help”. Thus, following my UX rule #1, support functionality was de facto nonexistent. Also, we had neither a knowledge base nor a collection of FAQs, no support personnel and user feedback was still pretty rare.
Hence, due to the limited resources in a start-up, we decided for a lean support approach. That is, we rolled out HoloBuilder support in small pieces, treating every stage like a minimum viable product (this is also what Nate Munger describes on Quora).
Making Support Visible
First, we added a “?” icon next to the feedback option, which was visible at any time and clearly showed the user that they could get help. Since there were no FAQs available yet, clicking the new support option simply instructed the user to send their question via e-mail or Twitter. As you can see, we changed nothing about our support back-end, but we finally made the possibility to get help visible to the user, which is already a huge gain. This was confirmed by an increasing number of relevant support request that reached us in terms of e-mails and tweets.
Second, to continually grow a knowledge base, we created a blog for development news and tutorials, which can be found at createholo.com. In that blog, we publish solutions to (potential) problems on demand, i.e., when users get back to us with questions or when new HoloBuilder features are released. CreateHolo was then linked as “Tutorials” on our new landing pages, which we created to provide users with some introductory information and help before being confronted with the AR/VR creator itself. However, through heat map analyses, we found that the tutorials gained more attention when changing the link text to “Help & Tutorials”. This indicates that “help” is still the major keyword when it comes to support.
In the next step, we integrated a tawk.to live chat into our HoloBuilder pricing page as soon as it went live in January 2016. In this way, we established a third feedback channel in our support back-end with almost all of our employees acting as support agents, thus providing a more direct and personal connection to users with urgent questions. Since our experiences with the live chat feature have been consistently positive so far, we plan to extend it to our different landing pages as well in the future.
Collecting & Organizing Feedback
Finally, all questions and pieces of feedback we receive through our three support channels—e-mail, Twitter and live chat—are collected and organized in a dedicated Trello board. Based on that board, on a regular basis, we decide on feature requests, tutorials to be written and continuously grow the aforementioned knowledge base. The FAQs collected in that knowledge base are at the same time treated as a list of to-dos for our internal UX team. Some particularly crucial FAQs are already featured on the HoloBuilder pricing page. Interaction with those FAQs is tracked anonymously to find out what users struggle with most. Interestingly, interactions seem to be not overly influenced by position bias since FAQ #8 at the very bottom receives the second-highest attention in terms of clicks.
To conclude, by following a lean support approach, we have established a well-working process and a convincing customer success rate within a year, without additional resources or personnel. The next big milestone of our process of implementing lean support for HoloBuilder will be the release of our knowledge base, so that we can provide an on-page support experience that’s just as awesome as MailChimp’s (disclaimer: I’m a fan).
This article is dedicated to Anna, our awesome support ninja.
What is Web 3.0? That’s a good question! And I’m pretty sure I won’t be able to answer it in this essay. Yet, I’ll try my very best to get closer to the answer. There exist several definitions of Web 3.0, none of which can be considered definite. A very general one describes it as “an extension of Web 2.0,” which is of limited helpfulness. Also, I’ve heard some call the Semantic Web “Web 3.0,” while Nova Spivack as well as Tim Berners-Lee see it only as a part of the latter. Interestingly, what has been neglected in most discussions about Web 3.0 so far are augmented (AR) and virtual reality (VR), or 3D in general. Seems like this could be worth a closer look. Although both, AR and VR have been connected to Web 3.0 separately, they rather have to be seen as an integral part of the overall concept, in addition to the Semantic Web. In the following, I describe why 3D — and AR/VR in particular — are beyond the Web 2.0, why current trends in web technology show that we are entering the Web 3.0 at high speed right now, and what will change for us — the designers, developers, architects etc.
Where are we coming from?
To be able to put Web 3.0 in relation to what we’ve seen so far, let’s have a brief look at the beginnings first.
As web technologies evolved, websites became less static, looking more and more like desktop applications. Soon, users could connect via social networks (Facebook’s like button is ubiquitous nowadays) and watch videos online. YouTube videos, tweets, and alike became discrete content entities (i.e., detached from a particular webpage) that could now be easily embedded anywhere. For instance, WordPress by default features specific shortcodes for these two. Data, rather than the underlying technology, became the center of the web (cf. “What Is Web 2.0” by Tim O’Reilly), which in particular led to an increasing number of mash-ups. Through templating, e.g., by using WordPress, it became increasingly easy for everyone to create a sophisticated website. Also, the proliferation of mobile and small-screen devices with touch screens caused the advent of responsive and adaptive websites as well as completely new kinds of interaction and corresponding user interfaces. Rather than by technologies, the Web 2.0 was and is defined by social interactions, new types of (mashable) content, and a stronger focus on user experience, among other things (cf. “Social Web” by Anja Ebersbach et al.). Yet, contents were as flat as before. That’s the web today’s average user knows.
Now that we’ve seen where we come from, let’s elaborate on why 3D is a major part of Web 3.0.
Virtual and augmented reality
Neither VR nor AR are the Web 3.0 (as has been stated by some). Still, they are an important part of the bigger picture. Since Google introduced their Cardboard at the I/O 2014, consuming VR has become affordable and feasible for average users. Another, similar device heavily pushed right now is the Gear VR. Yet, despite the introduction of 360° video support by YouTube and Facebook, as of today, corresponding content is still rather limited compared to the overall number of websites. This will change with the growing popularity of devices such as 360° cameras, which allow you to capture 360° videos and photospheres (like in Google Street View) with just one click. Such 360° images can then be combined to, e.g., virtual tours using dedicated web platforms such as Roundme, YouVisit, and HoloBuilder. In this way, the average user can also create their own VR content that can be consumed by anyone, in particular through their Cardboards or other head-mounted displays (HMDs). Hence, the amount of available VR content will grow rapidly in the near future.
I personally like to refer to the type of VR content created from 360° images and consumed through HMDs as “Holos,” so let’s stick to that naming convention for now. Just like YouTube videos and tweets, Holos are discrete content entities. That is, technically speaking, all of them are simply iframes, but denote completely different kinds of content on a higher level of abstraction. Particularly, unlike plain YouTube videos and tweets, Holos add a third spatial dimension to the web content that is consumed by the user. That is, they move the web from 2D to 3D, the enabling technologies being WebGL, Three.js, and Unity. Another example for this evolution is Sketchfab, which brings high-end 3D models to the web and has been described as “the youtube for 3D content.” Contrary to VR, AR has not yet reached the same status regarding affordability and feasibility for average users. This is due to the fact that AR can’t be simply created and consumed in a web browser. Currently, AR application are of more interest in Industry 4.0 contexts. However, I’m sure that once VR has hit the mainstream, the complexity of AR will decrease and develop into the same direction. Already now, platforms like HoloBuilder offer the possibility to also create AR content in the browser, which can then be consumed using a dedicated Android or iOS app.
With the introduction of the third dimension in web content, also the necessary interactions change significantly. So far, we’ve had traditional interaction using mouse and keyboard and the touch interaction we know from smartphones and tablet PCs. Now, when consuming Web 3.0 content through our Cardboard, we face a novel, hands-free kind of interaction since we cannot touch the screen of the inserted phone. Instead, “clickable” objects need to be activated using, e.g., some kind of crosshair that is controlled via head movements (notice the little dot right below the sharks in the picture above). Another scenario (of the seemingly thousands that can be thought of) could be content consumed through a Gear VR while controlling it with a smart watch. Also, smart glasses and voice recognition — and more natural user interfaces in general — will become a thing. This calls for completely new and probably radical approaches towards usability, UX, interface, and interaction design that more and more move away from what average users were used to 15 or even only five years ago. All of this will aim at providing an experience that’s as immersive as possible for the user.
Finally, what I also consider to already be a part of Web 3.0 is Google’s Material Design language. This is because, just like AR and VR, it aims at extending Web 2.0 beyond the second dimension. Although the outcome is clearly not 3D content in the sense of AR and VR as described above, Material Design puts a strong focus on layers and shadows. Hence, it introduces what I like to call 2½D.
Where are we going?
To summarize, the specific properties of and differences between Web 1.0, 2.0, and 3.0 are given in the following rough overview1:
Smartphone, tablet PC
Smart glasses, Google Cardboard, Gear VR
Hands-free, head movement, voice, smart watch
HTML5, CSS3, Ajax, jQuery, Node.js
WebGL, Three.js, Unity, Material Design
Webpages, text, images
YouTube videos, tweets, (blog) posts etc.
Photospheres, 360° videos, 3D models, Holos
Defined by / focus on
Data, social interaction, mash-ups, UX, responsiveness
AR and VR—or 3D in general—will become the predominant kind of content created and consumed by users, taking the place of the plain content we’ve been used to so far. For instance, think of the personal portfolio of a painter. In the Web 1.0, it was a hand-crafted website created with Microsoft FrontPage. In the Web 2.0, it’s a WordPress page featuring a premium theme specifically designed as a showcase for paintings. Also, the painter has a dedicated Facebook page to connect with their fans. In the Web 3.0, the personal portfolio will be a walkthrough of a virtual 3D arts gallery, with the paintings virtually hanging on the walls. That walkthrough can be consumed using a web browser, either on a PC, on a tablet, on a smartphone, or through Google Cardboard. Therefore, everyone involved in creating websites and web applications will face new challenges: from presenting information in 3D to designing completely novel kinds of interactions to having to consider a wide variety of VR devices and so on. The very underlying look and feel of the web—for both, creators and consumers—will change drastically.
In analogy to the two-dimensional Web 2.0, Web 3.0 is the perfect metaphor for the three-dimensional web that is currently evolving. Besides the development towards interconnectedness, IoT, linked data, and the Semantic Web, the fact that the we are moving away from the webpage paradigm (cf. “Atomic Design” by Brad Frost) and into the third dimension is one of the major indicators that we are on the verge of experiencing the Web 3.0. And I for my part find it really exciting.
1 This table raises no claims to completeness. Particularly, for the sake of simplicity, I omit the properties of Web 3.0 not connected to AR and VR.
Recently, for one of my current projects, I was looking for a jQuery plug-in that adds a sparkle effect to DOM elements. However, I couldn’t find any that suited my needs. Either, the available plug-ins were way too elaborated for what I had in mind or the sparkle effect just didn’t exactly look like I had imagined. So, after an afternoon of researching existing jQuery plug-ins, I decided to simply code one myself, which I wanna share with you here.
You can add a sparkle effect—i.e., a single sparkling star—to any DOM element by doing the following with the given, optional parameters:
fill: "#fff", // fill color of the star that makes up the sparkle effect (default: #fff)
stroke: "#000", // outline color of the star (default: #000)
size: 20, // size of the sparkle effect in px (default: 20)
delay: 0, // delay before first sparkle in ms (default: 0)
duration: 1500, // duration of a sparkle in ms (default: 1500)
pause: 1000 // delay between two sparkles in ms (default: 1000)
In case you want to add multiple sparkling stars to the DOM element, you can call the sparkle() function more than once, also with different parameters: