• commenting on sketches
• following users
• tweaking (forking) sketches
• favoriting sketches

on different user types

• Professors
• Students
• Regular users

Visit the project

I have been always a great supporter of using analytics tools to observe user patterns and use that insight as a guidance for the next phases of updates. Since I launched OpenProcessing almost 5 years ago, I used Google Analytics to track the website traffic. I have also used many other analytics tools on projects I worked on as a UX designer. However, I have been always frustrated to see that these tools are great on displaying user-to-website interaction but they are very limited on providing any user-to-user interaction information. On social platforms like OpenProcessing, Twitter, Facebook, etc., it is extremely important for the designers to have a sense of the interaction between users, because it is what defines a social platform and makes these websites different from each other although they may provide similar functionality. Being able to answer such questions is crucial:

• Who are your users? Who is an influencer, who is a contributor, who is just a random visitor…
• How do they interact with each other?
• What kind of interaction do they have with each other? eg. comments, retweets, etc.
• What kind of user behavior patterns are there?

The Making Of…

Some early dry-erase wall sketches

There is a common question in data visualization: Do you start with the question or the data? In my case, it was the questions above. I started concepting a network visualization. Currently, there is 20000+ registered users and 70000+ sketches on the website. There are different user types and they can interact with each other in different ways. It was easy to expect many different behaviors and patterns in this ecosystem, and a circular network visualization seemed best approach to visualize these. Now with the great visualization tools like d3, Raphaël, processingjs, creating such visualizations are easier and more fun. I started designing the concept for this visualization (thanks to Mahir for his input during brainstorming) by some sketching and coding in d3 at the same time.

I chose to use d3 because I wanted to learn this popular library which is both web-based and uses svg element. It allows you to make your data visualization interactive pretty easily, with the common mouse events being available on DOM elements (unlike Canvas element). However, it took quite sometime for me to understand of how the library works; Its future-data-referencing structure is pretty interesting and uncommon, but Scott Murray and Mike Bostock‘s tutorials came to rescue on this one.

After the getting some basics done with dummy data on d3, I started tying the OpenProcessing database to the visualization. At this stage, performance started being an issue: Data needed to be optimized and formatted to work with D3, and required a lot of tweaks and redos: I had to strike the balance between doing some of the data handling on MYSQL-PHP level and some on the javascript level. I didn’t want my server to handle all the data formatting because it would clog the server overall but I also didn’t want to weigh on javascript because I didn’t want the front-end experience to be laggy on browsers.

I had to implement an indicator to show that performance may drop with more data points selected

The rendering performance was also an issue for all those lines representing a year of interactions. I couldn’t do much effects like fades and animations because of the decreasing frame per seconds. In order to get the best performance I had to tweak the D3 related code, css, jquery, etc.. Realizing that performance will not be great on slower devices such as mobile phones, I made the site responsive and made it gradually reduce the available functionality on slower and smaller devices.

Finally, I worked on the page functionality and user interface. I designed a simple interface to filter through the data and navigate through the editorial section: A data visualization is at its best when it is telling a story, and even better if it is accompanied by an editorial piece (yes, I guess I am talking about many impressive New York Times visualizations). So I wanted to make sure I guide the user through the visualization to explain how it works and the patterns it includes. The rest is left for users to explore…

Before I launched it, I showed it to some people, got their feedback, did some user tests (Hello sister!) and some tweaks upon my observations. It took many weekends and after-hours over the course of 3 months, and finally I am happy to share this project with you.

Some Take Aways

When I tied the visualization to the actual OpenProcessing database, some patterns started to emerged right away.

• Students were much more active on the website than I thought.This is particularly true for commenting on and tweaking each others’ sketches. Students seem to be very vocal when comes to interacting with each other.
• Aligned with my expectations, professors are highly focused on interacting with their students, and less social with the rest of the site.
• Tweak feature was used by the community more than I thought and it was particularly helpful to classes. This is helpful information as I am continuing to simplify the features on the website.
• I introduced the follow feature on March 2012, users caught up pretty quickly and became the most important interaction between users next to favoriting each others sketches. (This makes me wonder if ‘follow’ activity is higher than ‘tweet’ activity on Twitter.)
• I was aware of the influencers on the website however the conversationalists  proved to be the ‘core’ users of the website together with influencers. This is a good directional input to weigh equally on both uploading/following process and improving the interaction channels for conversations.

There is so much more to discover when you analyze the visualization in-depth.

Future Iterations

There are definitely many other ways to visualize the activity on a social website. I will be continuously thinking of and searching for other data visualization types that might reveal other patterns, such as user activity frequency and drop outs.

Also, I am hoping to find more ways to improve performance: one thing I went back and forth was using JQuery vs D3 to interact with some elements, and using CSS vs. D3 to style elements. Eg. You can hide/show elements using JQuery or D3, you can set the color of elements in D3 or in CSS, but at the moment it is not clear to me which way would be faster. I ended up using CSS for most styling, but this came with the limitation of not being able to tweak individual elements.

