Perfecting the Modern UX
 

This is a thread to discuss a User Experience, that should be consistent among different screen sizes, and to discuss what works and what works well. Please chime in with your criticism, your ideas and opinions.

Okay as some of you know, I'm somewhat of a perfectionist-borderline OCD.
I like to have things a certain way, the right way, my way... or its just not great.

So in my spare time I've been doing some brainstorming, and thinking about the User Interface/User Experience of all the Operating Systems out there.

Lets see there's; "linux", Windows 8, Windows 7, OS X, BB X, Android, iOS, webOS, Windows Phone etc etc.

They all have a unique interface, and there really is such a thing as a "better" or "worse" experience in my humble opinion.

Part 1
Now the thing that's going to affect alot of this is going to be icons:
1) Do we have regular icons like Windows 7/OS X/Android ?
2) Do we have icons that form a shape (eg iOS) ?
3) Do we have Live Tiles like that of Windows 8/Phone ?
4) Do we have Rectangular-shaped icons with the icon-label inside the icon?

Now all of these are good choices, and have different strengths and weaknesses.
I believe 1) and 2) are actually the same thing, and in the choices we can have these thoughtful ideas:
https://www.dropbox.com/s/s0x84kftoc...0pack.bmp?dl=0
Naked: No borders, so each icon can look unique.
Squarcle: Maximum space, while still rounded corners give better eye separation.
Circle: Least internal space, maximum space eye for icon-to-icon separation.
Square: Maximum space, least space for eye for icon-to-icon separation.
Octagon: Just like Squarcle, but a little less "natural" and a bit more distracting
Cirtangle: Like Octagon, but a little more natural, but less space for icon

Here's a better illustration:
http://unleashthephones.com/wp-conte...wn-a-shape.jpg

All these icon choices are great, but there's two outstanding ones here and that's the first two.
Now, I appreciate the Squircle icons. They look great on phones and tablets that have rounded edges like the iPod, iPhone and iPad. But what about Laptop/Hybrids? What about TVs?
I have to admit, here they look slightly out of place. And how about icons that have their own shape, like the globe in Google Earth, that would look odd having a circle rest inside a squicle.

So Naked Icons wins?
Yes, because as long as each icon is arranged uniformly and they have uniform size.... well, then they will look almost as uniform as Squarcle icons while being compatible with ALL screen types.
And that's what we want.

Part 2
Okay so how does Naked (uniform) Icons compare to Live Tiles, and Rectangle Icons?
Well, the question becomes less about the icons themselves and more about Widgets!!!

So the Naked Icon UI will have Widgets that are also free.
Hence, a Music Player Widget has the freedom to be as large as it needs to be. To display the Back, Play, Forward buttons.... crude controls. Now, here's the kicker. As long as the Widget's buttons are close to the size of the icon and its colour isn't flashy/matches the others, and it sits properly in its grid... it can actually look quite uniform. Surely not the best, but okay aesthetically, and great in terms of "space wastage" and functionality.

How does Live Tiles hold compare to this interface?
Surprisingly well, infact. Live Tiles are genius for Applications that are constantly changing such as Time, Calender, Stocks etc etc. But here's the problem... space. Live Tiles are usually too small to show you a tweet or txt message, and many other things. And when they aren't needed to be dynamic (ie static) they are quite wasteful in terms of space. So while its a great idea in theory, in practice it isn't. Its far better to use widgets like with the Naked Icon UI, and use the Notification Tray for those updates. I mean, even Naked Icons can show the current time on the Clock App, or the current date on the Calendar App... so that advantage of Live Tiles is immediately neutralized.

