wiredpieces - work, design and ideas by Sinan Ascioglu » interactionDesign

Card sorting – online editions

Sinan — Wed, 27 Apr 2011 15:26:08 +0000

Here are couple of sites for doing card sorting interactively and online. Best part is you can invite participants online to contribute and provide their input. This list is provided by the very awesome UX blog Sixrevisions.

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.

History of the Button

Sinan — Tue, 08 Jun 2010 22:12:14 +0000

Even though technology evolved at a crazy pace the last 100 years, the humble button has stayed at the center of it all. What is its past, its future? Why is it important? What does it say about the interaction between humans and technology? Pictures, stories, revelations, maybe movies.

@SXSW’10 by Bill DeRouchey, Ziba Design

Click here to listen to this podcast »

Button = Scaling

The first panel I attended was one of those I enjoyed most. In this panel, one great point DeRouchey brought to our attention is that buttons are all about Scaling: a button is there to simplify a complicated, large scale motion to a simple push. This is how initially button was defined as, when everything was mechanical. Button helped to compress time in trains, compress distance with telegram, and abstract any kind of motion to a simple push, a poke or a press. This way we started learning that buttons are abstract.

He drew couple of great examples from the era when button was the ‘cool’ thing and was positioned as the center element in catchy advertising pitchlines: “You press the button we do the rest” for Kodak Camera Ad. “Push button driving” for a 1956 Plymouth car ad.

Push buttons bring new motoring luxury – a 1946 Popular Science article

When asked to his grandmother which button she pressed first, she pointed the light switches on the wall.

Similar valuation of buttons still exists, says DeRouchey: “Push button fat loss, Push button publishing…”. But it really makes me appreciate when I heard the example DeRouchey gave as the first remote control: you push the button, inside the remote a hammer hits the steel, which makes a sound, and machine hears the sound through a microphone. Also, the abstraction of buttons turned into symbolization of life changing circumstances: push-button war (referring to nuclear bomb launching buttons). Also, with the overuse, it lost its simplicity, as in airplane panels.

Buttons = where is it?

We can say that, with the introduction of on-screen devices and computers, button’s scaling effect become less visible, and each individual push of a button makes us less excited. Along the 100+ keyboard buttons, comes the UI elements, mouse cursors, which was the theme of an ad by Apple in the 80s. Hyperlinks changed the shapes of the buttons, and it lost its shape. It transformed into “anything can be a button”, and designers even got lost about how to represent a button, and more importantly, what it represents: Yahoo had 3 different types of buttons on its homepage in 1996.

Amazon the number of elements that are ‘not’ a button are very small.

Where are we now?

At this age, buttons don’t have any specific patterns. They don’t need any border, color, underline (recently Google also removed the underlines of the links on their results page.), etc. But they still have many different functions that can perform. And buttons keep changing how we think about things in depth and time:

We are approaching a time when anything is interactive. – DeRouchey

It was first a lever, then it become a circular button, then it become a multi-touch surface. It can even be a fluid, or a dynamic tactile surface.

Couple of interesting notes from the QA:

His favorite button: OK button. He calls this button a “happy moment button”.
My question, ironically:

Since we are in a world where everything is button (I am referring to Amazon.com example), and button has lost its pattern, should we develop a pattern for non-interacting elements on a website? Say, “all non-interactive elements should be dark grey”..

Ten Commandments of User Experience

Sinan — Fri, 19 Mar 2010 21:56:00 +0000

Nick Finck and Raina Van Cleave’s presentation slides from the SXSWi talk are up. Here’s a summary:

User experiences are your everyday experiences—anything from operating a car, to making a pot of coffee, to ordering a pair of shoes online. User experience is the result of your interactions with a product or service, specifically how it’s delivered and its related artifacts according to the design.

In this presentation Nick Finck and Raina Van Cleave will explore the ten characteristics of a great user experience. They will cover all aspects of user experience design such as user research, information architecture, information design, technical writing, interaction design, visual design, brand identity design, accessibly, usability and web analytics. Nick and Raina will also explain how following the ten commandments can boost your web sites, web app, or mobile app’s ease of use, appeal, conversion rates, and more.

50 Free UI and Web Design Wireframing Kits, Resources and Source Files – Smashing Magazine

Sinan — Fri, 05 Feb 2010 21:50:26 +0000

Smashing Magazine gathered a collection of wireframing kits: utencils, indesign libraries, omni graffle stuff, iPhone templates…. No excuse for us to wire an idea any longer than 5 mins.

50 Free UI and Web Design Wireframing Kits, Resources and Source Files – Smashing Magazine.

Interaction that is designed right: proved.

Sinan — Thu, 21 Jan 2010 20:23:04 +0000

