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

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

Flash is the technology, HTML5 is the adaptor.

Sinan — Tue, 13 Apr 2010 20:31:34 +0000

I wanted to write down my thoughts upon reading the Smashing Magazine article on the gradual disappearance of Flash on the web. Along with the recent discussions rising from Apple’s moves on clearing Flash from the face of the earth, web and iDevices, it stimulated many of us to think if HTML5 can really replace Flash.

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.

A visualization master

Sinan — Tue, 30 Mar 2010 14:45:37 +0000

Moritz Stefaner is a visualization artist, holding a B.Sc. in Cognitive Science and an M.A. in Interface Design. Currently, he is employed as a research assistant at FH Potsdam on the MACE project and work as a freelance information visualizer. His slides on data visualization are an amazing summary for where we are right now, what trends are out there, and how cool working with visualization is.

Eigenfactor is a non-commercial academic research project by the Bergstrom lab in the Department of Biology at the University of Washington. The goal is to map the structure of science. Together, we are developing different visualizations based on citation patterns between scientific journals.

taken from his website.

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.

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.