I would love to hear your feedback as well as any questions you might have design/coding wise.

On a side note, Co.design called this an infographic, however I think this falls into the category of data visualization/information visualization. Not sure if this categorization of data visualization is common and valid but I prefer to call a piece ‘infographic’ if it is not allowing an analysis of data the it is visualising. I refer to visual.ly for examples of infographics, and I believe you can see the difference.

(via Co.design)

For years, I have been looking for a clock for my apartment, but couldn’t end up buying one.

I have a very weird relationship with clocks. It started after I realized wearing Casio G-Shock Digital watches weren’t that cool and switched back to analog clocks after listening to my dad’s advice. He didn’t explain why, he simply said “Analog clocks are better..”.

Something I started enjoying with analog clocks was that, they don’t indicate only the current time, but also provides a spatial area for you to imagine how much you have until the class ends, how long did you talk on the phone. Although we are pretty quick about it by now, still analog clocks don’t require you to do math to calculate how much time it will take for you.

This is how much time
I spent writing this post

This is how long
I talked to Asli on Skype

Just by looking these, you can visually see that writing this post didn’t hurt, and I had a lot to say to Asli on Skype. Since my switch to analog clocks, I found myself redefining the meaning of time for myself through different periods of time. I loved browsing clock designs and explore how designers give each clock a different story, but I also found them less true to what time really means to us. I felt like most designers found the time’s ever-constant behavior and characteristic an opportunity to play with. From my point, this gave too much way to become more distant to what time means. Take a look at this google search on design clocks. Various definitions of designer commonly includes a lot about the question, the problem and the solution, and I guess this is why most design don’t speak to me: Time doesn’t include much of a problem, nor needs a solution, like a door knob has. It only has a meaning, albeit a different and evolving meaning for each person. That’s why most clock design don’t seem to be clicking for me.

This January, I quit my day job and started spending most of the day working at home in front of my computer. I started noticing less of the digits on the clocks around me and the digital ones me (like my bedside radio clock with digital display) become obsolete,  since it didn’t matter anymore if it was 10am or 1pm when I started working. There was nothing to catch, nothing be late to. What became more important is how much time I spend on something: How much did I sleep, how much did I work on this project. My natural clock shifted: Waking up around 1pm everyday, I started doing most of my work between 9pm-4am. Many times, I didn’t even need to see any numerical values about the time. I started to feel that I was more close to understanding what time meant in its most natural form.

I was visiting some design stores in Williamsburg this Saturday, and I found a clock that was kind of expressing what I feel about time in these few months.

Klock-01 by Singgih S. Kartono is a beautiful and a very simple piece. It lacks an alarm functionality: this beautifully symbolized how I don’t feel to catch up with anything. I found its lacking an alarm is a functionality by itself. There are no “needs to be done by 5pm”s. Its natural unpainted wood structure felt right out of nature and also respectful to the time, as this wood will deteriorate through time if it is not treated manually once in a month. It has a very soft feeling when you touch it and hold it in your hands.

A google search about the clock and the its designer, Kartono, revealed more:

…[Wood] record good & bad time. The beautiful texture and grain actually a story of its life. Wood is a kind of perfect material, perfect cause of its imperfectness. Its characters teach us about life, balance, limits… All of Magno products are not coated. We only apply a wooden oil to finish them. This finishing is not going to completely protect our products. However, it will give a chance to its owner to feel the wood and also to care for the wood, as the care of its owner is the only real protection of the products. I disagree with the maintenance-free approach in products…

For each product they ship, he provides a new tree/seed to the people of his village in Indonesia.

…As a wood consumer, I feel morally responsible towards replacing the woods that I have used. This will ensure that all manufacturing activities that I conducted would not destroy the nature. I do this by replanting every single wood that I’ve used from the forest…

I like that the clock doesn’t have any second leg. Especially these days, it doesn’t have any meaning other than making you feel like you should be in a rush. No moving part, no visible buttons. A very calm piece.
The clock’s little feet make me feel like it is ready to run out of your hands whenever it decides. I should go back and find that store to buy this before the time runs out.

But since the introduction of iPhones and iPads and Androids, we are seeing that the differences above that are taken for granted seem to disappear. Today, Apple released the developer beta version of its next OS X release, OS X Mountain Lion, and the new features list proved to be a very significant example of how the boundaries between mobile and desktop platforms are disappearing. The features that will be adapted to OS X are below:

• Applications like Messages, Notes, Reminders: These basic functionality that are unified between iPad and iPhone is now coming to desktop.
• Notifications: MacOS never had a decent notification system and there were 3rd party applications like Growl to fill that hole. Now the notification system that was introduced first in iOS 5 is being ported to the next version of MacOS (note that, Apple dropped the ‘Mac’ from the name, but I will use both versions for clarity).
• Twitter integration: Self speaking.
• Game Center: another integration with iOS devices to enable social gaming features.

