wiredpieces - work, design and ideas by Sinan Ascioglu

Silverback Guerilla User Testing

Sinan — Fri, 03 Jun 2011 21:53:11 +0000

“Silverback makes it easy, quick and cheap for everyone to perform guerrilla usability tests with no setup and no expense, using hardware already in your Mac.”

This might be a good option to ask for user’s feedback, especially if one contacts you over a problem they are having. This way you can see where they are having a problem + have the them annotate the problem they are having.

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.

photographer vs. youtube…

Sinan — Thu, 27 Jan 2011 17:47:33 +0000

photo by Sally Mann (via Ayse Matay)

youtube post by kicesie

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

Foo Fighters – Everlong Acoustic

Sinan — Thu, 27 May 2010 19:14:47 +0000

YouTube – Everlong Acoustic.

foo fighters – wheels

Sinan — Thu, 27 May 2010 19:13:40 +0000

——————————————————————————-
Wheels – Foo Fighters
——————————————————————————-
Tabbed by: joey_c_13

Tuning: Standard (EADGBe)

-The Song contains the same chord pattern throughout

Chords used:
Dsus2 A A6add9 E
E|——————————————-|
B|—–2———-2————————–|
G|—–3———-2———2———1——|
D|—————-2———4———2——|
A|————————–4———2——|
E|——————————————-|

Dsus2 A A6add9 E
I know what you’re thinkin’

Dsus2 A A6add9 E
We were goin’ down

Dsus2 A A6add9 E
I can feel the sinkin’

Dsus2 A A6add9 E
But then I came around

Dsus2 A A6add9 E
And everyone I’ve loved before

Dsus2 A A6add9 E
Flashed before my eyes

Dsus2 A A6add9 E
And nothin’ mattered anymore

Dsus2 A A6add9 E
I looked into the sky

Dsus2 A
Well we all want something better than

A6add9 E
We wish for something new

Dsus2 A
Well we all want something beautiful

A6add9 E
Wish for something true

Dsus2 A
Been lookin’ for a reason and

A6add9 E
Something to lose

Dsus2 A A6add9 E
When the wheels come down

Dsus2 A A6add9 E
When the wheels touch ground

Dsus2 A
And you feel like it’s all over

A6add9 E
There’s another round for you

Dsus2 A A6add9 E
When the wheels come down

Now your head is spinnin’
Broken hearts will mend
This is our beginning
Comin to an end

Well, you wanted something beautiful
You wished for something new
Well, you wanted something better than
Wished for something true
Been lookin for a reason and
Something to lose

When the wheels come down
When the wheels touch ground
And you feel like it’s all over
There’s another round for you
When the wheels come down
Oh!

When the wheels come down
When the wheels touch ground
And you feel like it’s all over
There’s another round for you
When the wheels come down

END

u2 -where the streets have no name

Sinan — Tue, 27 Apr 2010 15:08:35 +0000

/ U2 / The Joshua Tree (1987) / Where The Streets Have No Name guitar tab

Where the Streets Have No Name by U2 (Live Version)

Transcribed by Richard Zangoli.
This is a transcription to the Rattle and Hum video version of the song
though the album version is reasonably similar.

While Larry is hitting his drumsticks together Edge plays some harmonics-

E—-12——————–12–12———————————-
B———-7—————————-7—————————
G—————7——————————–7——————
D——————————————————–7———-
A——————————————————————–
E——————————————————————–

For the intro, most professional transcriptions suggest that this is what
Edge plays-

E——-10————————————-10————–
B————-10———————–10—————10—-
G———————-12–11–12——————————
D—————————————————————–
A——————————————————————
E——————————————————————-

but to approximate Edge’s sound (at least for the live version) I first
have to set my delay at about 420ms and then play this-
let this high note ring out
E——-10—————————————-10————
B————-10————————–10—————10—
G———— ——–12–11–12p11—————————–
D——————————————————————
A——————————————————————–
E———————————————————————

Edge plays that for a while (or at least something close) and then plays this-

E—-10———————10——————————–10—————
B———–10————————10——————————-10—
G——————12—————————–12————————-12-
D——————————————————————————-
A——————————————————————————-
E——————————————————————————-
RIFF 1
E—10–10–10–10–10–10——10–10–10–10–10–10–10–10–10–10–10–10–
B—10–10–10–10–10–10——10–10–10–10–10–10–10–10–10–10–10–10–
G—12–12–12–12–12–12——12p 11–12–12p-11–12–12p 11–12–12p-11–12
D———————————–12–12–12–12–12–12–12–12–12–12–12–
A——————————————————————————
E——————————————————————————
etc…etc..
So Riff 1 is basically a D chord with a lot of pulling off on the G string.
Finish off with this -