We were all interested in digital interfaces. But we were all being reminded about how we interacted with physical things naturally. We were all reading The Design of Everyday Things by Donald Norman. We, as designers, were starting to think if our mothers and our kids could use the product we design.

This is where we came, and it makes me smile in the name of today’s great designers:

Sustainable Web Design (??)

Sinan — Mon, 11 Jan 2010 08:52:58 +0000

So, for a second, think about those days in the automotive industry of 1960s, when the oil prices were low while cars were an oil hog. And nobody was wondering to ask about CO2 emissions of a vehicle to a car dealer. Now that, climate change is on the news and green products are all the engineers and designers working on, it is ok to seek for the car with the highest mpg. That’s how we are becoming more aware of the sustainable design, and learning to be more sustainable as individuals.

Now, for yet another second, think about a concept I would call Sustainable Web Design.

Can we make websites that are more sustainable?

This question might not light any bulbs in our minds for now, as an automotive maker in 1960s would look at you blank if you were to ask about CO2 emissions. But let’s think about these numbers:

Computers today are using around 70 watts of electricity. Use that for an hour, that is 0.07 kwh for your electric bill. Use it just for a second, that is 0.00001944 kwh on your bill. Well, that is the smallest number you will see for the rest of this post.

The average cost of residential electricity was 12¢/kWh (DOE) in the US in April 2009, and let’s assume this is true for the rest of the world (although it is much more expensive). So, that one second will cost you 0.000233 cents. Still looks small. Probably you already figured you wouldn’t make much difference in your bill if your computer turns off one second faster everyday.

Google.com has a very simple design, and doesn't use any extra elements that would result with more loading time.

Bing.com is using background images to create a better looking search page.

Now, let’s change some perspective, and look at these numbers from the perspective of web designers. According to Wolframalpha, Google has a daily page views of 6.8 billion. If Google was a image-heavy website, like its fresh-blood competitor Bing.com, and the loading time would take one second more for all these people visiting the site, it would result

6.8 billion * 0.00001944 kwh = 132’222 kwh per day,

not spent waiting for a background image to load. An average 1 megawatt wind turbine produces 24000 kwh a day. So, 5-6 wind turbines in the world would be working just to meet the need for that very second of loading a background image.

A farm of 5-6 turbines would be working just for that Google background image!

To make more sense of that number, we can say it is making 550’925 miles a day with a 240 watt hour/mile electric car. And if you realized, I tried to keep the numbers on the minimal side: I only included the electricity used by the computers for that second, not any of the modems, routers, ISP servers and Google’s massive servers that would carry all that background image to your computer screen. Then, maybe we should thank to Google for not heaving great but unnecessary examples of scene photography as its background image. But how about bing.com and the rest?

Here, we are possible in the early stages of a new “designing green” paradigm. Being sustainable as an individual through recycling and using less electricity etc. are efforts that we put knowing that we are making a difference. However, as in the example above, there things out of our control and we wouldn’t even worry since our individual input to such waste is very very minimal, probably way smaller than the waste of an un-recycled batteries. But with the introduction of internet to the individuals of the world, as web designers, our designs on the web start reaching to millions of uses a day, hence the massive access oto our products require a new thinking about designing sustainable. And especially, designing sustainable is becoming an issue to the web industry that newer had to deal with such an issue before. More pageviews our websites get, more the responsibility we should have for thinking the potential waste our designs would produce.

So do you think we’ll see a day that most websites would have “Green Website” badge, and users would prefer to use site A instead of site B, just because it is a ‘green’ site. Will a Firefox plugin alert us before opening up a page:

“The website you are currently trying to view doesn’t meet the Kyoto 2.0 protocols. [Continue] [Get me out of here!]“

Then until Google puts a background image to its website, enjoy your 550’925 miles a day with your Electric Car.

BMW

Sinan — Thu, 19 Nov 2009 02:28:12 +0000

I have been working on BMW account at Kirshenbaum Bond Senecal & Partners, since the summer of 2008. Working as an interaction designer in their interactive group, Dotglu, my major responsibility is to make sure this automotive giant’s website bmwusa.com is providing the best user experience, akin to its 6 geared, 230+ horsepowered Ultimate Driving Machines.
Projects that I participate in the concept and design include the experiential sites for vehicle launch campaigns, as well as site-wide maintenance and enhancement.

Analytics, that’s a big deal.

In the design of such large scale websites, the use of analytics should have a very important role in the design process. Working with analytics partners such as Omniture, I am working on analyzing the analytics data to provide us initial design directions, find the potential flaws in the user experience, and success of launched projects.
Analytics information is especially important when it comes to user flows: In the recent redesign of the registration process in BMWUSA, I used the analytics information effectively to provide valuable insight, including dropouts, success rates and conversion. Providing a visual representation of this data, we worked with the client to reduce the number of steps and simplify the registration process.

