ENTRIES TAGGED "UI"

Making the Leap to iOS 7

What to look out for when updating your code

As a bewildered Dorothy says in the movie The Wizard of Oz, “I don’t think we’re in Kansas anymore.” When you open your iOS 6 project in Xcode 5 and run it in the iOS 7 simulator, you’ll know instantly that things have changed:

notInKansas

 

 

[contextly_sidebar id="e027d3655ea50711dd31b81666c293d7"]Gone is the colored status bar background; the status bar is always transparent, and all apps are full-screen apps, underlapping the status bar. A button has no rounded rect bezel, unless you draw it yourself as the button’s background. Many interface objects are drawn differently, with different dimensions. The subtle bar gradient is gone; colors are flat, unless you draw a gradient background yourself.

Read more…

Comment: 1
Four short links: 4 September 2013

Four short links: 4 September 2013

Browser Crypto, Multitouch Javascript, Smart Home Security, and Crypto Stick Figures

  1. MegaPWN (GitHub) — Your MEGA master key is supposed to be a secret, but MEGA or anyone else with access to your computer can easily find it without you noticing. Browser crypto is only as secure as the browser and the code it runs.
  2. hammer.js (GitHub) — a Javascript library for multitouch gestures.
  3. When Smart Homes Get Hacked (Forbes) — Insteon’s flaw was worse in that it allowed access to any one via the Internet. The researchers could see the exposed systems online but weren’t comfortable poking around further. I was — but I was definitely nervous about it and made sure I had Insteon users’ permission before flickering their lights.
  4. A Stick Figure Guide to Advanced Encryption Standard (AES) — exactly what it says.
Comment
Four short links: 3 September 2013

Four short links: 3 September 2013

Fanout Architectures, In-Browser Emulation, Paean to Programmability, and Social Hardware

  1. Achieving Rapid Response Times in Large Online Services (PDF) — slides from a talk by Jeff Dean on fanout architectures. (via Alex Dong)
  2. JS MESS — porting the stunning MESS ultimate emulator to Javascript. Interesting challenges like Chrome currently has a hardcoded limit of 32,767 variables, and Firefox has a point at which it hits the CTRL-FUCKIT button and drops the mic.
  3. Go Ahead, Mess with Texas Instruments (The Atlantic) — School typically assumes that answers fall neatly into categories of “right” and “wrong.” As a conventional tool for computing “right” answers, calculators often legitimize this idea; the calculator solves problems, gives answers. But once an endorsed, conventional calculator becomes a subversive, programmable computer it destabilizes this polarity. Programming undermines the distinction between “right” and “wrong” by emphasizing the fluidity between the two. In programming, there is no “right” answer. Sure, a program might not compile or run, but making it offers multiple pathways to success, many of which are only discovered through a series of generative failures. Programming does not reify “rightness;” instead, it orients the programmer toward intentional reading, debugging, and refining of language to ensure clarity.
  4. When A Spouse Puts On Google Glass (NY Times) — Google Glass made me realize how comparably social mobile phones are. [...] People gather around phones to watch YouTube videos or look at a funny tweet together or jointly analyze a text from a friend. With Glass, there was no such sharing.
Comment
Four short links: 2 September 2013

Four short links: 2 September 2013

Autocomplete, Tor Security, News Glitches, Moz Persona

  1. sifter.js — library for textually searching arrays and hashes of objects by property (or multiple properties). Designed specifically for autocomplete. (via Javascript Weekly)
  2. Tor Users Get Routed (PDF) — research into the security of Tor, with some of its creators as authors. Our results show that Tor users are far more susceptible to compromise than indicated by prior work.
  3. Glitch News — screencaps from glitches in video news.
  4. FC4: Persona (Tim Bray) — Mozilla Persona, reminds us just because you’re using a protocol that allows tracking avoidance, that doesn’t mean you’ll get it.
Comment
Four short links: 22 August 2013

Four short links: 22 August 2013