RIFF2
E———-10–10–10–10–10—-10–12–12–12–12–12–12–
B———–8—8—8—8—-8—-8–10–10–10–10–10–10–
G———–7—7—7—7—-7—-7–12–12–12–12–12–12–
D——————————————————————-
A——————————————————————-
E———————————————————————

For the verses Edge initially plays some mute string (sliding his hand up
and down the fretboard) and some chords. Don’t play the first D chord here
but play mute strings instead-

D G
I want to run I want to hide, I want to tear down the walls that hold me inside
Bm A
I want to reach out and touch the flame where the streets have no name

After the A chord play Riff 2 as above. And with the A chord you might want
to do something like this (because I think I can hear Edge doing it)-
E—-0–0–0–0–0–0–0–0–0–0–
B—-2–2–2–2–2–3–2–2–2–2–
G—-2–2–2–2–2–2–2–2–2–2–
D—-2–2–2–2–2–0–2–2–2–2–
A————————————–
E—————————————

For the next verse, play some mute strings and then play something like-

E————–0——————-x—x—-0–0–0–0–0——-x–x–x—–
B—-3—3————3————x—x—-3–3–3–3–3——-x–x–x—–
G—-2———————–2—–x—x—-2–2–2–2–2——x–x–x—–
D—-0——————————x—x—0–0–0–0–0——x–x–x——
A——————————————————————————-
E——————————————————————————-

without a trace….
E————-0————-0—————————————————
B———3———-3——————————-3——————-3—–
G—0—————————————–0—————–0—————
D————————————-4—————————————–
A——————————————————————————-
E——————————————————————————-

Then play Bm and A chords and then Riff 2 again.

For the chorus, the basic idea is-

E—5–5–5–5–5–5–3–3–3–3—2–2–2–2—–
B—3–3–3–3–3–3–3–3–3–3—3–3–3–3—– you might want to play
G———————————-2–2–2–2—— around with the D chord
D——————————————————- and do something like
A——————————————————- this
E——————————————————-

E—2–3–2–3– E–2–0–2–2–
B—3–3–3–3– B–3–3–3–3–
G—2–2–2–2– or G–2–2–2–2–
D—————– D—————
A—————– A—————–
E——————- E—————–

The chorus finishes off with-
E–5–5–5–5–5–3–3–3–3–2–2–0–0–0–0–0–0–
B–3–3–3–3–3–3–3–3–3–3–3–3–3–3–3–3–3–
G——————————–2–2–2–2–2–2–2—-
D———————————————————–
A————————————————————
E———————————————————–

Edge then plays some mute strings and then goes back to Riff 1
In the next verse Edge plays the D, G, Bm, A verse chords loudly and fiddles
around with the tremolo. After the A chord he plays Riff 2. The chorus is
repeated, some mute strings are played, and then Riff 1 again.
The song ends with a similar lick on the D chord as in the beginning and in
the last few bars he plays-

E—–10—————10——————————10—————
B————10—————–10———————————-10-
G——————12———————12——————————-12—
D——————————————————————————-
A——————————————————————————-
E——————————————————————————-

E—10——————–10——————-10—————————–
B————10———————-10——————–10——————-
G———————11—————————11————–11———
D——————————————————————————-
A——————————————————————————-
E——————————————————————————-

That should have all the guitar parts to the song, even if it is set out a
little messily. Note that if don’t have a delay pedal this song just wont
sound right (especially the intro).

Richard Zangoli (ahowden@magna.com.au)

Where the Streets Have No Name
—– — ——- —- — —-

tabbed by: Scott Yanoff, yanoff@csd4.csd.uwm.edu

Intro: it’s just a nice lick on a D chord:

E————-10—————-10—-
B———–10–10————10–10–
G–12-11-12———-12-11-10———
D————————————-
A————————————-
E————————————-

D
I want to run, I want to hide
G
I want to tear down the walls that hold me inside
Bm
I want to reach out
A
And touch the flame
Csus9
Where the streets have no name

I want to feel, sunlight on my face
See that dust cloud disappear without a trace
I want to take shelter from the poison rain
Where the streets have no name

D
Where the streets have no name
Where the streets have no name
G
We’re still building then burning down love
Burning down love
Bm A
And when I go there, I go there with you…
D
It’s all I can do

The city’s a flood
And our love turns to rust
We’re beaten and blown by the wind, trampled in dust
I’ll show you a place high on the desert plain
Where the streets have no name

Where the streets have no name
Where the streets have no name
Still building then burning down love
Burning down love
And when I go there, I go there with you
It’s all I can do

D
Our love turns to rust
G
And we’re beaten and blown by the wind
D
Blown by the wind, oh and I see love
See our love turn to rust
G
And we’re beaten and blown by the wind
Bm
Blown by the wind, oh when I go there
A
I go there with you, it’s all I can do

Chord formations:
—————–
D x x 0 2 3 2 or x x x 11 10 10 (for intro)
Bm x x 4 4 3 2 Csus9 x x x 7 8 10

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.