You can read more about these features in the Gizmodo article.

What is interesting? The desktop inheriting mobile features

It is very interesting to see that the mobile platforms used to be pushed to its limits to do the tasks and provide the features that their desktop counterparts used to do. Feature list which started only with making calls grew as new features added: send email, listen to music, check calendar, etc… They used to be a stripped down version of desktop platforms.

In this OS X example, now we see that the features that are designed for iOS being added to its desktop counterpart, blurring the borders between mobile and desktop platforms and I believe this is more than just unifying their OS experiences. I believe this is also the result of mobile platforms taking the lead on innovative design in operating systems. In the 4 years, iOS had seen 5 major releases whereas MacOS had 3. On OS X Lion release, it already imported many of the iOS features including LaunchPad, fullscreen mode for apps and touch gestures.  The Metro interface from Microsoft is first introduced with Windows Phones, and now it is being implemented into the next version of Windows Operating System.

I am quiet enthusiastic to observe the effects of this shift, as minimalist designs in mobile applications and operating systems can have great effect on simplifying today’s operating systems.

This post is password protected. To view it please enter your password below:

Password:

OptimalSort

OptimalSort offers a quality card-sorting and usability-testing service for a monthly fee. Create cards and options, and then send a link to the study to chosen participants. Or tweet the link and get random participants who are willing to help you out. The application offers real-time results and graphs, and the interface is sleek and smart.

WebSort

WebSort is another online application with which designers can create card-sorting usability tests and send a link to the public or to chosen participants. It also has a great interface and calculates results and graphs just like OptimalSort. WebSort, however, has a unique drag-and-drop interface to simplify organization.

User Zoom

Pre-organize data into groups and sub-categories. With User Zoom you can have unlimited participants, and there is an option to include your own questions (such as, Why did you choose to place this content here, or Why did you group these items like this?). Tailored questions will get direct answers from participants and help you analyze their thought processes and improve the user experience.

xSort

xSort is an application for Macs that creates a drag-and-drop interface for card sorting that mimics physical cards. It also calculates and presents the results for you to use on screen or print out for future reference.

CardZort

CardZort, a standalone application for Windows, Mac and Linux, offers a simple approach to digital card sorting. Two programs are available: CardZort, the standard drag-and-drop card-sorting application, and CardCluster, which works with CardZort to create a detailed cluster analysis of the results. This lightweight tool is a great free option that gets right to the point of traditional card sorting.

youtube post by kicesie

Without drilling into technical details, I think holistically:

Flash (and Adobe as a company) had always been the graffiti guy of the leading technology for the web. It led the technology on the web.

HTML5 and CSS had always been the catching-up standardization officers. They adapted the technology.

Adobe always had the advantage of having Flash 99% compatible in all browsers and operating systems. Once they created the flash framework right, it was easier for them to build new technologies upon this framework, going forward with the convenience of high-level compatibility. Native 3D support, progressive video format, hardware (microphone,webcam) access, Augmented reality, etc. got eventually developed either by Adobe or 3rd party developers who Adobe always supported. Flash had always been a designer friendly environment, including visual designers not knowing actionscript but using basic timeline’d interface.  We saw amazing digital experiences created on the web, and Flash started being used for not only full-blown experiences but also partial sections on web pages (widgets, flyout navigations, slideshows).

Yes, HTML5 is great, in many cases providing similar experiences to Flash, and provides great flexibility for developers. I am excited to see it becoming the new standard. But it will never have the advantages of being a framework developed in-house as Flash. Biggest problem with HTML5 is still there because the rendering engines are various, and unfortunately behaving quite differently in complex designs. Although W3C is the school teacher, the students applying the language in the real world are Google, Apple, Microsoft, and couple of other browser developing companies. But most importantly,  it will not be possible for these companies to support 3rd party developers in rhyme with each other in the near feature, even if they get along well to establish the same standards and competitive speeds. As a developer, I will not be easily able to extend this language above the limits of what Chrome, Safari and IE provides me. I will not be facing one very open-minded company like Adobe, I will get stuck between the evil standards fight between Google, Safari, and Microsoft. While Adobe was trying to make sure Flash works at its best in all platforms, Safari will ignore when IE tries to bring new (now forgotten) features like web slices.

So, what’s going to happen Sinan?

Yes, basic and common features that are currently being served with Flash, such as video streaming, pixel level canvas drawing etc, will be replaced with HTML5. Though it is not because we hate Flash, it is because the support for Flash will decrease eventually by the similar unfriendly moves of the other platforms and browsers. But Flash will keep on leading the digital technology on the web (if Adobe keeps playing it right), and FWA will still be filled with many Flash driven websites. Safari on iPad will never be the “best browsing experience” without supporting Flash. Creatives of today’s world will never appreciate Apple forbidding 3rd party application development tools (such as Adobe CS5) for iDevices. HTML5 will only go this slow.