Cryptanalysis Tools, Renaissance Hackers, MakerCamp Review, and Visual Regressions

  1. bletchley (Google Code) — Bletchley is currently in the early stages of development and consists of tools which provide: Automated token encoding detection (36 encoding variants); Passive ciphertext block length and repetition analysis; Script generator for efficient automation of HTTP requests; A flexible, multithreaded padding oracle attack library with CBC-R support.
  2. Hackers of the RenaissanceFour centuries ago, information was as tightly guarded by intellectuals and their wealthy patrons as it is today. But a few episodes around 1600 confirm that the Hacker Ethic and its attendant emphasis on open-source information and a “hands-on imperative” was around long before computers hit the scene. (via BoingBoing)
  3. Maker Camp 2013: A Look Back (YouTube) — This summer, over 1 million campers made 30 cool projects, took 6 epic field trips, and met a bunch of awesome makers.
  4. huxley (Github) — Watches you browse, takes screenshots, tells you when they change. Huxley is a test-like system for catching visual regressions in Web applications. (via Alex Dong)
Comment

Purposeful Design Principles for Behavior Change

How to design products and services that help users change behavior

Steve Wendel (@sawendel) is the Principal Scientist at HelloWallet where he develops applications that help users take control of their finances. He’s also currently writing Designing for Behavior Change. I recently sat down to talk with Steve about the importance of testing and iteration, role of psychology, and resources and tools.

Key highlights include:

  • Describing the general principles of designing for behavior change. [Discussed at 0:16]
  • When we get it wrong, how to turn it around. [Discussed at 2:12]
  • Good examples of products and services. [Discussed at 4:45]
  • Read more…

Comment

Investigating the state of UX and UI design in tech

As web and industrial design begin to collide, UX and UI design are particularly ripe for disruption.

The last major shift in design arguably occurred in the 90s as print design gave way to web design, and designers suddenly had to deal with web safe colors, alias fonts, and the information design challenges of a non-sequential medium. Two decades later, design is approaching a similarly monumental shift as designers move from designing for the web to designing for systems.

Software developers and hardware engineers are starting to face difficult — and atypically similar — questions in terms of user experience (UX) and user interface (UI) design as web and industrial design begin to collide. Software developers must now think about designing for hardware interfaces, and hardware engineers must now design with UX and UI in mind. This collision presents an opportunity for a tectonic shift in the design space, with the potential to spread across industries on a larger — and more personal — scale than design has experienced before. That’s why, beginning today, we’re kicking off an exploration of the companies and people experimenting with and innovating in UX and UI design.

We can already see the beginnings of this shift as wearable interfaces, such as Google Glass, Fitbit, and Jawbone, become more and more mainstream. But what about designing for a wearable computing system for assistance dogs that allows an animal to alert or even command its human? Or for a sensor system for your teeth that could monitor what you eat and drink?

Read more…

Comments: 8
Four short links: 26 July 2013

Four short links: 26 July 2013

Better UIs, Dot Tricks, UAV Camera, and Writing Interactive Fiction

  1. Good UI — easily digested tips for improving UIs. (via BERG London)
  2. Mapping Millions of Dots — tips like The other thing that goes along with this brightness scaling is to draw fewer dots at lower zoom levels. By the time you get most of a continent on the screen, the dots are so much smaller than pixels and there are so many of them to draw, that it looks the same and is much faster if you draw half as many dots at twice the brightness apiece. (via Flowing Data)
  3. 118g 10x Zoom Camera for Drones — little less than 800×600 resolution. (via DIY Drones)
  4. Creating Interactive Fiction with Inform7 (Amazon) — all you need to write your own Zork, or even do better. With foreword by my hero (I squee like fanboy when I remember meeting him at the first Foo Camp) Don Woods. Yeah, Colossal Cave Adventure Don Woods. WIN. (via Marshall Tenner Winter)
Comment

Rotating a UIView in 3D