It’s a thought process, after all.

Dotglu has a very good design approach to make sure what we produce is a result of an established process of thought and design. I am working with other designers and producers to have the workflow of design-to-product with its brainstorming, ideation, sketching and concepting. As an interaction designer, my wireframes are going through phases of client presentations, comping, and they are the key in working with developers on functionality specifications and quality assurance.

OpenProcessing

Sinan — Wed, 18 Nov 2009 02:19:18 +0000

I design and develop OpenProcessing.org, an online community platform for Processing developers and artists to upload and share their interactive sketches, browse and comment on each other’s works, and study the open-source code of any sketch.
OpenProcessing.org provides users to collaborate within this unique community, and support the open source sharing and learning. To support the community and sharing truely, OpenProcessing licenses any sketches uploaded with Creative Commons GNU GPL license.

The roots of OpenProcessing is linked to my thesis project at ITP, NYU. When I developed OpenVisuals, open source visualization framework, it allowed Processing users to easily upload and share their sketches that have visualization focus. In its beta stage, I realized a strong need for ‘flickr’ish place in the Processing community, and OpenVisuals was technically supporting such a structure within its functionality.

Design Process

So, I took OpenVisuals as a template, but took the data visualization concept out. I did couple of user testings to see if it serves well for the group of Processing enthusiasts, and defined my production strategy to enable this tool for the community first, and design further solutions incrementally following the user feedback and observing user behavior.

At the first phase, having set the first priority to providing this sharing tool with its adequate functionality, I kept things minimal: By the time of the launch, website included only 4 sections (homepage, browse, visual page, register/upload), and 1 image (for the homepage). After testing the functionality with couple of recruited users, the number of hits made its first spike when Daniel Shiffman blogged the project on his website.

Since then, the design of the website had been continously improved and updated by observing the user behavior through analytics, feedback and overall website usage.

Recently

Through 2+ years since it’s been live, OpenProcessing.org became the second most-visited site of resource for Processing community, following Processing.org. It became a great library of amazing sketches, source code and communication within the community. With its increasing traffic, the site is currently serving more than 2000 visitors a day, accounting for half a million pageviews a month. It had been named and linked by thousands of websites, including Wired.com.

Read what Bruce Sterling says about OpenProcessing here, here and here.

The Killer Feature: Classrooms

I will soon update here with some info.

Afterthoughts

Since then, OpenProcessing had one major redesign, and additional functionalities such as comments, source code view, rss feeds, tags and tag subscriptions, user profiles. In the long run, I am exploring the options to make OpenProcessing more functional for teaching purposes: Processing is used in many platforms to teach programming within visual context, visualization, dfx, etc… OpenProcessing can be a great tool to gather students together to improve their learning experience and collaboration.

Intimate Game Controllers

Sinan — Thu, 26 Jul 2007 20:49:26 +0000

I worked with Jenny Chowdhury on concepting and game design on her thesis project: A simple video game that is controlled by a pair of bra and men’s boxer. The game is using intimacy and the sense of touch as the major assets of the experience for players/couples. This two player game is played by one standing behind the other and each touching the parts on the undergarments once they see the related icons on the video game. On the further levels, the game gets faster (hence, harder) as they proceed each level. Storyline of the game also conveys an intimate dating.

Gameplay

Game play is very similar to Dance Dance Revolution: you are supposed to press on the corresponding shapes that you see on the screen with a good timing. However, in this game corresponding shapes are attached to a bra and to a boxer through touch sensitive sensors. The level increases as you accomplish catching a given number of shapes. As levels increase, game gets harder, faster but more intimate as new shapes are introduced to the game, which are on more intimate sections of the undergarments.

Design

In the design process, Jenny was already working on building these new controllers as her thesis project. Since we took the challenge of bringing a new type of experience to the game, I focused on creating the most simple game for users so that they can easily map the controller functionality of the undergarments to the actions in the game.

Dance Dance Revolution from Parker Kuncl.

We got inspired by Dance Dance Revolution, since it was a fairly known game with a simple interface, where dancers tap on the circles on the platform that is corresponding to the shape they see on the screen. We applied the same concept for this project, and used distinctive icons on the undergarment sensor areas that could be easily mapped to the icons they see on the screen.

You can have more information on the project at JennyLC.com.

exhibited at:

SIGGRAPH Unraveled07,
Aug 2007, San Diego, CA

Around the Coyote, Jul 2007, Chicago, IL

NYU Tisch Interactive Telecommunications Program Spring Show,
May 2007, New York, NY

NYU Tisch Interactive Telecommunications Program Thesis Event,
May 2007, New York, NY