UI patterns
UI Pattern: Network Menu
Though this UI pattern has a singular purpose – to promote and provide links to websites within a business network – it can take various forms.
On NetTuts, the menu was a drop-down featured prominently in the top right, more recently replaced by a promotion for Theme Forest:
Network menu on NetTuts
On sites under the Wall Street Journal umbrella, the menu runs almost the entire width of the site:
Wall Street Journal network menu
MTV uses a simple drop-down, placed near the top along with other meta content:
MTV
Gizmodo, Gawker, and their sister sites display names, photos, and even sublinks in a block at the bottom of their pages:
Gizmodo, Gawker, and sister sites (full)
Though sometimes they use a smaller version:
Gizmodo, Gawker, and sister sites (small)
I’m certain there are thousands of variations out there so don’t be shy about sharing what you find!
Related Posts:
2change easier
on mobile
UI Pattern [Idea]: 3D Camera Position Control for Mobile Games
This is a possible solution for changing the “camera” position of 3D games on mobile touch screens when multi-finger gestures for rotation are not possible. In third person game views, this might make it easier to see areas around the on-screen player.
The key gesture is the press and hold of the left hand thumb. Once held, an element appears beneath to indicate that the user is holding and the game is ready for a perspective change. Pressing and dragging along the curve with the right hand rotates the screen. The perspective indicator’s arrow follows the right hand.
To change the z-axis perspective, the user wraps the first finger of their left hand around the top of the screen, enabling a up/down gesture of the right hand to modify the view.
It is entirely possible that the use of the left hand finger is unnecessary, but we’d need a working prototype to know one way or the other.
Related Posts:
0navigation
[Updated] UI Pattern [Idea]: iPhone App Breadcrumbs
For years, breadcrumbs have been a reliable method for retracing one’s steps or to get a sense of location on websites. So far I’ve not seen anything quite like that on mobile apps, so I thought I’d take a crack at working out how breadcrumbs might work in a touch environment.
Please note: This is a design experiment. I’ve not actually built this, yet.
Attributes and features of the iPhone breadcrumb UI element:
- Each items serves as a button back to its respective level.
- When breadcrumbs are too difficult to read, hold and zoom to magnify.
- Items evenly space where room is available.
- When space starts becoming tight, the right side of all but the last item is faded out.
- When space is too tight for words, only the arrows remain.
Original screenshots
Second generation
After a little time away from the designs, I realized there might be some benefit to keeping home and the last item always visible. Home also didn’t have to be text, an icon might do.
With Home icon and visible last item
Nth items
Related Posts:
0solution
UI Pattern [Idea]: Scrolling Filter for Mobile
I haven’t had a chance to try this out, yet, but I think this is a pretty solid solution for filtering content without having to open a menu in a popup. The most frequently accessed options are visible by default and within easy scrolling distance. Less frequently used options would be further to the left or right.
Related Posts:
0text fade?
UI Pattern: Long-Text Fade
In some software situations, online or off, text can’t be wrapped and it can’t be allowed to be fully visible. While some UI engineers choose to completely hide the text and give users an arrow to reveal everything beyond the limits (like in IE8 below), I prefer a pattern I call the “Long-Text Fade”.
The idea is simple: limit the number of characters and fade the last few into the background.
Google Chrome uses this pattern on their tab and bookmark bars.
I use this for the post tags here on Hanami Design:
Creating this UI pattern with CSS is fairly easy.
In the parent div, limit the width, hide the overflow, and prevent wrapping:
1 2 3 | overflow: hidden; white-space: nowrap; width: 200px |
Next create a PNG-24 the width of the fade you would like. Make sure it is a gradient fade from alpha 0 to 100, the 100 being the background color. Make this the background of a div or span you will absolutely position to the right. Make sure it matches the height of the parent.
Here’s what I did for the fade on the post tags of this site:
1 2 3 4 5 6 7 8 | .tag-fade { background: url(images/bg-tag-fade.png) 100% 0 repeat-y; height: 24px; position: absolute; right: -5px; top: 0; width: 70px; } |
As a bonus, here is what IE8 does when options are too many for the view:
Since Google Calendar uses something like the Internet Explorer approach for limiting how many calendar items show at once, I might explore this variation a little in the future.
Related Posts:
0jQuery Inline Percent Scale Plugin
Today I played a bit with creating a jQuery plugin for generating inline percentage scales. I’ve made similar UI elements before, but there’s rarely been time to build-in any real flexibility.
This experiment is one part of a much larger project to design a banking/finance style user interface the way I think they should be done, Mint.com being my primary inspiration.
Mint.com is pretty enough, but I think styled past the point of being easy; they’re now making the data hard to read.
I’m starting from the inside out of by focusing on the percentage scale UI pattern. The beveling effect is adjustable; see for yourself by using the form on the experiment page.
The background is a lighter grey intentionally. I think only a light style on a percentage scale’s background is necessary. Its purpose is only to help visualize how much the colored bar above could be and is therefore submissive, assisting, secondary and could just as easily be excluded.
Width and height for the scale as a whole are not currently adjustable and I’m still sketching out what further options might be. Lots more I can do.
Here’s the JavaScript for version 0.0.1:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | /* jQuery measurement unit switcher by Weszt Hart */ (function ($) { $.fn.hd_percentage_graph = function (options) { var defaults = { opacity: 45, }; var options = $.extend(defaults, options); return this.each(function () { $('.hd-percentage-scale').each(function (){ var percentage = $(this).attr('rel'); var structure = " "; var effectLevel = options.opacity /100; $(this).append(structure); $('.bevel').css('opacity',effectLevel); $('.grad').css('opacity',effectLevel); $('.scale',this).css('width:0'); $('.scale',this).animate({ width: percentage }, 500, function() { // Animation complete. }); }); }); }; })(jQuery); |
And the CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | /* ----------------------------------------------- Inline percentage scale an experiment by Weszt @ Hanami Design weszt@hanamidesign.com -----------------------------------------------*/ /* wrapper */ .hd-percentage-scale {background:#e8e8e8;display:inline-block;height:18px;min-width:100px;position:relative;} .hd-percentage-scale .scale {height:18px;width:0;position:relative;z-index:2} .hd-percentage-scale.positive .scale {background:#5cbd52;} .hd-percentage-scale.negative .scale {background:#ff4343;} .hd-percentage-scale.caution .scale {background:#ffd800;} .hd-percentage-scale .scale .grad {background:url(../../../images/hd-ps-grad.png) 0 0 repeat-x;height:18px;width:100%;} .hd-percentage-scale .bevel {position:absolute;z-index:3;} .hd-percentage-scale .bevel.b-top {background:#000;height:1px;left:1px;top:0px;right:1px;} .hd-percentage-scale .bevel.b-left {background:#000;bottom:1px;left:0px;top:0px;width:1px;} .hd-percentage-scale .bevel.b-right {background:#fff;right:0px;top:0px;width:1px;} .hd-percentage-scale .bevel.b-bottom {background:#fff;height:1px;left:1px;bottom:0px;right:1px;} .scale-table {float:left;width:auto} .scale-table tbody tr:nth-child(even) td {background:none} #percent-value {font-size:150%;text-align:right;width:60px} |
This is version 0.0.1 but as always, feedback is welcome.
Related Posts:
0Hanami Design
Weeks 30-31 Results & Experiments
Lean and mean is the theme for Week 31.
- Evernote as comprehensive organization and life tool [Inconclusive]
While Evernote could very well be the killer app for organizing one’s entire life, I’ve come to realize that I’ve been spending too much time organizing and not enough time doing. On hold, for now. - Evernote project template [Failure]
So much effort with so little reward. How many tasks could I have completed if I’d not have bothered? - Daily battle plan [Success]
One page plan for the day. Tasks are in a flexible order for when I think it’s best to do them. Makes keep on track so much easier and batch processing a cinch. - Date-first project note titles [Success]
For example: “2011-08-01 Write: Week 30-31 Results & Experiments”. Even if the dates are arbitrary, my project folder now prioritizes itself so what I need to be working on is always at the top. - Streamline my GTD system [In progress]
Taking a hard look at the waste in my system. What good is being organized if I’ve not saved myself time?
Have a productive week, everybody!
Related Posts:
5lists in small
spaces
Highlights
- Frees space
- Intuitive
- Neato
UI Pattern: Drop-Down Checkbox List
The drop-down checkbox list is would it sounds like: a multi-select drop-down menu whose items are selected via checkboxes. Not anticipating a clever name for this and although I’ve found sites discussing ways to make them, I’ve not spotted too many instances of them in the wild.
The only one I’ve found so far is one a Microsoft site, so any other examples are welcome.
The biggest problem I have with this pattern is remembering what has been selected. In the MS example, the list is very long, and therefore it isn’t until later (since this was part of a search) that the user can be reminded of what they selected. Just the same, I’ll be keeping this in my arsenal.
Related Posts:
2style user
interface
Highlights
- Data visualization
- CSS + Tables
- Stock market UI
Stock Market Style User Interface
Perhaps I’m a geek, but I adore data visualization, especially on stock market websites. All the little bits of data just seem so terribly cool. So maybe it isn’t a surprise that when I was given the task of redesigning the permalinks for Strands Fitness, some of that interest got woven in. Carried the model forward into routes and statistics pages.
However getting things to stay looking as they should no matter what the situation was a major challenge.
The problems were:
- Wrapping had to be avoided
- Data width could vary greatly
- Would be localized in English, Spanish, French, and Finnish (no kidding)
- JavaScript could not be used
- Had to be compatible with everything back to IE7
The results are so nice they betray the complexity within. I turned to tables, ultimately, when CSS alone wasn’t cutting it and for tabular results, I consider this okay. Getting things to work wasn’t at all easy, but sometimes that makes projects like this so much more satisfying.
Related Posts:
2freeing space
in a header.
Highlights
- Freeing space in headers
- Cool pattern for profile options
- Examples of profile menus
UI Pattern: Profile Drop-Down Menus
A profile drop-down is a useful solution for grouping profile/account related options while freeing space. These may or may not contain the users’s nickname, full name, avatar, profile link, or, as I’ve noticed lately, logout options.
Last.fm
I adore this UI pattern. Groups options into a natural “my stuff” kind of context. I’m particularly fond of including the username and avatar to further solidify the point. Logout is nice here, too, since it’s likely a less-frequently used option that should still be kept handy.
Comments and additional examples are more than welcome!
Related Posts:
0mutton in the
wild? Tell us
in a comment!
Highlights
- Fresh UI pattern
- Frees space
- Keeps functions handy
UI Pattern: Mutton (Menu + Button)
Though this is my current favorite UI pattern, I have to admit I giggle whenever the name comes up. Only after we’d added these to Strands did I read (in an actual book) what some people are calling them, though I wonder if there’s something less goofy we could use. The combination of menu and button is called… wait… here it comes… the “mutton”.
Muttons are a great solution for freeing space while keeping a primary action visually prominent. Like functions are placed in a drop-down menu which forms the right side of the component, therefore firmly establishing the functional similarities. One way of thinking of this is “hey, I’m the main action but these guys are with me”.
Yahoo uses one for their many email options:
WordPress uses one for content adding:
Gmail has a fun variation for selection, essentially a checkbox + menu:
Strands is using muttons on their Share Something menu, but these menus also include the primary function. This is because the button does not include text and further explanation is useful.
I’m curious to see how this UI pattern evolves or is at least ultimately defined. The mutton seems very natural to me and I don’t think it’s likely to be frequently abused, but you never know. Have fun if you use ‘em!