Lukas Hermann

69 posts on MacStories since April 2012

Former MacStories contributor.

This Week's Sponsor:

PowerPhotos

The Ultimate Toolbox for Photos on the Mac


StockTouch: Monitoring Stock Values With Style

As a lover of great interfaces, I’m constantly searching for developers who are passionate about displaying common content in new, attractive ways. This is sometimes easier (when it comes to photography or written content for example) but in some cases it can be very difficult and exhausting. Over the years I recognized that this is especially true for stock information and data. There is not much less sexy than linear diagrams and percentage data. You need a very good taste and, even more importantly, a perfect sense for balancing information and design in data visualization to create a functional and exiting product in this area. The developers at Visible Market Inc. definitely meet these requirements when you look at their app StockTouch for iPad.

The app displays the stock value information of the Top 100 companies from 9 industrial sectors (e.g.: technology, energy or health care). You can display their percentaged price change, volume and price change relative to the S&P 500 or the average change of the sector they belong to. Additionally, you can search for specific stocks and set them as favorites, which are then subtly highlighted. To filter this information even more you are able to choose between their global or U.S. value and arrange them in 5 different ways (in a top/low spiral, largest to smallest market cap etc.) — which brings us straight to the app’s concept of data visualization.

All these features and filter possibilities are integrated into a sidebar and get visible via pop up windows if you touch the respective pictogram. The actual stock data occupies the rest of the screen. The app’s main window presents you all 9 sectors in commensurate rectangles, which are headlined with the sector description and its overall percentaged change. StockTouch works with visual layers. By pinching or tapping one of the sectors, it zooms in and you can take a look at the sector’s “member companies” and their overall change within the set timeframe — again presented in a field of rectangles containing the different companies and their current stock value or change.

To visually underline the current value and its position in the respective sector, positive change is signalized with different shades of green; more or less stagnating stock prices are black and those falling can be identified by their red background colors. This intelligent and subtle use of colors makes it very easy to quickly analyze the overall changes of a sector, the stock market in general and, to a certain extent, also encourages the user to dive deeper into the information StockTouch has to offer, embodied by the third layer: the line chart of a single company’s stock value, available by tapping on a single stock within a sector.

The style of displaying the course of a single stock shows the second immense quality of StockTouch: its perfect use of visual and especially typographic hierarchy. Again, the background color indicates the general direction of the stock value’s course; but the real innovative solution in this part of StockTouch is the way the related numbers and information are organized and presented. At the top, using white space and different font opacity, the relevant data like the current stock value or the company’s position within its sector are easy to identify and read. Below the chart you get a short description of the company’s profile and the possibility to check several current newspaper articles about it which can be opened in an integrated (not very beautiful) web browser. But overall, the whole interface is modern, unique and intuitive at the same time.

Concerning the overall UX of StockTouch I think there are some small lacks in intuitive use though. For example, it is not possible to swipe left or right to move to another sector or company: you always need to zoom out completely, and then select the information you want to check. Furthermore, although the search feature is performing very fast, the results are listed way too small and you often unintentionally tap the wrong stock (which definitely can be avoided on a screen that large). StockTouch also features unobtrusive sound design while browsing through the stock data, but although I personally like the sound effects very much, the developers should at least have provided the option to turn them off — which is not the case here. In fact, the app does not offer any preferences at all, a move which surprised me bit, to be honest.

But nevertheless I became a fan of StockTouch immediately after firing it up for the first time. It is the product of a deep love for good design and unique and interesting data visualization. I absolutely recommend it to anyone who seeks for an easy way to monitor the stock market and has a taste for good interface development. StockTouch is available on the App Store as an universal app for $4.99.


National Parks By National Geographic: A Beautiful Guide To American Nature

Great content deserves great design. In my opinion, this is one of the main principles UI designers have to sought after. If your product features great content, it needs to be highlighted with great design and usability elements around it, or it loses a lot of its advantages and flair. The second principle I truly admire when executed well is the attitude that content always comes first. If the standard tools (in the case of UI design, the standard interface elements) do not fit your app’s purpose, create new ones instead of reducing your feature set.

