Airfoil
Audio Hijack
Farrago
Fission
Loopback
Piezo
Soundsource
The Evolution of Piezo
Posted By Christa Mrgan on February 15th, 2012
Powerful and flexible enough for all kinds of tasks, Audio Hijack Pro has been the go-to application for audio recording and manipulation on the Mac for years. But with its power comes complexity, and we’ve long wanted to give people a streamlined way to record any audio on their Mac. More recently, we also wanted to test the waters of the Mac App Store. And so the idea for Piezo was born — we decided to make audio recording on the Mac simple and fun for everyone.
Grant had just joined our team, and Piezo was the first project we worked on together. It was also the first app I designed from the ground up here at Rogue Amoeba. Exciting! So here’s a rundown of how it progressed, from the early sketches to the final shipping product.
The very first interface was a work of programmer art, humble but functional. After coding up the application’s backend and getting things working in a basic state, Grant gave the GUI a working first pass:
Grant’s Primordial Piezo
As you can see, the title bar hints at Piezo’s origins. But “Simple Audio Hijack” was just a placeholder name, keeping the seat warm until the day our friendly support technician Chris suggested we call it “Piezo.” Anyway, that’s what the app looked like the very first time I used it. After playing with this tech demo a bit, the team got together and hashed out the scope and functionality for the true version 1.0.
We wanted the app to be obvious, convenient and fun. I knew from the beginning that I wanted it to have analog VU meters with bouncing needles, a clearly-labeled source selector, and a big, friendly record button. I also knew I did not want multiple buttons for simple recording options. A binary system was far preferable to the unnecessarily complicated array of options you see in, say, elevators in two-story buildings1.
The First Piezo Wireframe
I laid out everything in descending order of importance in a simple wireframe. From the top, there’s the audio source and big friendly record button, then the recording settings, recording name, and time counter. The VU meters are at bottom, along with stripes on the lower right which would eventually be speaker lines. These were a nod to the fantastic Braun radios designed by Dieter Rams, like the RT-20 which ultimately inspired Piezo’s black front panel and wooden frame:
I love the RT-20’s simple face and contrasting wood and black plastic.
Photo courtesy of Teddy
After the initial wireframe was accepted, I started work on a more sophisticated rendering of the app. While searching for various examples of VU meters upon which to base my own, Grant suggested we move the meters to the top of the window, and I immediately agreed. It was such a simple and obvious idea; I had put them down below because it seemed the audio source and record button were the things to focus on, but looking at analog devices, I saw that the meters were consistently the most prominent feature. With the flow of the app shifted slightly, I also moved some other things around and began to play (haphazardly) with textures:
So now we had something that looked like Piezo. Of course, cringing looking at this now, some problems immediately stand out to me:
The iterations continued, and I played with adding the wood frame and changing the color of the hours and minutes portion of the time counter:
This was closer, but this walnut texture was no good, coloring the “Hours:Minutes” section of the counter wasn’t working, and the rough texture I gave the plastic was all wrong. Next:
After a bit more fiddling with colors, textures and overall brightness, I was happy enough with this to ship it. Looking at it now, there are so many things I’d like to improve. I’d love to take another crack at the plastic texture, and I’d widen the counter (the numbers are just slightly off-center, due to differences in how OS X and Photoshop render text2). I also want to work with Grant on improving the settings popover, to better integrate it with the rest of the app. The great thing about software is that it’s never really finished, so I can keep tweaking these pixels for future updates.
I had to stop somewhere, though, and it was time to move on to the icon. I sketched some ideas and used a high-tech scanner (i.e. my iPhone’s camera) to pass them on to Paul, Quentin and Grant:
I still like the net-catching-soundwave idea on the left. With all of the audio capturing we do, I just might get to use it for another app some day, so don’t go stealing it. The middle one is a reference to the name “Piezo” (which comes from piezoelectricity) as well as Superman’s Fortress of Solitude. We decided the one on the right was the best for Piezo, though, and I set to work on it.
Umm…nope. Nuh-uh. These were definitely not good. This was a problem, because while we all liked the concept, for use on Mac OS X, the icon needed to approximately fit into a square, making the face way too tall (regardless of whether I emphasized the VU meter or the record button). Oy vey! I went back to the reference images I had originally collected, and realized what it needed:
A handle!
The handle made all the difference. It totally solved the height problem while keeping the icon square. Success! After a few more tweaks, the final version looked like this:
With icon and interface finalized (for now!), we continued to test and tweak the app until it was ready for release.
So there it is, the process from programmer cut-and-paste art to a final, shipping app. Piezo was a super fun project, and I look forward to continuing to improve it – I have tons of ideas for it. For now though, I hope you’ve enjoyed this tour through the evolution of Piezo, and I can’t wait to show you our next project. Soon!
Until then, check out Piezo now!
Footnotes:
1. If a building has only two floors, an elevator only ever has one travel option (to the floor opposite the current one), so why even bring the numbers “1” and “2” into it? Not to mention that the “Close” button never responds, “Open” is pointless – ARGH!
In Alice’s world, “the books would be nothing but pictures,” and in mine, elevators in two-story buildings would have no buttons at all. When passengers stepped in, the doors would close, the elevator would move to the opposite floor, and the doors would again open. I can see a case for keeping the button marked “Alarm”. Maybe. ↩
2. Why doesn’t Photoshop use OS X’s font-rendering? Who knows! ↩
Scott says:
February 15th, 2012 at 6:32 pmI want to lick your icon. Am I the only one?
The feature that really stand out for me is the textures on the metal bezel surrounding the button. And I love the detail that the handle is recessed into the top of the cabinet. You feel like you could collapse it down and have a smooth top. Perhaps you could round out the corners ever-so-slightly on the back edge so that when the handle was put in the down position the edges would fit perfectly with the inside radii of the handle?
Great article, thanks for taking the time to put it together.
aj says:
February 15th, 2012 at 7:07 pmNot sure if this helps at all… If you command+T type in Photoshop and use your arrow keys, you can move type on the sub-pixel, allowing you to better match how Mac OS X renders type (also, try setting type rendering to crisp!)
David says:
February 15th, 2012 at 7:08 pmAcorn uses OS X’s font-rendering. I just found out and have been playing with adding a Acorn into the workflow to render text + text effects, then bring the rendered pixels back into PS. Works alright
DB says:
February 15th, 2012 at 7:19 pm“Why doesn’t Photoshop use OS X’s font-rendering?”
My guess? Adobe seems to be trying to make Creative Suite their own platform independent of whatever operating system CS is running on—AIR seems to figure prominently, and Adobe seemingly pays little attention to the conventions of MacOS or even Windows. Write-once–run-everywhere seems to be their mantra these days.
James says:
February 15th, 2012 at 7:22 pmAm I the only one who hates the trend of every app having its own “look” rather than fitting coherently with OS X’s design patterns? It reminds me of windows (see, for example, winamp). Heck, Piezo even has the ugly excessive border padding of aero (except it’s fake wood paneled now rather than transparent). Skeuomorphism is ugly when Apple does it, and it’s ugly here.
g says:
February 15th, 2012 at 7:35 pmNit: On the icon, the ends of the VU meter scale are cut as if the center of the arc is somewhere near the bottom of the record button, but the VU needle and the break in the middle of the scale are centered elsewhere.
Mark Sigal says:
February 15th, 2012 at 7:38 pmGreat write-up, and this is one category where you really appreciate understanding the thought process, detail and iterative steps about how the sausage was made.
I look forward to checking out (happy Audio Hijack Pro user).
Paul Kafasis says:
February 15th, 2012 at 8:09 pmScott: Piezo Icon Lollipops – brilliant!
David: We love Acorn, and have been friends with Gus and Flying Meat for nearly a decade now – we’ll definitely have to consider how that might fit in.
James: We appreciate consistency quite a bit, and consistency when it comes to interaction is crucial. However, there are multiple ways to be consistent. Everything can look the same – it largely did in Mac OS X 10.0, 10.1, 10.2. However, that’s relatively minor, and at this point, using nothing but standard widgets will lead to a dated-looking app. Much more important is ACTING consistently, and Piezo certainly acts the way anyone would expect a Mac app to behave.
We’re sorry you find the app ugly, though I can certainly say you’re in the minority there. As for “skeuomorphism”, I can’t say I see that as an accurate description of Piezo. Is the wood paneling required? No. But it’s a far cry from the paper edges in iCal or worse, the impossible leather *buttons*.
Mark Sigal: Glad you enjoyed it!
Mark says:
February 15th, 2012 at 8:23 pmIf you had a lift that worked out when people were in it, you wouldn’t need a button. But you’d still need a button. You’d need a button because human beings are human beings and need to do something they always do or they freak out and complain it’s not working. Put in a button to the lift. Put a label above it that says “go” if you feel necessary. Don’t wire the button up. People can press the button once, stab the button as long as they want or ignore it. The lift will still work elegantly.
Willi says:
February 15th, 2012 at 8:24 pmSorry, but I really prefer the abstract, unified look of the original UI. It’s compact, efficient, pleasant to look at, offers all information at a quick glance, and really is elegant.
The skeumorphic version takes up more space, adds visual noice and makes it more difficult to instantly recognize which elements are functional and which are merely useless textures (like those lines at the bottom).
I understand that indie developers have to make their apps stand out of the crowd, which can be especially difficult if functionality is limited anyway (I don’t mean that in a negative way). And I do think that custom UI design can be an advantage. But personally I feel this should be limited to painting the standard UI elements in a different color or giving them a glossy look or some other texture (some Twitter clients on OSX do stuff like that with positive results). I think skeumorphic designs can be useful when you have a really complicated app, so a more familiar look might be a first introduction to how the app is supposed to work. But skeumorphisms just for aesthetics? They really should stay in the 90ies!
John C. Welch says:
February 15th, 2012 at 8:25 pmHaving built applications using nothing but the OS defaults, you get functional, but ugly applications. (Fungly?)
Given what Piezo does, I can’t actually see how the design is bad or even somehow sub-optimal, and it is very pretty. I like pretty. Functional does not require ugly.
Bill R. says:
February 15th, 2012 at 8:25 pmGreat post, thank you for sharing an inside peek at how the design progressed. I had not seen Piezo before — I will definitely download it now!!
Joe says:
February 15th, 2012 at 8:30 pmThe light for the power button on the icon is off-center vertically. Pegs my OCD meter :-)
jadam says:
February 15th, 2012 at 8:38 pmLooks like a really nice app. However, if you’re really sweating the details, then the needle in the icon should match the simplified unit scale of the meter itself. That is to say, the edges of the yellow/red scale seem to roughly line up with the center of the recording button, so the base of the needle should too. That way the slope of the needle will always match the slope of the unit scale, which is not the case in the icon.
There, I’ve picked that nit.
Geoffrey Wiseman says:
February 15th, 2012 at 8:40 pmHow would your two-storey elevator know when it can stop moving between floors? With no buttons it would need motion and/or weight sensors to tell if it were occupied?
Scott Falkner says:
February 15th, 2012 at 8:52 pm2. So that you get the same pixels no matter in what OS, or what version of that OS, you open the file.
Adobe, for the most part, tends to avoid anything that is platform specific, such as standard OS widgets to manipulate palettes. This is so the programs look roughly identical on either Windows or Mac so that the documentation can be mixed platform and only needs to be made once. This is almost certainly a mistake.
Andrew says:
February 15th, 2012 at 8:54 pmAdd me to the minority. Stylistically this looks pretty sexy, but the more I look at it the more shallow and depressing it feels. Especially because most of the style can be attributed to Deiter Rams, and your efforts went more into skillful copping of that style and littering some clunky typography around it. It does make me want to throw out my computer and entertain myself in front of a real RT-20, though. Maybe that was the point. Well done!
As for it being skeuomorphic, I can’t see how you wouldn’t think that would apply. This is textbook skeuomorphism. A design copying the form or appearance of an object made in a different material. Apple’s take on the trend is 1,000 times worse, I’ll give you that. Look back at this in 10 years and write about how proud you still are of it. I’ll be reading.
I’d love to pat you on the back with your buddies, but this leaves me kind of empty. Go Majority!
Mike R. says:
February 15th, 2012 at 9:11 pmI really do like the way the icon turned out, but as for the app itself, on balance I have to vote with those who prefer Grant’s original prototype UI to what you shipped. All that chrome is very pretty but useless. The net effect is egocentric.
That said, the app looks like a great idea that serves a genuine need, so that’s all right.
Jess Brockstein says:
February 15th, 2012 at 9:15 pmLove it love it love it! Freaking gorgeous and it’s fun to use. I cannot imagine what the haters are thinking, the prototypes are so clearly inferior, it’s not even funny.
I’m glad it turned out the way it did because it’s great.
jm says:
February 15th, 2012 at 9:32 pmsometimes, you hold the open button so other people can get in without the door closing on them.
won says:
February 15th, 2012 at 9:35 pmYou just might be able to find some work at the Sirius Cybernetics Corporation, what with that attitude to “elevators”. https://en.wikipedia.org/wiki/Technology_in_The_Hitchhiker%27s_Guide_to_the_Galaxy#Happy_Vertical_People_Transporter
Aidee says:
February 15th, 2012 at 9:37 pmThanks for sharing a journey of development; illuminating and appreciated.
Damn you Joe for flagging the unseen as now seen :) Thankfully it’s rare for one to see the icon at such a size and knowing RA they’ll attend to it very shortly!
tunesmith says:
February 15th, 2012 at 10:02 pmThis is great! Although I actually thought the net catching sound wave was a ham.
Henk Poley says:
February 15th, 2012 at 10:14 pmThat logo is going to say “Open the podbay doors. Dave.” any day now ;)
Alastair Leith says:
February 15th, 2012 at 10:19 pmI can see both POVs on the abstract vs. the figurative design principles and it probably is a horses for courses problem as Willi suggests. The success of one apps design does not negate the approach of another just because they each explore opposing design principles.
I think the use of the word ‘skeumorphic’ while now the default term used to (depreciate) talk about figurative and physically literal design surface treatments and UI elements — it is maybe a bit too strong a word and a over-reduction of the complexities around software interfaces in general.
Fake spokes on a car wheel are ‘skeumorphic’. They are clearly a slapped-on design abomination designed to resonant with yesterday’s (or yesta-year’s) product for whatever reasons of familiarity/tradition/conservatism.
In the world of software, referencing physical objects is a little different. To use the word ‘skeumorphic’ accurately in software interface design on the Mac, wouldn’t one be doing say an MacOS 7 looking non-functioning skins for a OS X Tiger app with Tiger NIB elements actually doing the work?
Software is a virtual representation of information, that’s it, zero physicality beyond pixels on a screen. So I prefer to see these kinds of literal design representations from real-world objects in terms of post-modern referencing — a visual short hand — and with that a very specific kind of nostalgia, a nostalgia for the real and that comes with much more humour and irony than non-functional spokes on a car wheel.
Wynton Marsalis said in the Ken Burns Jazz series, ‘Jazz music says “Welcome” ‘. To me that’s the first thing this kind of figurative, representational and softly nostalgic design methodology is about. Sometimes it’s done better than others, sometimes it’s overly literal or overly ‘big’ when a subtle introduction would have been more appropriate. Yet attempting to reduce and dismiss all design using textures and UI elements that reference real-world objects by employing the word ‘skeumorphic’ is a false logic employed I imagine by the least imaginative and humourless people.
Jeff Johnson says:
February 15th, 2012 at 10:20 pmtunesmith: I don’t blame you, I thought it was a ham at first too. ;-)
Eugene Kim says:
February 15th, 2012 at 10:41 pmThe difference between an app and a great app! My app UI imagination as a developer honestly stops at the first screenshot which makes posts like these so great for people like me. Thanks!
Alan Watson says:
February 15th, 2012 at 10:44 pmIn elevators, the “open” button is an important safety feature that can be used to stop the doors closing on the baby in a stroller, person in a wheel chair, dawdling child, or who ever else doesn’t get in quickly enough.
Huxley says:
February 15th, 2012 at 11:01 pmWhinging about skeumorphism seems to be some people’s new bicycle. I look forward to their complaints about the skeumorphism of on-screen keyboards or buttons on apps.
Ryan says:
February 15th, 2012 at 11:21 pmThose elevator buttons bugged me for a while, so I finally asked the service guy at a previous job about them.
The open and close buttons in elevators do serve a purpose, but they’re not used by most people. All elevators, to my knowledge, have an independent service mode where the car drives itself rather than the control computer doing it. The open and close buttons are used in this mode.
Elevators also have a service configuration option for the door open delay (i.e., the time the door will remain open before automatically closing). Most elevators have this set at the safety minimum so the close button does nothing, but some elevators (e.g., loading dock elevators) often have it set higher and the close button will cause the door to close sooner than it otherwise would.
Alarm Technician says:
February 15th, 2012 at 11:46 pmTo satisfy anyone’s trivia cravings: The elevator open and close buttons are for fireman. When a smoke outside of one of the landings is tripped, the car recalls to the primary or alternate floor, opens its doors, and locks into fire mode; the fire hat indicator should light up. To operate the elevator in this mode — provided you have a fire key, of course — you must open and close the doors explicitly.
The other mystery button, often labelled “alarm”, only sounds a mechanical bell or siren and then only as long as you hold down the button, nothing more. Like a car horn, it’s simply intended to alert others within earshot. The emergency telephone automatically dials a call center where an operator, who may also answer for Joe’s plumbing and a hundred other clients, will take your call reading prompts from the computer screen that instruct him how to answer.
Christa Mrgan says:
February 15th, 2012 at 11:55 pmAlastair Leith: Thanks for weighing in so eloquently with a mini post of your own – an insightful take on the subject.
Joe and Aidee: I appreciate the feedback, but it IS vertically centered! The bit of gloss above it throws it off. Sorry to hear it bugs you!
tunesmith: You’re the fourth person to say so today!
jm: That never works when I try it! And you can always throw a hand out to stop the door, which feels more heroic to me, anyway.
Andrew: I take it as a compliment that you think Piezo mimics Dieter Rams’ designs so closely! I’d say you need to have a closer look at his work, though, as this is much, much too busy to resemble his sparse and minimal style. I do love his work, and as I mentioned, looked to it to inform the app, but ultimately, Piezo’s window would need to be larger and have smaller buttons to really capture his style.
Scott Falkner: This is the explanation I’ve heard from many people today. Thanks for taking the time to respond.
Geoffrey Wiseman: I was thinking that a basic sensor in front of the doors on each floor would alert it to the presence of potential passengers. As for when to stop moving, I think that problem has already been solved and has nothing to do with the buttons.
g: I know! Mea culpa.
Mark: You’re probably right!
Everyone: love it or hate, I appreciate your taking the time to respond. Ok, I mostly appreciate the people who love it taking the time to respond, but it’s good to hear from the haters, too. Keeps the ego in check. Thanks, all!
James says:
February 16th, 2012 at 12:32 amI don’t think any of us “anti-skeumorphs” (sic) are arguing that good UI design consists only of using OS defaults or saying you should eschew skeuomorphic elements entirely. However, there’s using skeuomorphic elements in your design, and then there’s unaesthetic cruft, like the updated iCal/Photo Booth/Address Book in Lion (or Game Center and Find My Friends on iOS). Where do you think Piezo lies on the continuum?
You’d be better off taking cues from Rams’ ten principles of design, rather than that one particular Radio (although it certainly is a very nice radio).
Geoffrey Wiseman says:
February 16th, 2012 at 1:06 amChrista Mrgan:
I’m not sure I understand. Your typical elevator stops moving when:
– no-one has pressed a button in the interior to tell it to deliver them somewhere else
– no-one has pressed a button on a floor it services to summon an elevator
It’s a little more complicated than that — if there are multiple elevators, even if one is being requested, if another has been dispatched, a central system will probably decide which elevator is to respond, and there’s often a floor to which the elevators return to ‘wait’.
But in your proposed button-less system, let’s say a person calls the elevator on one. The elevator would open, close, rise to the second, open and close. If the elevator isn’t aware of the presence of people, there are several potential problems:
– the rider may have failed to exit on the 2nd (fiddling with a bag, or whatever) and now has no way to request an exit.
– the rider may have exited, and another rider entered who didn’t press the exterior button. the elevator needs to know to take this rider down to “one” even though no button was pressed.
Those cycles could repeat indefinitely, and if there are no buttons to request activity and no sense of where riders might be, the elevator is bound to make the wrong decision. The alarm button would paper over those problems, but just barely.
I recognize this isn’t the point of your post, and this isn’t the best place to discuss elevator design, I guess I was just curious what your thought process was here. I would say Piezo has a skeumorphic design, but that doesn’t bother me as much as it does some, so I like the look.
Jason says:
February 16th, 2012 at 3:25 amNice article, explaining the evolution of ideas towards a shipping application. Thank you for sharing.
One question though, the analog gauges scream out ‘eyes’ to me – did you ever arranging the other components into a face-like layout? The recording button as a nose, etc. perhaps fanciful and might not work. I haven’t tried, but if it helps…
Tom says:
February 16th, 2012 at 6:26 amI love the input of the design “experts” who don’t really understand the word “skeumorphism”.
Peter Johnson says:
February 16th, 2012 at 6:57 amPersonally I think the “realistic” design works well with a simple app like this, nicely done.
I have the opposite view to one of your commenters who thought realism should only be used for complex apps. I think Apple’s approach falls down on Final Cut X or Motion. say. The more complex the app, the higher priority should be placed on standardisation of look and feel, to reduce the learning curve.
Thanks for the article.
Andrew says:
February 16th, 2012 at 10:17 amI enjoy your attempt to wink away my criticism, which I’m sure you’ll continue to do and just bask in the compliments of your fans, but what I did say is that you copped Rams’ style and littered it with clunky type. I agree, the end result is quite cluttered and awkward.
And I did not really criticize it for being “skeuomorphic.” I just said that it *was* skeuomorphic. Someone else had said it and it was shrugged off. It is absolutely skeuomorphic. A trendy word about a trendy style. Let’s call it, “high-tech apps and their icons designed to look like cool, olde-tymey things.”
If you don’t want to hear negative criticism, don’t post your process on the Web. E-mail it to your family and friends. Or turn off comments and just declare how wonderful your design is without getting any response.
Sandra says:
February 16th, 2012 at 10:44 amElevators:
The elevator doors in my building have handles, you can just open them willy-nilly, it’s kinda dangerous. And it’s not accessible to everyone, either, since the doors are so heavy.
Skeuomorphism:
I don’t quite see the difference between a wood-looking trim and a leather or paper look, to be honest. Maybe I just have a design blind spot for skeuomorphs, I usually prefer designs that choose another direction.
Christa:
Thanks for this honest and generous look at your process!
Tom says:
February 16th, 2012 at 12:13 pmAndrew: You keep using that word. I don’t think it means what you think it means.
Michael N. says:
February 16th, 2012 at 1:35 pmIt’s interesting to see the development screenshots because I actually wasn’t aware that the counter displayed real time in [hrs][min][sec] – now that I know it, I obviously prefer it without the labels (I may have guessed it after my first multi hour recording)
Also – even as an Audio Hijack pro licensee – I find using Piezo much more enjoyable.
Christa Mrgan says:
February 16th, 2012 at 2:09 pmGeoffrey Wiseman: I do see what you mean about the conundrum of multiple elevators. Let’s confine this case to two-story buildings, though, which typically (though not always) have only one elevator.
I don’t think there should be a button to call the elevator in the first place – I think standing in front of the elevator should suffice (a sensor similar to those used in automatic doors would work well, though it’d need to be altered slightly, so as not to call the elevator every time a person walked past it). A simple light system representing the elevator’s current location and transit would be great feedback, as well.
As for opening the doors if you’ve missed the window of opportunity to exit, simply pressing the doors while the elevator is stopped would be the most obvious solution to me, and much preferable to a button that’s not even on the door. As elevators operate now, you can pry the doors open with a bit of effort even when the elevator is in motion, causing the elevator to stop (I enjoyed doing this in malls as a rebellious teenager). But having a “push area” on the door (similar to the rubber strip you push on the back door of a bus to open it, though ideally less ugly) seems much more obvious and direct than a button you have to search for amongst several.
And while you’re right that this isn’t the ideal place for this discussion, it’s nevertheless an interesting one.
Mike Doodson says:
February 16th, 2012 at 2:23 pmI think the icon is fabulous! But I agree with Jadam that the needle and the boundary between normal levels and high levels should be realigned so they “point” to the centre of the red button – just looks neater and more logical. See my version at http://www.flickr.com/photos/doodson/6887651957/in/photostream
Christa Mrgan says:
February 16th, 2012 at 3:03 pmMike Doodson: You’re right! That does look more logical. I’m not sure how I let the needle in the icon get so off…
Allan White says:
February 16th, 2012 at 5:44 pmI hate skeuomorphism in general. But this, I love.
It would only be a problem, in my opinion, if you had added a rotary knob. Those accursed, misguided designers who drop rotary knobs into a user interface *where there is no way to turn a knob* draw my ire. Audio plugins – you know who you are. At least make it a slider, people. That, I can drag, with mouse or touch.
Will definitely check this app out. Thanks for the excellent writeup.
Marc Nothrop says:
February 17th, 2012 at 4:02 amWonderful response from Alastair Leith… I wanna sound like that one day. ;)
While it’s all basically been said, the emotional response, nostalgia and association are all valid areas for designers to be working. Like anything it must be done well, and with good intent.
Piezo has an attractive design, and those who love it will (hopefully!) form an attachment. If the developer treats them well, everyone will be rewarded.
Maybe some of the complaints come from the ‘useless’ meters — a responsive UI might allow users to collapse the meters, if that’s not too much of compromise!
A drag handle below the meters could let users progressively crop the bottom of the meters (to the top of the Piezo labels), then scale to a minimum size, before finally being hidden entirely, replaced with a central Piezo label.
…but then it may not be ‘Piezo’. :)
REM says:
February 17th, 2012 at 11:43 amI originally thought you meant (and others misinterpreted) elevators in 2-story buildings would not have buttons on the inside, that they would still have a button on the outside. A later comment indicated the opposite, there would be no buttons on the outside either.
I agree with the idea that 2-story elevators could get away with no buttons on the inside. When someone enters the elevator, the door closes, the elevator moves to the opposing floor, and the door opens.
I disagree with no button on the outside for several reasons.
When a user first interacts with the elevator, they need to initiate an action. They have to tell the elevator they need to use it. Disregarding the sheer confusion users would experience the first time they encounter a buttonless elevator, how would a user know their “request” has been registered? Any additional notifications (lights, sounds, etc.) would be extra layers of complexity which are not necessary when a user has a button available.
Pressure plates and sensors are always prone to mistakes. No one stands directly in front of an elevator door. They push a button and stand back for a couple reasons. One, if there is a floor indicator, they can view the current state of the elevator. Two, and more important, people stand back to give room for passengers who may be in the arriving elevator to exit. If I stood directly in front of an elevator, and then step back, how does the elevator know if I am still there, or I’ve changed my mind? What if I am standing in front of the elevator having a discussion with someone, or talking on my phone?
In a Star Trek future, sensors will know with certainty whether we intend to use a given door which will open at the precise moment needed, but we are certainly not there yet and may never arrive at that fictional version of the future.
Deka says:
February 17th, 2012 at 7:01 pmThanks guys for sharing your design process, appreciate it.
For the people who’ve gone to grandma’s on the subject…
‘skeuomorph’
Oxford dictionary definition:
noun
an object or feature which imitates the design of a similar artefact in another material.
I agree with Apple’s design choices regarding Calendar, Contacts, etc… many people still use a diary/address book. Mimicking these on devices makes the transition for these people much easier as they can relate to it more. Design isn’t just about the way something looks, the function is also important.
Maybe the option to change the ‘skin’ would please the people who are more interested in fashion rather than function.