Contents

39 Articles

Search

2 months Ago

More odd design in iOS battery-management

Published by marco on

When I snapped the screenshot shown below, I wanted the answer to one question:

I had actively used the phone for only about 2 minutes that day. Which application used the phone for the other 3 hr and 56 min?[1]

Apple’s design makes finding an answer frustrating, at best—and infuriating, at worst. Here’s what you see when you look at the battery settings.

 Who's responsible for this?

The batter control panel tells me that “[b]attery information will be available after using iPhone for a few minutes.”

Some questions:

4 months Ago

UI/UX Deliverables

Published by marco on

Ideally, you’d have a VSG (Visual Style Guide) and an Interaction Design.

VSG

The VSG includes design details like colors, gradients, fonts and standard dimensions as well as details about components/controls, like for icons, properties like,

  • margins
  • padding
  • separation between label and image
  • alignment of image
  • variants (image to side, image on top)

or for similar... [More]

11 months Ago

Updated my Curriculum Vitae/Resumé

Published by marco on

 I am in no way looking for a new job. I’m very happy at Encodo. However, I hadn’t updated my project list or resume format since 2002. I’d also seen a lot of resumes cross my desk when we were hiring last year, with some good ideas and some bad. I wanted to try out some ideas I had to improve formatting, legibility and information density/comprehensibility.

There were a few main areas that I thought I could improve in the “standard” resume format.

I’ve got a strong first draft, but I’ll be... [More]

1 year Ago

UPC CableCom Replay

Published by marco on

tl;dr: If you think you’ve finished signing up for UPC Cablecom Replay but have never used it, think again. In order to completely enable it and to be able to use it, you have to actually try using the service from the Guide. It is at this point that you will be required to confirm yet another activation-acceptance dialog before Replay is available. Even then, it’s enabled only for content aired after this final confirmation. So go use it now for any old crappy show just to finish enabling it... [More]

The Netflix SmartTV App for Samsung

Published by marco on

 I started using Netflix in Switzerland about 5 months ago. I initially made these notes about 2 months after I started using the Samsung TV App. In the last three months, while Netflix has made updates to their app from time to time, the core usability and browsability issues have not changed.

Browsing

Permanent billboard
The browser doesn’t make efficient use of screen space. The top half of the screen is always reserved for a billboard for the currently selected item. This choice makes... [More]

2 years Ago

YouTube UX Suggestions 2015

Published by marco on

I harshed on the YouTube UX in a recent article about GrooveShark. I figured I would take a few screenshots and explain exactly what I am trying to do with YouTube and why it feels so awkward.

Use Case

The user wants to watch vides in a list that he has not yet watched.

 'Mark as unwatched' would be nice

It is not immediately obvious how or even if the user can mark a video as “unwatched” so that the little sash is no longer shown across the video in a list. As it stands, the sash is pretty much useless because the video... [More]

Geocities in 2015

Published by marco on

 Top of the page News linksA friend recently directed me to Steve Quayle where he’d found a link about Destroying your hard drive is the only way to stop this super-advanced malware (PC World). The article about viruses is a bit hyperbolic but mostly legit. The original web site, though, has some really interesting stuff on it.

It’s actually not too poorly laid-out—Cymax Media made it and their own homepage isn’t too terrible—but the emphasis is hard to parse.

What’s more important than the news links that the site ostensibly... [More]

3 years Ago

The BBC presents: The future of news

Published by marco on

 Screen-shot of articleThe article Man sectioned over Manchester Airport plane bomb hoax (BBC) was forwarded to me purportedly for its content.

That content? They closed an entire airport for a bomb hoax.

But something else caught my eye: the sheer impenetrability of the presentation. I took a screenshot of the whole article, shown to the right. Can you tell where the article is hiding?

I’m going to ignore the British news-authoring penchant for crash blossoms.[1] Also, I’m going to assume that using “section” as a verb... [More]

7 years Ago

SOE and usability basics: Page Titles

Published by marco on

There are a few (relatively) popular sites that do not even attempt to provide unique page titles for article pages. For example, Glenn Greenwald’s blog on Salon.com or 3QuarksDaily both use the same title for all pages.