You do not often stumble upon apps with such interface features (one of the more prominent examples could be the current Twitter app with its “pull to refresh” feature) but if you do, most of the time your jaw just automatically drops. This is also the case with the new National Geographic National Parks app.

The app lets you discover American national parks in a way you’ve never seen before. You can rush through images, park information, secret tips and much more in a trip of pure joy and wonder. Before I focus completely on its tremendous UI, allow me to list the main park guide features the app has to offer as they are summarized in its App Store description:

  • Global and interactive map views with filtering by activity and seasonality
  • Personalized user space to track your favorite parks, activities, itineraries, photos, and more
  • Thousands of points of interest, all tagged with GPS coordinates for easy planning and locating
  • The top must-sees and must-dos for each park, curated by National Geographic editors [includes downloadable park guides]
  • Stunning photo galleries for each park, plus rare vintage images from the National Geographic Archive Photo tips from National Geographic photographers
  • Sharing through Facebook, email, and Twitter
  • Collectible park stamps.

Just to get the idea. But mentioning all these features explicitly would have distracted me from writing about what I’m really into: the app’s design and the way this content and feature possibilities are presented. So let’s get into that now.

When I fired up the National Parks app I immediately recognized that it’s something very special. The main window contains a beautifully styled photo wall of all parks to choose from or alternatively a map (with fluent Google Maps integration) featuring their hot spots and attractions. This window already shows the designer’s approach with taking common iOS buttons and selectors and re-editing them in order to give them a personal touch. This is most of the time achieved by changing their structure to something that looks wilder, grungy and very often like tanned leather. The app’s look makes you almost feel the park guide in your hands: everything is rounded up with well placed shadows, visual borders and, more importantly, realistic consistency.

After selecting a park and browsing through its given information, you’ll also recognize a (at least to me) completely new interface effect: if you take a look at its visitor stats or current weather situation, the main window gently slides in the background and up comes a halved screen presenting the selected information.

But National Parks is not just an excellent example for UI innovation: it also makes great use of visual guiding. The app features an immense and advantageous use of well-placed pictograms and especially photography — even on the rather small screen of an iPhone. Professional and beautiful images are flawlessly integrated while discovering the parks, and they give every single park presentation an individual and inspiring touch.

All in all I just can say that this is one of the most inspiring, useful and consistent iPhone apps I’d seen in a while now. There’s a lot more to it than I just highlighted. Although it crashed two times while using it and the enhanced park guides are only available for extra money (the first one is free, the rest is $1.99 each, which is a very fair price) I definitely recommend you downloading it for free. Whether you’re an enthusiastic lover of American National parks and a frequent visitor, hobbyist, professional photographer or just a interested design lover — it’s going to be worth it!


TeleTweet: Tweeting with Morse Code

It’s the week of morse code I guess. After showcasing iToneMaker on Thursday, Federico pointed me to TeleTweet by Shacked Software, a lovely designed iPhone app with a rather bootless set of functions, but a very passionate creation background which was the reason why it drew my attention.

TeleTweet is a Twitter client. It connects to your account, and lets you enter tweets using morse code, publishing them to your account. This is a rather strange approach, but I had a lot of fun with it.

To understand how the app works, let’s take a look at the truly unique design, as it’s the app’s main feature and also the visual door to what it does. TeleTweet is an on-screen morsing station with a big paddle triggering the long and short morse signals and the corresponding sounds. The combinations of the triggered lengths are then converted into characters and appear in the post panel at the top of the screen. For users like me, who never used morse code before, there’s also a dropdown listing of all alphabetic letters and some useful special characters like “@” and their appropriate code. You can also bring up a “normal” QWERTY keyboard if you like — a feature which seems a bit useless to me, since you lose all the special features of the app, not just in usability terms, but also design-wise.

Entering tweets in TeleTweet takes its time, but it’s a lot of fun and, to a certain extent, it serves the goal of teaching the user morse code. This isn’t simply accomplished through the functionality itself but also with the app’s antique, warm look and its lovely animations (like the stamped envelopes when you send a tweet). It really shows a clear love for steampunk design from the IconFactory designers responsible for it, and it made me stick to the app for a long time.