Okay, so lastly we have Naked Icon UI vs Rectangular Icons.
If you don't know what Rectangular Icons are just look at the UI of Netflix and Hulu.
See those square icons without icon labels, that have logo and icon label inside the actual rectangle?
That looks great ! Especially since they can be 16x9 aspect ratio, thus fitting better on a screen and not wasting much space. But notice something??
These look great on landscape screens. So things like large tablets, hybrids, laptops, and TVs.
This will fit nicely. But what about in portrait mode; like large phones, regular phones and small phones?
Well, on large phones it will look okay as long as we have them in a row of 3. But they'll be quite squished if I admit truthfully. And the columns will have HEAPS of space. So fit more rectangles in or leave the space empty? Well, both are bad choices because the balance here is broken. Its definitely not as good as Live Tiles/Windows Phone UI.
Okay lets just say they are acceptable.... what about regular or small phones/screens?
Here's the conundrum!
We would be fitting only 1 or 2 per row. The columns wouldn't be as much as a problem, because we can leave small(er) empty spaces which wouldn't look too bad. But then we wouldn't be fitting that many icons on the screen. Again, its a bad choice, it just doesn't cater to it. Not unless, we use the small phones always in landscape mode... and that's just not right.

So I guess the winner by default is Regular (naked) Icon UI in first place.
But no second place, both Live Tiles and Squarcle Icons are third place... and they're good choices (just not as great).

Part 3
Now the next logical question is; to be [icon labels] or not to be.
Aesthetically, having pretty icons without labels looks very appealing.
But the labels do have a functional use.
So the question is;
-is it justifiable to sacrifice some functionality for aesthetics?
-is it justifiable to sacrifice some aesthetics for functionality?

And the answer I believe is to keep labels.
Why?
Because they don't detract that much from aesthetics and are functionally useful. In fact, when you rearrange the icons or just get a new device... having no labels can be an exercise in madness. Removing them later is a possibility, but that poses a conundrum in that the UX is now user customizable, and potentially confusing. It can even confuse the same user when installing new apps. So for the sake of simplicity, its best to keep this static!

So Icon Labels stay, and aren't removable.
Its a trade-off worth making from a design perspective. A great compromise.

Part 4
Now part four of this investigation is going to focus on themes.
Should it be really flat? Semi-flat? Glossy? Shadowy? Colours?

I think its safe to say we have moved away from Windows Vista and Android Gingerbread. Both of these systems used icons that were "Glossy" and both were not only displeasing to the eye... they were categorized as ugly!

How about Shadows in icons or docks?
Horrible idea. Apple rightfully so (eventually) moved away from it. Some companies like LG are moving towards it and getting criticized for it. Myself, had an icon pack which had shadows on the icons. I must admit initially they looked good, but eventually the buzz wore out and I started noticing the shadows more than I should've and realized it was bad, and reverted the icons back. So no shadows!

Now its getting difficult !
Flat-style theme vs Semi-flat style theme. Which is best?
To get a better idea, compare Windows Phone 7 to iOS 8 and Android L (5.0 Lolipop).
Again, its difficult, but there is a winner.
Flat-style themes look great initially but you realize they dull the screen and the experience far too much. In other words, the screen becomes too bland.
Now look at iOS 8 and Android L.
Beautiful. Something so detailed and artistic rightfully took many years to get right.
Not too "mixed" and not too "conforming". Not too "glossy" and not too "bland". Just Right.

Part 5
Colours....?
I think you can go two ways....very colourful or few-colour combinations.
I believe the best approach would be to use a few colours and make it themed... like Jolla.
However, icons and apps would take on their own personas... so it wouldn't be too bland of an experience.
As for colour combos, I think these are some fine choices:
Black and Orange, White and Red, Grey and Blue, Yellow and Purple, Green and Brown.

Also themes such as Pine, Oak, Brushed Aluminium, Dark Steel, Neon, Leather, Carbon Fiber, Granite, Sand, Snow, Stellar, Ocean, Floral, Candy..... and after all these, maybe some high quality custom made ones (eg Certain movies/tv shows/characters/animals/etc etc)


Conclusion (for now)
The best user interface and experience can be achieved by using Regular Icons that are Naked (no borders) with Icon Labels. Also have them all consistent in placement, in size, in colour tone, semi-flat visual and accompanying like-wise Widgets.

...to be continued...!!

