Net Weight.

Net Weight is a tumblog on UI, UX and related design disciplines as well as front-end webdevelopment. Created and curated by Jan De Wilde.

It functions as a personal scrapbook and notebook, but I welcome your comments.

• Contact me

• Archive / RSS

• 2013-05-04

  Interaction Design History from Marc Rettig

• 2013-04-18

  Some lessons we’ve learned, in no particular order…

  • When creating a web app you should avoid replicating the default iOS styling and interactions. This includes button and list styles, transitions, animations, and standard information views. Mobile apps are tactile experiences, and even the least savvy of users form an intuitive understanding of how the default OS should feel, and will notice even tiny deviations from the real thing. By simply avoiding having your app feel “wrong,” you’re most of the way there already. And by giving users something new, they won’t know when it’s not quite right.

  • At the same time, avoid the temptation to make the web app look too much like a website. For example, consider the use of buttons instead of blue underlined links. Just because you’re using HTML5 under the hood doesn’t mean that it should look like it. If you aim for a fully custom, native app look and feel, you’ll be more likely to succeed.

  • When animating elements—any element, no matter how small—only animate properties that are GPU accelerated. In CSS, this means using the translate3d transform property, which is hardware accelerated, rather than modifying the top and left properties, which are not. Animating properties which don’t have hardware accelerated counterparts — such as an element’s height — should be avoided altogether.

  • Don’t try to implement custom scrolling: the physics will be wrong. Luckily, you don’t have to: instead, you can use the -webkit-overflow-scrolling: touch CSS property on iOS and Android 4.x to create scrolling divs.

  • If you can’t find a way to do something that doesn’t feel choppy or awkward, then just don’t do it. Design your interface around the technology you have, not the technology you wish you had.
    

  • There is a pesky “bug” in mobile Safari that results a 300ms delay every time you click on a link. Use something like FastClick to fix it, or your interfaces will feel sluggish.

  • Use appcache—it’ll greatly speed up load times, and make a saved web app feel more native.

  • Spend hours—hours!—mashing on your app with your big, clumsy fingers. Tap things twice. Swipe at things that shouldn’t be swiped. Touch things that shouldn’t be touched. Mush it and squeeze it and scrape it. Do it when you’re lying in bed, in the bathroom, walking down the street. Over, and over, and over again. You’ll find all sorts of little UI glitches that way. Each one needs to be investigated, and its cause rooted out and repaired. Be warned: it’ll be awfully tempting to tell yourself those little glitches don’t matter, that it’s just something weird with your phone, that real users won’t encounter them. But do not give into temptation! The devil is in the details, and we’ve discovered major structural flaws with our code by investigating seemingly innocuous little bugs. This may double the development time of your app, but it’ll be worth it.

  —forecast.io

• 2013-04-04

  When the pair is developing a new typeface, they look to the historical record not for models to imitate, but in search of unfinished ideas that invite new solutions.

  — http://www.aiga.org/medalists-jonathan-hoefler-and-tobias-frere-jones/

• 2013-02-28

  Being a fan of your own archive is the first step toward engaging others and doing right by the writers, editors, and designers who have poured their hearts into work that deserves to live longer than the week it’s posted. Archives aren’t a technical problem that can be solved with a plugin or recommendation engine. Their contents were built by people, and they require real human effort to shine. When you invest in your archive, however, you do more than simply pad your pageview count. You announce to the world that your work merits ongoing interest, and you confirm to your readers that the relationship you’re building with them is long term.

  — http://contentsmagazine.com/articles/the-archive-is-a-campsite/

• 2013-02-21

  

  —http://xkcd.com/1174/

• 2013-02-11

  He was the one who introduced the notion that behavioral sciences could answer some questions about telephone design

  — Ed Israelsky about John E. Karlin in the NYT

• 2013-01-14

  Graphic Design Criticism as a Spectator Sport.

  Michael Beirut in top form blogs at designobserver.com Worth your time.

• 2012-12-27

  Max Themes Blog: ✎ If you see a UI walkthrough, they blew it

  maxrudberg:

  Clear, Rise and Solar are three examples of a trend of “gesture driven” apps with a flat UI. These are novelty apps for people lusting for the very latest in app design. Besides using a more flat UI style, which is a topic for a different discussion, all apps contain non-standard…

  Source: maxrudberg

• 2012-12-20

  Design plays a primary role in the interpretation of a message. It creates a crucial, lasting impression. It encourages examination and generates interest. Accessible, understandable information and beauty of form can engage observers and arrest their attention.

  A confusing, poorly designed message will miss its target almost every time. In a world where data bits flow abundantly, our minds have developed filters to sift through the overflow of useless and badly designed information. While design must appeal to our sense of aesthetic, it must not stand in the way of delivery, cause complications, or introduce stumbling blocks. Rather, the presence of design should simplify and facilitate our everyday life, enable us to accomplish our tasks more effectively, and help us enjoy them along the way.

  Source: stopdesign.com

• How could adding features that people were begging for make the experience completely different, and much worse? It was a tough lesson for Treehouse: the way you design something–including which features you add or omit–informs users about how the product should be used.

  — http://dcurt.is/photos-for-communication