Sometimes completely forgotten, TeleTweet shows a deep attention to sound design: it clatters and squeaks and rumbles everywhere you touch. It’s very authentic. And I didn’t recognize the coolest thing about TeleTweet until I read through the developers’ website for the second time: if you connect to your Twitter account you can turn your iPhone sideways to show your Twitter stream — in real time morse code and its translation in monospace characters. I was just stunned at first, and then literally laughed. It’s hilarious and beautiful at the same time.

You shouldn’t buy TeleTweet if you want a decent Twitter client or a really useful tool to learn morse code. TeleTweet is a nice mix of both but does not completely serve the needs to meet the high feature standards of dedicated apps. What really makes the app attractive is its design.

If you’re a lover of high UI standards or steampunk design, go get TeleTweet for $0.99, and even if you’re not using it at all afterwards, it will surely stimulate your eye’s desire for detailed pixel work. Isn’t that what we’re all after from time to time?

By the way, in less than a week it’s Samuel Morse’s birthday — he’s the inventor of the morse code system.


Produce Morse Ringtones With iToneMaker

Some of you who are interested in electronic music may know Moog analog synthesizers and guitar effects. With their big stainless steel knobs, LEDs and very elaborate technology behind them, they create enormously noisy, grungy and disturbing sounds. The company also managed to create a very polished music production app for the iPad, animoog. The UI designer of today’s pick, iToneMaker Morse Code, was definitely inspired by this company’s product design, but nevertheless the app is a very unique and lovely compiled ringtone maker for your iPhone.

As the name might already suggest, the app’s sound production is based on the morse code principle. Hence you have to type in a word or a random letter/digit combination as the basis of your new ringtone into a message panel within the main window. The slightly different sounds of the single characters are played consecutively and result in the final ringtone.

Within this main window you can also change the basic elements of your ringtone: like “normal” analog synths, iToneMaker is based on (in this case obviously digital) oscillatory sound production. You can choose between triangular, saw and square oscillators and adjust their pitch, speed and break length between the morse sounds via custom sliding controls. Just push the central play button and your ringtone is played back, over and over… it can get pretty annoying, I warrant you.

If you are not satisfied with the output of these few controls - which happened to me literally every time I tried to produce an agreeable sound - you can additionally superimpose more editing features via the option button. You’ll find reverb and low-pass filter regulators plus some different effector types and the ability to change pitch while a morse tone is played. Besides that, developers Eiji and Tom kindly created some presets to choose from so that you never have to start from scratch completely and possibly never get to a passable ringtone result.

But let’s go back to the Moog-inspired UI. The knobs marking the advanced features are designed threedimensionally with a reflecting silver tone and are definitely dominating the individual style of the app. Everything else has got a monochromic look to it and the selector buttons feature a very nice custom indicating orange LED-design when their function is active. iToneMaker is coherent in every little detail and works really smooth with iOS 5 on my 3rd generation iPod touch. Even the implementation of the address book in order to use a friend’s name as a morse code pattern and entering longer character lines works as fast as the rest does.

There is just one small problem to the UX which I consider as relatively disadvantageous: if you superimpose the options panel it overlaps the (actually pretty big) play button and you can not stop the playback from there, if your ringtone is still running. But for an app which features such a cool and elaborated interface and is still available for free, this seems like a quite acceptable problem to me.


Keep An Eye On Your Twitter Followers With Detective

When it comes to research for new subjects to write about, I’m constantly confronted with ones that are at heart too marginal to discuss, but I’m doing it nevertheless, because they have some interesting touch to them. In Apple news, editors know that kind of problem and the question connected to it always sounds like: “Should I post about it or not? Will it be interesting enough?” When it comes to apps and good design, it’s much easier most of the time. Most of the time I can divide UI/UX design in two parts. Either the app works, looks fine and is easy to use or it does not. When I started to test Detective by Notion, I immediately recognized: Oh god, that’s a hard decision; it has got a very nice look but I am not sure about its feature. Is it that good? To go even further, I’m still asking myself if the app has a feature at all. But let’s dive in a bit deeper and you’ll hopefully get my point.

