« Thank You. | Main | RetroSketch Postmortem »
Tuesday
Jun292010

A Tale of Two Knobs

The story of RetroSketch is really the story of its knobs. I always thought that figuring out CoreGraphics would take the majority of my time. Turns out that was the easy part.

I could write about how I wrote all this code to doctor the results of atan() depending on the quadrant of the angle, how I computed the distance of a touch from the center of knob, and how I threw away all of that as soon as Mike Ash told me about atan2() and hypot().

I could also write about how having two instances of the same knob class is a bad idea, how their events arrive independently and result in staircases when you try to draw diagonals.

But no, instead I will tell about my first experience with UI design. It's kind of funny, I figured I really didn't have much design work ahead of me with an interface that consists of a grey backdrop and just two knobs. I was wrong. (BTW coming up with a couple of marketing screenshots for a UI that consists of two knobs on a grey expanse is really fun)

The Early Placeholders

As soon as I started hacking the code, I knew I had to draw something on the screen to make sense of touch information. I just needed something to show me the boundaries the software was expecting. So I simply drew a red circle at the outer edges of the knobs.

I also drew a solid blue circle in the center of the knob which represents the dead area. I needed that to avoid the scenario where a user goes straight across the center. If the knobs were sensitive in the center, they would register that move as a sudden 180 degrees twist of the knob, triggering an ugly jump on screen.

20100628EarlyDevKnobs.png

In this early test you can see I was also trying out various ideas. The rects in the center were a comparison between 1 pixel wide lines and 2 pixels (2 pixels won). The label at the top was there to display realtime test data (angle, relative movement, etc.) reported by the knobs.

The Ellipse around the edge allowed me to see into the background (an very early rev of the texture). More importantly, notice that both the aluminum layers and the screen edge were casting shadows at this stage of development. Eventually I had to turn off these shadows for performance reasons. That was the hardest tradeoff I made in the project; those shadows are the real reason that lines in the mechanical device look black in the first place. Without these shadows, I had to artificially darken the texture to make up for it (a poor solution). In the future (if this ever turns a profit), I would like to re-write the whole thing in OpenGL to implement the shadows as shaders.

Finally, notice the placement of the knobs. Placing them in the bottom corners seemed natural at the time, but of course that changed as soon as I had an actual device in my hands.

The RoboSketch Era

I knew all along the placeholder was temporary, but after seeing it for so long I had trouble imagining anything else. I had a series of issues in my head that were complicating matters.

  1. I decided early that drawing a border to house the knobs would look silly and take away screen real estate. The lack of border meant I could not use pictures or renditions of real world knobs. Real world knobs floating over a "glass" that supposedly houses moving parts seemed to work against the illusion I was trying to create.

  2. I wanted large knobs. A large radius gives the user more control, so I wanted the largest knobs I could fit. Which conflicts with...

  3. Knobs floating on the screen cover up the user's drawing area. The problem might be mitigated by making them transparent.

  4. The knobs need to be as self explanatory as possible.

So this is what I came up with:

20100628CDKnobsFrame.png

As you can see, I was seriously confused at this point. I actually thought of going with this design for a moment. I thought that by making them futuristic I could somehow justify having them float above the screen defying all logic. I still had to make them transparent, which really didn't make sense either.

Worst of all, having futuristic knobs clashed with the RetroSketch name. This is when I started to consider the possibility of renaming the whole thing to RoboSketch. To pull that off, I figured I should add some other futuristic features. I would have to implement a document model to save and load works in progress. I had justified not doing this, because the original retro device didn't, but a robo device certainly should. I also thought of adding some automation features to really earn the robo designation.

This RoboNightmare quickly got out of hand. Thankfully, my trusty friends at NSCoder Night DC talked me out it. It made no sense. I was turning my back on my main audience: the nostalgia market. So it was back to the drawing board.

On a side note, the discs in the picture above were Acorn'ed on top of a really old screenshot. If you look carefully, you can see two really large, but thin red arcs in both bottom corners. They are very transparent so it's really hard to see them. This was an early experiment. Placing the center of the knobs right in the corner afforded a huge radius, which in turn gave users detailed control (if you knew how it worked.) The tradeoff was that you could no longer turn the knobs in continuous circles. Problem was, people who tried it didn't get it. This confirmed two important design parameters:

  1. The knobs need to be visible and obvious.

  2. When in doubt, people tended to move their thumbs in circles. It is also interesting to note that this circular motion does not really come natural on the real devices with physical knobs. It is possible to go in infinite circles, but most people move using a series of short twists. Still, people seemed to assume that continuous circles were always the norm.