This is a huge pain in the neck if you have multiple pages from those sites open in a browser. It would be much more useful (for bookmarking, etc.) if the page title included the title of the primary content on the page.

For example, instead of simply using

Glenn Greenwald... [More]

Tufte Weeps: ABC News

Published by marco on

 A rather interesting article about innumeracy on ABC News was almost completely overshadowed by a layout dominated by advertisements for other products also available from ABC. Anyone happy to read content for free online should also be prepared for a shameless onslaught of self-promotion, but does it have to be so ugly? The page is broken into dozens of blocks (listed below), which seem to only coincidentally line up or share a common style.

Take into account that most of the blocks are... [More]

11 years Ago

Reddit

Published by marco on

 Reddit Home PageReddit is a really interesting, stripped-down, fast social bookmarking site; while it doesn’t have the CSS/Web 2.0 props of Magnolia or Digg, neither does it have the excruciating wait time or incredibly heavy page load (both are easily over 250KB home pages). Reddit weighs in at under 50KB and has sensible caching commands, so the browser isn’t constantly following some insipid order to check for new content every time you click something. It’s style is very spartan, but conveys all the... [More]

Flash Silhouettes

Published by marco on

 This portfolio page by Jonathan Yuen offers a unique Flash experience: its navigation is quite nice. The stark and simple silhouettes are mostly static, but some small pieces move: the fish swim around, clicking the finger makes ripples on the pond, the butterflies flutter. Combined with the music, it’s quite pleasant to look around, including the cryptic navigation links—for those not versed in whichever language they’re written in—and the horizontal scrolling. It’s well worth a visit.

Opera 9.0

Published by marco on

 Opera Home Page Opera 9.0 New FeaturesOpera continues to improve their site, showing that standards-based design can be fast, clean and elegant. Having recently reviewed the Firefox 2 home page, it’s hard to say who’s stealing from who here. Firefox went with the darker silhouette, while Opera opted for the “girl of indeterminate age”. Both have the big, green download button (a good idea, drawing the eye to it), but Opera has nicer product layouts, with big, Apple-y graphics. Digging further into the site reveals a clean,... [More]

Firefox 2

Published by marco on

 Firefox 2 Home PageAfter years of changing styles and hit-or-miss site designs, Firefox seems to have finally hit a nice, open, clean style. The download button is huge and green and inviting. The background graphic is confined to the product area (not in the header or footer, reserved for “corporate” use) and adds to the fun feel. Overall, it’s airy, making good use of white space and all text is well-aligned (bullet titles aligned with descriptions … yay!). Even the footer got alignment attention, offering an... [More]

WikiMatrix