What Detective basically does is list your new Twitter followers and unfollowers in a top-down window from a menu bar icon. That’s it. Yeah, that’s it, really. You’re probably thinking that you could check that by yourself or that perhaps you don’t care at all about who and how many followers you have as long as you can tweet and follow what or whom you want. That’s all understandable, but I thought about it more and came to the conclusion that Detective — and especially its UI design — has got some advantages that may make the use of it legible to some people.

First of all, Twitter doesn’t notify you when people unfollow you at all. Psychologically speaking, that’s a good move, since everyone is more likely to enjoy seeing how he gets more and more famous over time without spending a thought on those who may dislike him (or her). But there are still some serious Twitter users out there, who do still care about their followership, they’re rare but they exist, trust me. They may even like to ask some of them why they stopped following them and what they could do better. For them, Detective could be nice to have. It just serves the need of showing up these people and does that with a polished, gloomy monochrome design only interrupted by the green pluses for new or red minuses for ex-followers, respectively. Apart from the very poorly designed preferences panel — which is in fact offending the rest of the app’s design and looks like it doesn’t belong to the app at all, Detective is minimalist, functional and performs very well.

Which brings us the the second, even more pleasant feature of Detective, at least to me: it’s totally unobtrusive. And I consider that as the main reason for granting this app such a long post. I assume that most of you who are twittering already deactivated the notification mails Twitter sends out if you have a new follower, direct message and so on. Detective on the other hand is faster than those notification mails and its basic approach of notifying you is different. It’s just there, you can check the changes by yourself when you want or you can choose Growl notifications if you’re too lazy to click on the menu bar icon, but even that is still better than those annoying mails which constantly interrupt your workflow and clutter your mail inbox. The rest of the time, when you don’t want to get distracted, Detective is completely invisible (yes, I know, there’s still that icon in the menu bar, but let’s be honest, no one can get distracted by an icon that small).

To me, it is this unobtrusiveness that really makes the app valuable, despite its very limited feature set and purpose. It definitely is an indicator for a knowledge of good design, if a developer is not out to usurpingly bring his work to the foreground just for the sake of making the user aware of it. Unfortunately I consider its price of $2.99 still too high. Although it’s by and large a very decent app, Detective needs way more features (which are promised indeed, but obviously not included in the current version) to justify such an expenditure. Hopefully Notion will keep their promise of implementing stuff like multiple account support or retweet/favorite notifications — because then I could recommend it with no hesitation.

 


Gemini Lovingly Finds Duplicates Of Your Files

Spring-cleaning is not much fun to do. Especially when talking about cluttered hard drives like mine. We all know with big hard drives comes big responsibility, but let’s be honest, just a few of us are constantly paying heed to delete useless duplicates. This problem can’t be tackled with apps which just provide good functionality — the task of decluttering your computer is that boring, you need great pixels as well to keep up the user’s interest and motivation.

Gemini is the first app I ever saw solving this necessary combination of design and usefulness with ease and bravour. The guys at MacPaw did a great job with it. When firing it up, Gemini is just a input screen on which you can simply drop folders or whole drives to let the app analyze and scan them. Unfortunately, this process takes some time but at least it’s subtitled with entertaining words (e.g.; “I, Gemini, am actually a duplicated file magician”). Afterwards the found duplicates are presented in a Finder-like, slightly modified window. Besides a list with the file names and paths it contains a pie chart showing up the media types of the useless files. The app comes with Quick Look support as well. Browsing your files is very intuitive, and I literally laughed when I saw the animation after finally deleting all my futile used data - it rushes through a virtual paper shredder falling down as shred.

The rest of Gemini’s look has got the same intuitive, almost magical touch to it. The rounded edges, warm colours and simple UI structure immediately appealed to me. It’s modern, minimalist, functional and — most important — it works. The design concept ends exactly where functionality begins, something I like very much. I could not find any unpolished detail in it, maybe the path information shown with the Quick Look preview is implemented a bit improperly, but I am sure that if there’s something you can not polish in order to make it beautiful, then it’s path information, as I think you’ll agree.

Apart from that, Gemini is a pretty good example of how good design can be both intuitive and functional. It really simplifies the process of cleaning up your computer, making it accessible for everyone from laymen to expert. And besides that, the price of $7.99 is more than just inexpensive when it comes to free hard drive space, it’s an excellent value for the money, so purchasing Gemini should be a no-brainer.