The Final Design

Disappointed, I went back to the placeholder design in my head. I was now convinced that making it transparent, but very red, would make it visible yet unobtrusive. Somehow being the only thing with color would set it apart visually. Instead of the thin red circles I started with, I would make them thick and represent the area of sensitivity. This meant, the blue area was no longer necessary, it would simply be empty space.

In addition, I wanted to add arrows pointing up and down on one knob and left and right on the other. I also wanted to add the text "UP" & "DOWN" along with the arrows, curved inside the knob. Finally I wanted the text and the arrows to spin around as the knob was turned.

I ran into trouble with this design. My trusty Opacity failed me for the first time. It could not curve the text the way I wanted it (Please don't take this out of context, I love me some Opacity somethin' fierce.) So at the next NSCoder Night DC meeting, I asked my friend Mark Boszko (a.k.a @bobtiki) to help me out drawing my odd shapes.

Instead of simply doing what I asked for, Mark questioned my design (Thank God!). First to go were the directions written into the knobs. Having copy as part of the knob design complicated matters (i.e. required localizations) and made things look cluttered. He also convinced me to get rid of the color. So we wound up with two grey doughnut-shaped knobs with straight double tipped arrows going either side to side or up and down.

That particular day, we happened to be graced by the visit of Sandy Wang (Mike Ash's lovely wife.) She suggested the arrows would look better curved. Both Mark and Sandy whipped out their laptops and started drawing knobs for me. (Have I mentioned how much NSCoder Nights in general rock? I recommend you find one near you)

20100627Contributions.png

Sandy's version is shown on the left and Mark's on the right.

Once I saw these, I knew this was it. The only thing left was to implement the design within the app. While both mockups were really good, they needed some retouching. I mostly tweaked the proportions to my liking. Problem was, I still had trouble drawing the curved angles in Opacity. So I decided to take matters into my own hands and draw the knobs from scratch using CoreGraphics.

20100628CGKnobs.png

These pictures show intermediate drawings generated live by the app using CoreGraphics calls. I used different colors on the graphical components to differentiate them. I could now change the angle and proportions of these knobs programmatically.

Turns out, this approach not only was fun for me, but it also gave me a smooth looking knob on the Retina display of the new iPhone 4. It also has the advantage that I could easily tweak parameters to make the knobs scale for both the iPad and iPhone versions of the app.

Final Touches

The last touch I added to the knobs, was the ability to fade out completely when not in use. When the app first launches, they are visible and remain so, until they are used. After they are used, they gently fade away. Touching anywhere on the screen makes them reappear momentarily. It is not necessary to wait for them to appear to start using them, just move the knobs as if they were there and it works as you would expect. By doing all of this, the knobs interfere as little as possible with the drawing. It also allows the user to take a snapshot using the built in capabilities. (just press the power button and the home button at the same time, snapshots are stored in the Photos app.)

20100629Logo.png

It was a long journey for me, but it was well worth it. When it was all said and done, I was so happy with the result, it became the basis of both the product's logo and icon.

So that is the story of my rather simple knobs. I hope this post provides some useful insight. I also hope you have as much fun as I do twisting these knobs!

PrintView Printer Friendly Version

EmailEmail Article to Friend

References (98)

References allow you to track sources for this article, as well as articles that were written in response to this article.
  • Response
    Neat Web site, Continue the useful job. Thank you!
  • Response
    Nice Webpage, Maintain the fantastic work. Thank you.
  • Response
  • Response
    Response: dog
    Little Mustard - Blog - A Tale of Two Knobs
  • Response
    Response: Magician NJ
    Little Mustard - Blog - A Tale of Two Knobs
  • Response
    Response: Kurgis Dermatology
    Little Mustard - Blog - A Tale of Two Knobs
  • Response
    Little Mustard - Blog - A Tale of Two Knobs
  • Response
    Little Mustard - Blog - A Tale of Two Knobs
  • Response
    Little Mustard - Blog - A Tale of Two Knobs
  • Response
    Little Mustard - Blog - A Tale of Two Knobs
  • Response
    Response: telefonsex
    Little Mustard - Blog - A Tale of Two Knobs
  • Response
    Response: interior design
    Little Mustard - Blog - A Tale of Two Knobs
  • Response
    Little Mustard - Blog - A Tale of Two Knobs
  • Response
    Little Mustard - Blog - A Tale of Two Knobs
  • Response
    Response: cheap essays
    Interface design is usually linked to numerous initiatives by computer systems, to automobiles, to commercial planes, these types of initiatives contain most of a similar basic human interactions still additionally call for several special ability and information.
  • Response
    Little Mustard - Blog - A Tale of Two Knobs
  • Response
    Response: Roof Ventilation
    Little Mustard - Blog - A Tale of Two Knobs
  • Response
    Little Mustard - Blog - A Tale of Two Knobs
  • Response
    Little Mustard - Blog - A Tale of Two Knobs
  • Response
    Response: google.com
    Little Mustard - Blog - A Tale of Two Knobs
  • Response
    Response: USHUD
    Little Mustard - Blog - A Tale of Two Knobs
  • Response
    Little Mustard - Blog - A Tale of Two Knobs
  • Response
    Response: ushud
    Little Mustard - Blog - A Tale of Two Knobs
  • Response
    Little Mustard - Blog - A Tale of Two Knobs
  • Response
    Response: USHUD
    Little Mustard - Blog - A Tale of Two Knobs
  • Response
    Response: USHUD
    Little Mustard - Blog - A Tale of Two Knobs
  • Response
    Little Mustard - Blog - A Tale of Two Knobs
  • Response
    Response: USHUD
    Little Mustard - Blog - A Tale of Two Knobs
  • Response
    Little Mustard - Blog - A Tale of Two Knobs
  • Response
    Little Mustard - Blog - A Tale of Two Knobs
  • Response
    Little Mustard - Blog - A Tale of Two Knobs
  • Response
    Little Mustard - Blog - A Tale of Two Knobs
  • Response
    Little Mustard - Blog - A Tale of Two Knobs
  • Response
    Little Mustard - Blog - A Tale of Two Knobs
  • Response
    Little Mustard - Blog - A Tale of Two Knobs
  • Response
    Response: UK Models Review
    Little Mustard - Blog - A Tale of Two Knobs
  • Response
    Little Mustard - Blog - A Tale of Two Knobs
  • Response
    ... עבודה בעגלות בקנדה - ואפשר אפילו לקבל באמצעותנו מענק לחיילים משוחררים, ואיך להוציא את הויזה. העגלות וציורי השמן מושלים בכיפה באופן כמעט בלעדי, בהשקעה ובעבודה הקשה של הסינון וההתאמה. לוחות שמרכזים עב... Little Mustard - Blog - A Tale of Two Knobs ...
  • Response
    Little Mustard - Blog - A Tale of Two Knobs
  • Response
    Response: UK Models Review
    Little Mustard - Blog - A Tale of Two Knobs
  • Response
    Little Mustard - Blog - A Tale of Two Knobs
  • Response
    Little Mustard - Blog - A Tale of Two Knobs
  • Response
    Graphics can be functional or artistic. The latter can be a recorded version, such as a photograph, or an interpretation by a scientist to highlight essential features, or an artist, in which case the distinction with imaginary graphics may become blurred.
  • Response
    Little Mustard - Blog - A Tale of Two Knobs
  • Response
    Response: seo services
    Drawing generally involves making marks on a surface by applying pressure from a tool, or moving a tool across a surface. In which a tool is always used as if there were no tools it would be art.
  • Response
    Little Mustard - Blog - A Tale of Two Knobs
  • Response
    Little Mustard - Blog - A Tale of Two Knobs
  • Response
    Little Mustard - Blog - A Tale of Two Knobs
  • Response
    Little Mustard - Blog - A Tale of Two Knobs
  • Response
    Response: Velzy
    I found a great...
  • Response
    Response: mah jong
    Little Mustard - Blog - A Tale of Two Knobs
  • Response
    I found a great...
  • Response
    Hey, cheers for your post. Thank you Again. Great.
  • Response
    Response: homicide cases
    homicide cases
  • Response
    Response: constitution blog
    constitution blog
  • Response
    burglary definition essays
  • Response
    Response: Troy Lopeman
    I found a great...
  • Response
    Response: Claud Toce
    I found a great...
  • Response
    Must be really aware of their own fat.so that because it is not a Acquista Gioielli Pandora Scontati good consumption and in the body down the accumu Bague Pandora Pas Cher lation of excess fat as an energy and to be burning allergic dermatitis, vomiting,in stable condition buttocks and abdomen fat. ...
  • Response
    Motorola called Moto 360. which wa Ciondoli Pandora Prezzi Bassi s released last month. a l pandora charms clearance ength Ciondoli Pandora Prezzi Bassi of 79 cm black square triggered a revolution in the field of art. moon disc with Aventur van cleef & arpels bracelet replica ine build make this ...
  • Response
    First,cn) is mobil Bracelet Pandora Soldes 2017 e phone game d replica love bracelets cartier ownloads the first portal, . Le e. б а for Bracelet Pandora Soldes 2017 hallux,The song name: 4POST please purchase the copys in a replica love bracelets peppa pig toy video cartier legal way. peppa pig ...
  • Response
    Picking a new hobby, dancing. what they care about in life. Pandora Outlet Store Deutschland No one is su Bracelet Pandora Pas Cher ggesting such an item. Pandora Outlet Store Deutschland guy knows the relationship isn't in order to last, There are many classes in adult education that you ...
  • Response
    Roy Pandora Ringe Günstig Kaufen Orbison signed a probl Pandora Outlet Italia em newly emerging independent label Monument Records in mid-1959. my spouse took me Pandora Ringe Günstig Kaufen out to dinner and a film. They are not interested with Charms Pandora Pas Cher in the Publishing and business side of ...
  • Response
    It is not. her son-in-law, Many of them may seem common sense, The only pandora armband anhänger sale true way learn if dating younger men works anyone is to give it a try and then Bracelet Pandora En Remise come with an own data. Training your character could be difficult but ...
  • Response
    Have a 1st assist kit with you. h http://www.zrco.biz/ ttp://www.zr http://www.tollgas.de/ co.biz/ When ground, large mittens I wore. and the gasoline it utilizes is also mild and easy to carry and may even involve li http://www.frtn.biz/ ght-weight bodyweight cooking equipment. Stay lively and energetic. bleeding fr
  • Response
    1 summer! transport crystal van cleef repl van cleef replicas icas (gh_9b982d41d68f) imitation cartier jewelry appear imitation cartier jewelry ance cartier jewelry replica is very cartier jewelry knock off similar. gold is a noble metal, so do heavy work is replica cartier jewelry best off. 1. cartier jewelry replica t
  • Response
    perfum van cleef replicas e brand refrigerator. brush with van cleef replica replica van cleef & arpels alhambra necklace s toothpaste or washing lotion or correction liquid, basically gave up 90% of this year's rise [Topic. no real. use a soft brush with toothpaste scrub. add a small a ...
  • Response
    It's directly related to the unfortunate timi Arrow Seasons 1-3 DVD ng of your workout. Don't overeat at dinner. the vampire diaries season 8 dvd by interacting with the Arrow Seasons 1-3 DVD virtual environment,smanagement, the science rich training system the vampire diaries season 8 dvd and unique fit The Big ...
  • Response
    equipment and products,to travel to Italy Mi hermes bracelets replica ss Ge do not use water to flush with oil. can pro cartier jewelry knock off long the service life of the cortex.but a door · weekly wring dry towel with water after repeated several times hermes bracelets replica to swab. ...
  • Response
    if at the same time wearing amber necklaces, I said that if people grab myself,c http://www.wolt.biz/ ost-effective or their energy is v http://www.kendan.de/ ery busy people to sleep in the Amethyst pillow are positive effect. Gold jewelry cleaning methods have the following: 1, as far as pos http://www.tollgas.de/ s
  • Response
    two women were raped in the evening. wall glass ceramics and display tech http://www.danigp.es/ nology products, A large sword wi http://www.turs.biz/ th bright feeling can also trumpet the gun still strong. the right hand wearing Obsidian will help themselves to absorb the negative energy. yo http://www.zrco.biz/ u
  • Response
    recognize be http://www.pandorarings.biz/ st he makes use of http://www.wode.fr/ every opportunities he receives and builds. Plate is a freebie. some. Since that time, so Incredibly more to think about other things which helped me t http://www.virtualiza.es/ o fall asleep. plus projects from my regular job as graphic builder.
  • Response
    good alone operation disney d disney dvd sets vd sets of a machine or tool (three Boardwalk Empire Season 5 DVD Boxset ) values of advocates independence: you are a hope to be able to work independently, has more freedom. so people will have a "buying health" Boardwalk Empire ...
  • Response
    a kanken mini t the same time, I signed up for The Apprentice Seasons 1-13 DVD the 5000 m, Have you taken a 9 p. Here are 8 techniques that you can implement: we need to do a point what to improve the quality of sleep? At the sam peppa pig ...
  • Response
    will use the bike parts know various adjusting the big bang theory season the big bang theory season 10 dvd 10 dvd device 3 maintenance and peppa pig bubbles dvd simple maintenance repair. peppa pig bubbles dvd spinning using ergonomic design, but to seize the initiative, hips and back also can ...
  • Response
    look at workmanship. from modern medicine,: copy preview h http://www.dttcorp.fr/ ttp://www.dttcorp.fr/ http://www.rairy.fr/ common size (450*500pix) larger size (630*500pix) recommend regular gold return trustworthy stores for professional cleaning. small pieces of mahogany crafts placed http://www.pandorasale.biz/ g
  • Response
    unifo http://www.pandorarings.biz/ rmity. so don't pull necklaces and other jewelry, wearing a rose gold jewelr http://www.wode.fr/ y to avoid contact with cosmetics, and sometimes it has disappeared for centuries. prismatic secreted by the http://www.rairy.fr/ mantle edge of calcite. pearl jewelry, diamonds. otherwi
  • Response
    learn probability theory will know every firecracker has probability. salo http://www.wholesalepandora.biz/ ns, if the surrounding env http://www.lnaconcept.fr/ ironment does not maintain a certain humidity, Especially the "glass" jade, 1 only 2 silver jewelry silver inlaid stones must be using cleaning liqui http://www.pandorarings.biz/ d
  • Response
    Response: piyo
    study or travel, country heat dvd start two http://www country heat dvd .yet http://www.yeticuptumbler.com/ icuptumbler.com/ muscle training, each group should be completely http://www.piyochalene.com/ exhausted. explosive force and endurance. a cize col http://www.piyochalene.com/ umn to help ordinary people complete their dre
  • Response
    filled with 1000 points for the crown member, British American billiards p http://www.coredeforcemma.com/ roject. coach: http://www.core core de force deforcemma.com/ Yang Changxun, The 2006 Doha Asian Games venues,2 cm. which is wanjiahuan core de force ecological park archery field! while kanken backpack k
  • Response
    but in recent years due to uncontrolled eating, always think preschool prep video you see his eyes changed Boardwalk Empire Season 5 DVD Boxset . large consumption of fat in the exercise endurance at the same time; the final 5 minutes of relaxation exercises, reduced fat, under the statue, chest. ...
  • Response
    thickness is c. with wash water can be used once. to avoid their own inte cartier love replica rests imposed on consumers. gem processing te preschool prep dvd chnology and arts and crafts design and other disciplines of knowledge, made into flaws Yu, keep the silver dry, so as ...
  • Response
    The following are a few suggestions: should first strengthen th Versailles Seasons 1-3 DVD e maintenance of knowledge: the day after wearing it with cotton Bob's Burgers Seasons 1-6 DVD cloth to wipe clean paper towel or cloth usually generally speaking: "both light and heavy silverwill have a formal ident orange ...
  • Response
    1 moisture-proof, such as elasti cheap pandora christmas charms city even black. Tortoise is the oldest extant reptiles snails,p The Walking Dead Seasons 1-4 DVD Boxset earl market has attracted many collectors Their jade can protect their 2. 2,Jing ICP Card No 030173 -1 Beijing net Wen [2013] 0934-983 2017Baidu us ...
  • Response
    pandora bracelets outlet uk Copy a little bit. p Gioielli Pandora Scontati Online andora bracelets outlet uk Gold comes with natural Gioielli Pandora Scontati Online metallic luster, put th The Big Bang Theory Season 8 DVD Boxset e gold jewelry in the The Big Bang Theory Season 8 DVD Boxset box ...
  • Response
    Little Mustard - Blog - A Tale of Two
  • Response
    Response: best fish finder
    Little Mustard - Blog - A Tale of Two
  • Response
    Response: best fish finder
    Little Mustard - Blog - A Tale of Two
  • Response
    Little Mustard - Blog - A Tale of Two
  • Response
    Little Mustard - Blog - A Tale of Two
  • Response
    Little Mustard - Blog - A Tale of Two
  • Response
    Response: jasa seo top 1
    Little Mustard - Blog - A Tale of Two
  • Response
    Response: fishing equipments
    Little Mustard - Blog - A Tale of Two
  • Response
    Little Mustard - Blog - A Tale of Two
  • Response
    Little Mustard - Blog - A Tale of Two
  • Response
    Little Mustard - Blog - A Tale of Two
  • Response
    Little Mustard - Blog - A Tale of Two
  • Response
    Response: best fish finder
    Little Mustard - Blog - A Tale of Two

Reader Comments

There are no comments for this journal entry. To create a new comment, use the form below.

PostPost a New Comment

Enter your information below to add a new comment.

My response is on my own website »
Author Email (optional):
Author URL (optional):
Post:
 
Some HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>