REFOCUS: Current & Future Search Interface Requirements for German-speaking Users

REFOCUSWhen 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.

If this sounds interesting to you, please go check out our research paper at ResearchGate or arXiv. The original publication will be available via the IADIS Digital Library.

1 For instance, http://www.pewinternet.org/2012/03/09/search-engine-use-2012/ (accessed November 8, 2016).
2 For instance, Hearst, M. A. ‘Natural’ Search User Interfaces. In Commun. ACM 54(11), 2011.

Advertisements

Schrödinger’s Website

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 x and y of a linear combination U = x\ \mathrm{good} + y\ \mathrm{bad} with x + y = 1 are unknown.
** Subject to definition. For instance, x > y or x \geq \frac{2}{3}.

On Design Thinking

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

  1. matches people’s needs (Brown, 2008),
  2. is based on feasible technological requirements (Brown, 2008), and
  3. 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.

The Design Thinking Process
The Design Thinking Process visualized by the K12 Lab.

Conclusion

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.

(This article has also been published in theuxblog.com on Medium.)

References

Brown, Tim (2008). “Design Thinking”. In: Harvard Business Review 86(6), pp. 84–92.

Day, George S. (2007). “Is It Real? Can We Win? Is It Worth Doing?” In: Harvard Business Review 85(12), pp. 110–120.

IDEO.org (2011). Human-Centered Design Toolkit. isbn: 978-0-9914063-0-2.

Kliever, Janie (2015). “Design Thinking: Learn How to Solve Problems Like a Designer”. https://designschool.canva.com/blog/design-thinking/ (July 9, 2015).

Martin, R.L. (2009). The Opposable Mind: Winning Through Integrative Thinking. Cambridge, ma: Harvard Business School Press.

Patnaik, Dev (2009). “Forget Design Thinking and try Hybrid Thinking”. http://www.fastcompany.com/1338960/forget-design-thinking-and-try-hybrid-thinking (July 9, 2016).

Rowe, Peter G. (1987). Design Thinking. Cambridge, ma: MIT Press.

Schmalzried, Dirk (2013). In-Memory-basierte Real-Time Supply Chain Planung [In-Memory-based Real-Time Supply Chain Planning]. PhD thesis. University of Leipzig.

The U Score: Redesigning Usability Testing

logo-bigUsability 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_screenshot

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):

I hope the U Score can help to reduce the number of websites who’ve never been tested at all and particularly help you to conduct more and quicker usability tests. Enjoy!  🙂

Lean Support: The Case of HoloBuilder

SupportWhen 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. HoloBuilder menu (old)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.

Growing a Knowledge Base on Demand

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.

Adding Channels

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.

The Arrival of the Web 3.0

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.

Web 1.0

What is now called the “Web 1.0” in retrospect is what we programmed 15 or 20 years ago, mostly using nothing more than plain HTML, CSS, and some JavaScript (or Microsoft FrontPage). There were no Ajax, no Facebook, and no comment sections. Instead, websites had dedicated guestbooks, which were programmed in PHP or Perl. Due to a lack of sophisticated templates, creating a great website was hard work that eventually received a web award or two. Essentially, Web 1.0 is what’s presented to us by @wayback_exe and was very much defined by the underlying, basic technologies used. Websites were flat and presented flat text and images.

Web 2.0

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.

Web 3.0

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.

holo_low_res
One example for Web 3.0 content: a Holo depicting an underwater scene with sharks, ready to be consumed through Google Cardboard (viewed with Chrome on a Nexus 5).
3d_model_low_res
Another example for Web 3.0 content: a 3D model hosted on Sketchfab (viewed with Chrome on a Nexus 5).

Interactions

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.

Material Design

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:

Web 1.0 2.0 3.0
Device(s) PC Smartphone, tablet PC Smart glasses, Google Cardboard, Gear VR
Interaction Mouse, keyboard Touch, gestures Hands-free, head movement, voice, smart watch
Technologies HTML, CSS, JavaScript, PHP, Perl HTML5, CSS3, Ajax, jQuery, Node.js WebGL, Three.js, Unity, Material Design
Entities Webpages, text, images YouTube videos, tweets, (blog) posts etc. Photospheres, 360° videos, 3D models, Holos
Defined by / focus on Technology Data, social interaction, mash-ups, UX, responsiveness Immersion
Dimensions 2 2 >2

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.

Sparkle up Your Website ✨

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:

$("#main").sparkle({
  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:

$("#main").sparkle({
  size: 30
}).sparkle({
  size: 30
}).sparkle({
  delay: 1000,
  size: 10,
  pause: 750
});

The sparkle effect can be removed using the following option:

$("#main").sparkle("destroy");

Check out GitHub for downloading the necessary CSS and JS files of the plug-in: https://github.com/maxspeicher/jquery-sparkle. Also, see CodePen for the original implementation of the plug-in: http://codepen.io/maxspeicher/pen/zrVKLE

How to Not Have a Bad Day

Some time ago, when I was still more active on Google+, I used to share a funny little animated GIF from time to time. Not just any semi-funny GIF I came across, but only those that made me laugh really hard and at which I could look a thousand times without becoming bored of them.

Then, when I sat over a boring research paper and started to become demotivated, I would usually scroll through my Google+ timeline, check out one of the GIFs and laugh for five minutes. After that, I was in a good enough mood to finally finish that paper (or whatever other shitty task I had to do). Yet, it’s obviously not convenient to regularly scroll back through one’s Google+ timeline for finding one’s favorite GIFs or to organize them as bookmarks in the browser (point I).

Not so long ago, I stumbled upon Material Design Lite, which I really wanted to play around with since then; but I was lacking a nice use case (point II). Points I & II then finally led to the creation of ‘Good Mood’ as a part of my personal website MaxSpeicher.com. ‘Good Mood’ shall serve as a curated collection of my favorite GIFs, which I also intend to extend in the future. Whenever you’re having a bad day, you can go there, laugh a bit and then go on with a (hopefully) better mood than before 🙂

Now comes the geeky part: As a part of my website, the back end of ‘Good Mood’ is based on Node.js in combination with Express. The front end HTML is generated from Jade templates and—obviously—uses the Material Design Lite framework. However, during the creation of the site, there were some little obstacles to overcome.

I started with the front page of ‘Good Mood’, on which I show a random GIF from my collection. That one was pretty easy. But I thought one might also want to check out a specific GIF from time to time. So I decided to provide a second page on which the whole collection is featured.

How to Load Images Asynchronously as Soon as They Enter the Viewport

Problem 1: Animated GIFs are usually pretty heavyweight, so it’s not optimal to load the whole page with all GIFs, particularly if it’s accessed on the go via smart phone or alike.

The solution to this one was pretty straightforward: a GIF should be loaded only if the user has scrolled to the respective position, i.e., the image enters the viewport. For this, I register a waypoint for each material card displaying a GIF:

$.registerWaypoint = function($element, func) {
  waypoints.push({
    t: $element.offset().top, // top
    b: $element.offset().top + $element.outerHeight(), // bottom
    func: func
  });
};

In the above code, func is the callback function for asynchronously loading the GIF once the viewport reaches the corresponding waypoint:

$.loadCardImgAsync = function(cardCssClass, imgSrc) {
  var asyncImg = new Image();
  asyncImg.onload = function() {
    $('.' + cardCssClass + ' > .mdl-card__title').addClass('bg-img');
  };
  asyncImg.src = imgSrc;
};

In this case, I simply add a predefined CSS class bg-img to the respective card, which displays the GIF in terms of a background-image after it has been loaded as a new Image object.

Finally, we need a function for checking the waypoints against the current scrolling offset and viewport height. That function is bound to the window’s scroll event. Once a waypoint is reached by the viewport—entering from either the top or the bottom—, its callback function is executed and the waypoint is removed from the array of waypoints. In order to not mess up the array indexes after having removed an element, I iterate backwards using a while loop.

checkWaypoints = function() {
  var i = waypoints.length;
  while (i--) {
    waypoint = waypoints[i];
    if (waypoint.t < currentOffset + windowHeight && waypoint.t > currentOffset
        || waypoint.b > currentOffset && waypoint.b < currentOffset + windowHeight) {
      waypoint.func();
      waypoints.splice(i,1);
    }
  }
};

How to Dynamically Adjust Background Images to Mobile Viewports with CSS

Problem 2: The GIF with the cat was too wide for the mobile view of the page, which made horizontal scrolling necessary. But: Horizontal scrolling is pretty uncool!

Found here.
Found here.

This problem was a bit trickier than the previous one, mostly because it involved CSS*. When working with <img> tags, we can simply give them a max-width of 100% and omit the height property, so that the correct aspect ratio is automatically retained. However, since I use material design cards, I had to deal with <div> elements and the CSS background-image property. Unfortunately, those don’t know which height they must have unless we tell them. Say, for instance, the animated GIF we’re dealing with is 400 pixels wide and 225 pixels high. Then, we need the following structure according to material design cards:

div.mdl-card.mdl-shadow--4dp(class='#{card.cssClass}')
  div.mdl-card__title.bg-img
  div.mdl-card__supporting-text Found at
  div.mdl-card__actions.mdl-card--border
    a.mdl-button.mdl-button--colored.mdl-js-button.mdl-js-ripple-effect(href='#{card.link}', target='_blank')
      i.fa.fa-google-plus
      | /#{card.caption}

First, we have to give the container <div> element a width of 400 pixels and a max-width of 90% (to give it some space to the left and right on small screens), but we make no statement about its height:

.cat-card.mdl-card {
  display: inline-block;
  width: 400px;
  max-width: 90%;
}

The height of the container then must be determined by the inner <div> element that actually has the background-image property. In order to do so dynamically, it needs a padding-top value that reflects the aspect ratio of the background image. In our case, that would be 225 / 400 = 0.5625 = 56.25%.

.cat-card > .mdl-card__title.bg-img {
  background: url('/images/gif/cat.gif') center / cover;
  color: #fff;
  padding-top: 56.25%;
}

Now, since the padding of the inner <div> is relative to the actual width of the container <div>, the height of the container automatically adjusts to retain the correct aspect ratio of the background image. Go check out CodePen, where I had first sketched the solution to this. Yet, we need one more piece of the puzzle, which goes into the header of the HTML page:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Aaand done! Enjoy—both the website and the source code, which is also available on GitHub!

http://www.commitstrip.com/en/2014/09/26/the-worst-issues-are-not-always-where-you-would-expect-them/

My 2015 in Blogging

In 2015 I was not as busy as last year when it came to blogging, mainly due to my new job and my PhD thesis. But still, the WordPress.com stats helper monkeys prepared a very nice 2015 annual report for Twenty Oh Eight. I vow that I’m gonna post more regularly again next year!

In case someone actually reads this: I wish you a Happy New Year! 😉

Here’s an excerpt:

A San Francisco cable car holds 60 people. This blog was viewed about 2,700 times in 2015. If it were a cable car, it would take about 45 trips to carry that many people.

Click here to see the complete report.