Re: Perfecting the Modern UX
 

Second Post reserved for the future.... :P

Re: Perfecting the Modern UX
 

Third post too, just in case, i am a dweeb !_!

Re: Perfecting the Modern UX
 

Quick reply...
Why is this thread so quiet?
Part 1. Either Naked Icons, or Circle around the Icon. I prefer the Circle choice. Why? Because the circle can go round and round when the app is being launched (see Nemo-lipstick), and because colour of the circle (grey-white, green, red, whatever) can represent information about the app.
Part 2. Mixing Widgets with the Icons? A great idea! Except, 'there should be no duplicates'. Having four spaces for Media Player (Back, Play/Pause, Forward, and Media Player Icon itself) is quite wasteful. It would be more helpful to have one icon-widget which on short click is Play/Pause, on scroll-to-left is Back, on scroll-to-right is Forward, and on long-touch (or scroll-upward, or whatever) is Media Player itself. It does require sensitive touch screen, though, and user's habit, to be able to use scroll-direction gesture within one icon.
Or maybe, dual-touch. Hold one finger on the icon, and use second finger to do any gesture you wish. And the icon would have different actions associated with different gestures :)
Part 3. Labels. I can understand that having no labels is madness, especially for new user. Aesthetically, I would prefer to place label not under the icon, but within the circle which surrounds the icon. Madness? I call it uniformity.
1. User has more-or-less round fingers.
2. Most icons are more-or-less round (you do not see square Firefox, do you?).
3. Throbber of an app being loaded is round (not square).
It makes sense to have round circle around the icon; this circle can be used as throbber, to show the app was clicked; as highlight, of changed status within the app; and hold the label within it, too.
Part 4. I personally prefer flat icons (Windows 2000 style). Semi-flat icons may be acceptable. Depends on the design. For example, in Windows XP I switched to Classic (2000-like) style, and still find the icons too ugly.
Part 5. Since the round icon leaves some free space (good for clumsy fingers), this free space can be used for non-clickable things. Like, small round circle (with its own small icon?) in the right bottom corner of the 'square space within the grid' can be used to display number of something related to the app. Number of unread letters/SMS in email/messages. Number of open tabs in browser. Number of missed calls in phone. Number of alarms in clock.

I wonder, will I be able to push something like this into lipstick app launcher? They already have colourful-home and glacier alternatives. If glacier finds these suggestions to be out-of-place, I do not expect that one more alternative would be a surprise.

Best wishes. Thank you.
~~~~~~~~~~~~~~~~~
Per aspera ad astra...

Re: Perfecting the Modern UX
 

Yeah, I ranked Squircle second choice after Naked... but due to Apple's patent we can say its not an option. So Circle would've been my next option too.

As for the Notification Bubbles... you sort of jumped the gun on me hehe

Long story short, I don't believe those Notification Bubbles are a good idea because if many Apps get updates... it will make the Home Screen aesthetically unappealing.

And remember, these same apps will pop up their in the Notifications Shade where its much more useful to interact with them.

My solution would be to obliterate those Numbered bubbles... or make the icons highlighted (slightly) to point out that an update has occurred. Slight visual cues.... not overblown user elements.

But yeah, this was something I was going to touch on in the next post. I'm also going to discuss gestures and user navigation. Then different screen sizes and how its affected by (familiar) user interface. And lastly I was going to discuss Multi-Tasking.
...I think there's somethings I might be missing from the discussion, if there's any aspects you'd like me to discuss just let me know and I'll include it.

Re: Perfecting the Modern UX
 

Personally, I don't give a flying duck about the shape of an icon or where the caption is, as long as it is consistent within the UI. Wikiwide's idea about the circle around the icon to give some additional info sounds good (one obvious example might be that the app is running, for apps that do not allow multiple instances, i.e. pretty much all of them). OTOH, I do take an issue with the widgets. I like the widgets on my N900 screen and miss them dearly on the N9 and Jolla. What I do not like is the widgets being random size. They should be exactly an integer multiple of the icon size plus icon spacing, otherwise you end up wasting screen space.