OSCON 2013 Speaker Series


Jon Manning (@desplesda) and Paris Buttfield-Addison (@parisba) are co-founders of Secret Lab and authors of the forthcoming Learning Cocoa with Objective-C, 3rd Edition. They’ll be speaking at OSCON this week in Portland, OR. Here they explain how to rotate a UIView in 3D on iOS.


One of the simplest visual tricks you can do in iOS is to make a part of your UI pretend to be a 3D object. We’ve found that this is an excellent way to add some life and visual interest to both apps and games.

Below, you’ll learn how to make a view rotate in 3D and have a perspective effect.

phone

First, your project needs to use the QuartzCore framework.

Next, when you want the animation to begin, you do this:

To stop the animation, you do this:

How It Works

CABasicAnimation allows you to animate a property of a view from one value to another. In the case of rotating a view, the property that we want to animate is its rotation, and the values we want to animate from and to are angles.

When you create the animation using [CABasicAnimation animationWithKeyPath:], you specify the property you want to animate. In this case, the one we want is the rotation around the Y axis.

The animation is then configured. In this example, we made the rotation start from zero, and proceed through to a full circle. In Core Animation, angles are measured in radians, and there are 2 * π radians in a full circle. So, the from value and to value are set thusly:

Next, the animation is told that it should repeat an infinite number of times, and that the full rotation should take 5 seconds.

The animation is started by adding the animation to the view’s layer, using the addAnimation:forKey: method. This method takes two parameters: the animation object that you want to use, and a key (or name) that the animation should be referred by.

Don’t be confused by the similarity between the “key” that you use when you add the animation, and the “key path” you use when creating the animation. The former is just a name you give the animation, and can be anything; the “key path” describes exactly what the animation modifies.

The last step to this is to give the rotating view a little perspective. If you run the code while omitting the last few lines, you’ll end up with a view that appears to horizontally squash and stretch. What you want is for the edge that’s approaching the user’s eye to appear to get bigger, while the edge that’s moving away from the user’s eye to get smaller.

This is done by modifying the view’s 3D transform. By default, all views have a transform matrix applied to them that makes them all lie flat over each other. When you want something to have perspective, though, this doesn’t apply, and we need to override it.

The key to this part of the code is the second line: the one where the m34 field of the transform is updated. This part of the transform controls the sharpness of the perspective. (It’s basically how much the z coordinate gets scaled towards or away from the vanishing point as it moves closer to or further from the “camera“.)

As you can see, adding 3D and perspective effects isn’t terribly difficult, but the results can provide an excellent payoff in terms of user immersion.

Comment
Four short links: 22 July 2013

Four short links: 22 July 2013

Antivirus Numbers, 3D Printer Explosion, 3D Printing's Particulate Problem, and Simulating Touch

  1. The Anti-Virus Age is Overfor every analyst that an AV company hires, the bad guys can hire 10 developers.
  2. 3D Printing’s 2014 Renaissance (Quartz) — patents on sintering about to expire which will open up hi-res production. Happened in the past when patents on fixed deposition modelling expired: Within just a few years of the patents on FDM expiring, the price of the cheapest FDM printers fell from many thousands of dollars to as little as $300.
  3. Ultrafine Particle Emissions from Desktop 3D Printers (Science Direct) — Because most of these devices are currently sold as standalone devices without any exhaust ventilation or filtration accessories, results herein suggest caution should be used when operating in inadequately ventilated or unfiltered indoor environments. (via Slashdot)
  4. Aireal — focussed changes in air pressure simulate sensations of touch. The machine itself is essentially a set of five speakers in a box–subwoofers that track your body through IR, then fire low frequencies through a nozzle to form donut-like vortices (I imagine the system as a cigar-smoking Microsoft Kinect). [...] In practice, Aireal can do anything from creating a button for you to touch in midair to crafting whole textures by pulsing its bubbles to mimic water, stone, and sand. (via BoingBoing)
Comment