Published by marco on

 WikiMatrix Home PageWikiMatrix doesn’t look especially amazing, but it has quite a few neat tricks that make it a very nice web application. It allows you to select multiple Wikis and compare them; this is a comparison of MediaWiki vs. Moin Moin. The chart is very nicely laid out and includes custom tooltips and a nice hover effect allowing you to follow along and compare many wikis at once. There is also the flagged feature on the left that makes it easier to show only the features that are interesting (it would... [More]

Cork’d

Published by marco on

 Cork’d is a web application for wine afficionados. Users build add to the global wine database, create lists of their reserves, their favorites and their buddies. It’s a classic web 2.0 collaborative social web site by Dan Benjamin (of HiveLogic and A List Apart) and Dan Cederholm (of SimpleBits). The colors evoke a bottle of red, and the simple decorations, like the filigrees used a separators provide a dash of style. The colors and graphics are flat and simple (it’s the web! 2.0! get it?) and... [More]

Shiira OS X Web Browser

Published by marco on

 Shiira is a KHTML-based web browser. If you visit this web site, you don’t waste a lot of time looking around for a Windows version, as it’s relatively clear that this is a Mac OS X product. Why is that? What is it about Mac products that demands a different level of graphical design quality and attention to detail? It can’t just be because everything’s shiny, can it?

No, it’s also the good use of the oversized header graphic that’s becoming quite vogue, both flaunting and reinforcing the... [More]

12 years Ago

Microsoft “Live”

Published by marco on

 We’ve seen how firms large and small bring their sites up to speed. The screen shot to the left is Microsoft’s enchanting new Windows Live site. Granted, it looks like they’re still working on it, but let’s take a critical look at it anyway. (Not ready for prime time? Leave it offline.)

Their icons are fine, but don’t they have designers at that big old company? The content wraps around the icons in a way that was cool in 1995 when Netscape finally managed to do it without crashing all the... [More]

Edgewall Software Services

Published by marco on

  Another in an growing list of sites that make XHTML+CSS look really good. This is a consulting company for web and software services, which makes good use of shades of a single color (red) to differentiate between their 3 service areas. The generic graphic adds an elegant touch to the home page and the rest of the page doesn’t distract. There is a subtle news list on the right, with releases of their job tracking product, Trac, which also looks quite nice and functional. The product page for... [More]

RoundCube

Published by marco on

 Now here’s an open-source project that knows how to look good. The banner at the top sets a bold color theme that the rest of the page uses and has a simple set of menus below with the important points for a software project. Subtle use of gradients gives it a professional look and the big screenshot (of an equally nice-looking UI) lets the graphics do the talking. All XHTML/CSS compliant (as is their product); the “made on a Mac” logo at the bottom shouldn’t come as a big surprise. The concise... [More]

Joyent

Published by marco on

  Joyent is a web applications company with a suite of applications for small businesses. Their home page is a nice mix of browns and oranges; the menu side-bar has an especially clean feel to it. The purchase page looks good too, with a large “SALE” sticker in the upper left that seizes your attention. Excellent use of advanced styling for the links and callout boxes. (Joyent Home Page)

Opera “Feel Free” Promotion

Published by marco on

 This just jumps out as a very nice, clean (and distinctly Apple-like) promotion for a big step in an existing product. It’s a great, colorful way of drawing attention to a product. (Opera “Feel Free” Promotion)

AimOneSoft

Published by marco on

 This site has a very consistent and clean look, making good use of subtle gradients to give it a “painted” look without overdoing the colors. It looks happy and sophisticated — not at all dour and corporate, but exhuding confidence in the products. (AimOneSoft Home Page)

Camino Web Browser

Published by marco on

 Camino is a Mac OS X-only product that also makes excellent use of color to draw attention to its download buttons and warning box at the top. Note the use of an abstract header graphic at the top to contain the logo. (Camino Browser Home Page)

Obvious Diversion

Published by marco on

 There’s not much to say here, except that sometime many colors can look nice. The menus on the right are in several shades of soft pastel and are quite harmonious. Keep it in mind as a choice for themes. Nice that it matches the big background graphic. (Obvious Diversion Home Page)

Apple Nano

Published by marco on

  And then there’s Apple. They have an enviable style to their pages. The large black block draws in the eye to the product. The product description uses a nice open line-spacing and magazine-style picture layout to make a pleasing picture. “Buy now” is nice and obvious against the white background (and doesn’t even introduce an extra color, matching instead the banner). The store page highlights the two colors available (matching the selection buttons to the products) and using small pictures... [More]

Bartleme

Published by marco on

 Similar to the blue man web site, but less 3d, it makes good use for color for the different areas. The search at the top is “Live” and results update as you type above the Sidenotes. The green new icon also draws the eye. Click an article and scroll down to see the comments view, which is also a nice touch. (Bartleme Home Page)

Zaadz

Published by marco on

 This is another pretty clean-looking design. In particular, the page navigation is nicely organized and presented. The breadcrumbs are integrated under the section tabs and the “Quote Size” buttons on the right are like a toolbar (with result count shown in the same area). All information is gathered at the top. The company web site and philosophy are also interesting (Zaadz Home Page)

Steel Gryhon Blog

Published by marco on

 Another relatively clean look; the thing of note is that the tab folders here are nicely done, collecting the date and topic without being too disturbing. (Steel Gryphon Home Page)

WebSideStory

Published by marco on

  A very corporate web site, but light-colored as well. Good use of line spacing (1.30em), light menu headers on top (tightly against one another and turning light gold when hovered). Uses green for the “read more” links to draw the eye and differentiate from menu links. The bottom of the page has an elegant copyright and site info section, with nicely grayed images. (WebSideStory Home Page)