Examples of a nearly perfect UI:

• Hildon

Examples of less fortunate UI choices (with reasons why):

• Harmattan. No widgets. Unnecessary and therefore wasteful lock screen. When I turn my screen on, I want to see instantly what's going on, not to have to swipe to another screen first.
• Sailfish. Much as I like the OS, it unfortunately took some design decisions that moved the Harmattan shortcomings to the next level. The swipe approach makes it all too easy to do the wrong thing (send an email instead of deleting it, to name but one). Inconsistent icon shapes look messy. Days of the week in the calendar are hidden unless you swipe the screen down (exposing yourself to accidentally activating a menu option). That despite the fact that the bottom half of the screen is empty, so there is plenty of room for the header with days of the week. There is no general header with the current time, battery and connection status, quite crucial pieces of information in a phone. You have to change the screen to get that. Last but no least, whose clever idea was it to separate the apps' settings from the apps themselves?
• Android. Where do I start? No quick way of closing an application. No multitasking. Confusing configuration (Sailfish took some inspiration there). Admittedly I have not used Android for so long that I cannot give you more specific examples but I know I abandoned it mostly because I found the UI absolutely atrocious.

In many cases I see the UI (and UX) being a victory of form over substance. As if the companies employed a lot of graphic designers and suddenly ran out of things for them to do, so they let them loose with no regard to practicality. The Windows 8 UI is a prime example. So is Unity and Gnome 3. In all three cases, what these interfaces replaced was miles better than the brave new things, but a change for the sake of the change won.

Re: Perfecting the Modern UX
 

Can't really agree. The accidental send instead of delete is probably the learning curve, after 10 months with Sailfish don't see the problem at all. The 'empty space' in calendar view is not empty if you have any meetings/reminders/whatever, so extra screen estate is fine. The header part though I have to disagree strongly. Peek to uncover time/battery/network/... is great. Just try running full screen terminal on Hildon (mrxvt), need to check time... ctrl-f and the geometry just changed, which is BAD for many applications, so maybe ctrl-backspace, now you need to get out of the multi-tasking window to see the time, and to go back... All that to check time? Peek from any edge and voila, elegant and fast, maybe with time you will start to like this feature, for me it's great. As to settings, kinda agree

Re: Perfecting the Modern UX
 

@szopin, maybe you're right.

@Kangal, it's "Your ideas", not "You're".

Re: Perfecting the Modern UX
 

>Days of the week in the calendar

I'd argue that the calendar is an application, not part of the OS and that therefore shortcomings of the calendar are not shortcomings of the OS.

Re: Perfecting the Modern UX
 

>no regard to practicality. The Windows 8 UI is a prime example

The Metro/Modern interface actually works pretty damn well on touch devices. All the criticism levelled at it is because it is far from ideal for mouse/keyboard.

Microsoft did a lot of practicality testing.

Re: Perfecting the Modern UX
 

That is correct, however it is an application coming from the creators of the OS that some may interpret as the OS creators' idea of what applications should look like. That is why I included it there.

Regarding szopin's argument about learning curves... I had though of it. Do I confuse intuitiveness with familiarity? Well, maybe. When I first got my N900, I did not run the tutorial. In fact, I never ran the N900 tutorial. Yet I quickly figured out how the UI works. Jolla forced me through the tutorial. And good job it did, I am not sure I would have figured it out myself. It is quite possible that the N900 UI is similar to familiar desktop interfaces and that's where the impression of intuitiveness comes from but I truly believe hat the best test of an intuitive UI is to let a complete newbie use it and figure out without help how to do a given task.

Re: Perfecting the Modern UX
 

Now I wonder, does changing language to hebrew/arabic change the orientation of OK/Forward/right - Back/Cancel/left? There are some cool studies how language impacts thinking (whether it being counting/time/location awareness etc). For languages that are written from left to right, right is the side of progression/moving forward, for the ones where left is natural progression swiping left might be more intuitive to Accept etc, and right to go back

