Notices

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...!!

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

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

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...

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.

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.

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

@szopin, maybe you're right.

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

>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.

>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.