edit: oops, just noticed it is a bit confusing when by swiping left I mean swiping with yuor finger to the right to end up on the left... I think it's clear though even if a bit of roundabout, srry

Re: Perfecting the Modern UX
 

-they will say: golden ratio-mobile size,icon size
llike 90 60 90
but I love more :D

Re: Perfecting the Modern UX
 

You're obviously not a newbie if you found the n900 intuitive. Give it to someone who has never used a desktop or understands multitasking and watch.

If you've not read Jaako Roppola's blog at http://jaakkoroppola.blogspot.co.uk it should be mandatory reading for Sailfish UI/UX discussions. He's a designer at Jolla responsible for UI/UX.

Re: Perfecting the Modern UX
 

Any comments about the modRana UI in this context ? ;)
(either the "classic" one on Maemo/GTK or the "new" one on Sailfish/Qt 5)

Re: Perfecting the Modern UX
 

Quick reply...
I have not used it for a long time... For GTK one: the tiles are cute in a way that says "let us build whole operating system where only Python-based apps can run, and the whole GUI looks like these blue-ish rectangles". For Qt/QML one: where is the Exit "X"?
~~~~~~~
And about gestures: let me re-iterate that I prefer for icons on app-launcher to be multifunctional, and serve as widgets, instead of taking up extra space by separate widgets.

We already have Calendar icon which shows current date. Theoretically, if I was not so lazy, we could make it show month, too: for example, by changing its foreground colour (grey-silver, black, brown, red, orange, yellow, yellow-green-lemon-lime, green, blue-sky-cyan, dark-blue-navy, violet, magenta). Year? Who are you, a time traveller, to forget current year? But it is too much of hassle in current limited system which expects that each image is static and independent of its environment; for example, it would have been much easier for Calendar if, instead of pre-generating all the needed possible icons, we could have one dynamic-icon file which (like SVG; possible with usage of JS) would re-generate image when triggered (be the trigger a change of date, an unread/read message, a change of time, or something else).

Similarly, we could have Clock which shows current time (rotating hands).

We could have Mail/Messages envelope which displays number of Unread emails/messages. Inside it, without breaking uniformity of interface.

And each icon could be 'fat' launcher. Launching one of several possibilities, depending on gesture. Like,
Clock could launch Clock itself, Alarms, or World Clock.
Mail/Messages could launch Modest=email, SMS, or IM.
Calendar could launch Calendar itself, or new-event dialog.
Media Player could launch itself, or control the currently played file: Back, Forward, Play/Pause.

Similarly, about lock screen: it should protect your information from being seen by unauthorized persons (if you are using pin-or-some-kind-of-protective lockscreen), and yet, it should provide access to information with minimal number of movements/clicks/gestures.

Best wishes.
~~~~~~~~~~~~~~~~~
Per aspera ad astra...

Re: Perfecting the Modern UX
 

Golden ratio ... why? (given that it is pretty much just an urban myth that humans exhibit a preference or particular liking for golden ratio rectangles; experiments have shown no such preference exists)

Re: Perfecting the Modern UX
 

Bleaaaargh! :mad:

I have 7 (seven!) mailboxes. The main screen in the N9 and Jolla mail client shows the list of the mailboxes and the combined list of new emails. And I absolutely HATE it for it. The whole POINT of having multiple mailboxes is separation. When the mail client combines the new emails like that, it breaks the main principle and forces me to make some additional steps to find out where the freaking duck the email was sent.

Another example: the N900 notification LED blinks blue if I have unanswered calls or unread emails, SMS or IM. So, which one is it? As far as I am concerned, those are four entirely, even conceptually different things and my phone is trying to make me completely reverse my way of seeing the world by trying to combine them.

You suggestion merely moves the same principle from an LED to an icon. It might suit you but is entirely against what I expect from an intuitive UI.

Similarly for the dynamic icons. They are a great idea, but I would be careful about inventing a new hammer and seeing everything as a nail. The whole point of a widget it providing information in a concise yet clear manner. I have three widgets on my N900 screen:

• A nameday widget. That could potentially be replaced with a dynamic icon if you figured out how to fit long names in it.
• A weather widget showing the current weather and the forecast for the next 24 hours in 6 hours increments. That's 5 different pieces of data. Actually 10, since each one is the weather icon (sunny, cloudy, raining...) and the temperature. I would like to also see the wind speed, that would make 15. How do you want to fit that in a single icon?
• A calendar widget. Showing the current day/date and the 5 upcoming events, all in a glance. A single icon? I don't think so.

A calendar or a clock dynamic icon is a simple example that will work but the same idea will not fit all cases. Even the calendar is questionable. For me, the most crucial piece of info is (obviously) not the year. It's not the month either. Not even the date. It's the day of the week. You left no room in your example for that, although that could be improved: a number with the date in the centre, an hour hand showing the month and the background colour for the day of the week. That's three pieces of info in one icon. Any more and you are stuck.

A media player widget? I don't use one but if I did, I would expect it to show AT LEAST the current playing song and preferably the artist name and the album. In a single icon? Bah!

Re: Perfecting the Modern UX
 

Quick reply...
I can understand the point of separating email, SMS, and IM. Four triangles within envelope could allow that easily, potentially introducing clutter. But separate mailboxes within email... Separate IM streams within IM... That's hellish within an icon, I agree.

That's why user should be able to switch off or customize a particular dynamism of icon. Like this number of unread emails.

And you have convinced me (with mailboxes, weather forecast, and calendar events) that there is need for a screen (separate from app launcher) which houses user-selected widgets. Huge widgets. With excessive amount of information.

I am not a fan of widgets, but you have shown that there has to be a support for them. Just, not in the app-launcher itself; on the desktop is fine.

Actually, you can make Call, IM, SMS, and Email blink differently from each other :) https://wiki.maemo.org/LED_patterns#...for_Nokia_N900

Best wishes.

Re: Perfecting the Modern UX
 

Obviously not in the app launcher. On the desktop. Assuming there IS a desktop. Neither Harmattan nor Sailfish have the concept. What a pity.

Re: Perfecting the Modern UX
 

There is the LED pattern editor that will let you change the LED colors and assign them for different notifications. I personally find it very useful. Now you just have to remember what color is for what notification.

Edit: Wikiwide beat me to it.

Re: Perfecting the Modern UX
 

Sorry, I am aware of tbe LED pattern editor. I even have it installed. But I believe in a usable and intuitive UI out of the box.

Besides, I have yet to figure out how to indicate multiple events with the LED. One blink for an IM, two for an SMS, three for an email... then when I have an SMS [i]and[/] an email I would see two blinks, pause, three blinks, etc. Same for a new message (blinking blue) while charging finished (steady green). So many times I left the phone on the charger and came back to seeing blinking blue. Has it finished charging or not? Blinking blue on a steady green background would have answered it instantly.

Sorry about that OT diversion. Hopefully not that OT. It is about the UX, after all ;)

Re: Perfecting the Modern UX
 

This is not an update quite yet, I've got some extensive writing to fill in the 2nd and 3rd posts of this thread.

But here's some interesting images to capture your eyes.
Metro UI with rounded corners:
http://cdn0.vox-cdn.com/uploads/chor.../3l09yZ3.0.png
(its good, but other elements are still boxy which isn't quite appealing)

A comparison of icons for different ecosystems:
http://unleashthephones.com/wp-conte...wn-a-shape.jpg
All icons are actually same size, but the shape makes a difference how much space can be used inside that icon. To be more extensive;
Metro Icons = 100% space
iOS iCons = 93% space
MeeGo IcoNs = 86% space
WebOS IcON = 75% space

Is it really worth sacrificing all that icon space, just to have the icon separation seem more appealing to the eye?
I'm not sure that I agree. The Metro and Circle icons are extremes. The iOS icons seem much more balanced in this regard, and overall better. Then again, naked icons....

I have to say that an icon that's uniform in portrait and landscape size is much much more appealing.
However, I think a case can be made for square icons that house the icon labels inside... something Microsoft hasn't really exploited, and if they did, it could rival a "Nude Icon" styling.
Why?
Square (housing labels) = consistency, but less space for the wallpaper to show through
Naked = nowhere as consistent, much much more space for wallpaper to show through

So I'm a little divided here, how much emphasis can I put on a wallpaper ??
...but it is ugly to have a solution like this:
http://i-cdn.phonearena.com/images/a...8.1-images.jpg

Whereas something more like this seems much better:
http://nokiaandme.files.wordpress.co...umiacustom.jpg

Re: Perfecting the Modern UX
 

And UIQ right next to it

The thing with GNOME 3 is funny. I hated it at first becuse it is so much different then GNOME 2 and it seemed useless on desktop. But then I learnd to use keyboard shortcuts and now I would never go back to GNOME 2. GNOME 3 is so much faster and unlike GNOME 2 it never stands between you and the work you do. Basically, I can have all my apps in full screen and I can still interact with shell, desktop, settings, whatever............ No need for start menu and panels. And if it ever ends up on some TS device it will be much better than GNOME 2. I had some HP convertible with TS back in the days and it was useless.

Re: Perfecting the Modern UX
 

Quick reply... If that many points can be called quick.
MeeGo and WebOS icons are acceptable. Disclaimer: I used neither WebOS nor MeeGo (mostly Nemo Mobile and Maemo 5 Fremantle).

Metro UI is ugly. Just look at colours:
1. Skype = Windows Feedback;
2. Video = News;
3. Music = People;
4. Weather ~~ Calendar.
What's the point of having colors at all if they don't carry a meaning? Black-and-white, Metro would have fared better?

Look at it the other way around. If the icon takes up to 100% space in the grid, then any mis-clicks not only do what you wanted them to do; they also do what you did not want them to do, and it takes time to force the nosy neighbor to go away. If the click-able icon takes up only 90% or 80% of space, then the user instinctively tries to click closer to the center of the icon, and there is smaller chance of mis-click.
If Not-Naked Icon implies background of random, abhorrent color like in Metro UI, then I vote for Naked Icons. Still, 'ideal' choice for me would be the icon itself within thin ring around it, like in Nemo Mobile. The ring is used like a Throbber to indicate process of launch, and can also be used to say that there is already an instance of the app launched, or whatever.
Why is there so much empty, non-functional space inside the icons-widgets? If you are aiming for accessibility, then increase the icons, like, 1.5-2 times in each direction. If you are aiming for normal people, then decrease the grid step, so that they would to see more of either wallpaper or widgets-icons.

If you really have to have such a half-transparent background, then make it a gradient. At 'border' of an icon-widget, have the Greyness almost transparent. At the center of an icon-widget have the Greyness almost opaque. Do not forget that the font also needs to be not simple, plain white, but white-inside-black-outline, like it is done in subtitles by some (many? all?) video players to make them readable on any background.

Though, it would be an unforgettable experience, if somebody created a PNG standard which includes negative transparency. Transparency going from -100% to 100%. From -255 to 255. Or whatever implementation is easier. The main point is, you could make icons distinctive on any background. Microsoft used to have something similar in its ico.n or cur.sor format (do not remember exactly).

It's like having anti-matter on board of your spacecraft: whatever you meet, you can highlight your existence by bright explosion :)

Best wishes. Thank you.
~~~~~~~~~~~~~~~~~
Per aspera ad astra...

Re: Perfecting the Modern UX
 

I could not agree more. When I upgraded my W8 to W8.1 and was greeted with the multi-coloured icon tiles, my first reaction was one of concern. Has something gone wrong in the upgrade? Do red tiles indicate incompatible applications? It had actually made me quite worried for a while until I realized that MS had just gone from a bad UI do downright ugly.

Regarding inverting transparency, I am sure I have seen it somewhere.