Evolution Of Smiley

smxsmxsmx's picture

Filed under Logos although this is UI/UX because the final output must visually represent an exact statement.

We are working on a mobile app for Android.
The aim is to inspire the user to discover and express himself through a visual interesting and complex emotional statement.

The user creates a badge saved as a jpeg that he can share to any network.

Concerning the User Interface it all starts with choosing a Smiley to convey a basic emotion.

The complexity of the emotional statement arises from following layers which are not part of this topic.

I attach three different versions.

Generally, by swiping the Smiley-parts at the sides of the screen the user is able to change the basic emotion as seen in version 1.

But what we are actually concerned with is a quantification or refinement of the Smiley.
This is especially difficult because of integration of typography. Every Smiley is named different and each version of refinement is needing a visually pleasing and functioning positioning of either other Smiley name tags (version 1) or adjectives (version 2) or visually represented quantification (version 3 through a circle scale).

Version1:
To refine the mood means to alter the Smiley and its name tag itself. The user is able to either weak (-) or boost (+) it.

For the second and third version a quantification of the Smiley will be visually expressed apart from the Smiley.

The second version tries to achieve this effect by adjectives and the third version by a percentage circle scale.

All in all the interaction must be straight-forward to use and the shared jpeg easy to read. We "audience" that would read the shared jpeg understands the Smiley as chosen and quantified and therefore deeply personal.

I attached gifs to convey interactivity.

Which approach do you like more?

Is anything concerning the position of typography or genereal design unpleasant?

Feedback is very much appreciated,

Many thanks

1
1

2
2

3
3

AttachmentSize
gif_1.gif130.9 KB
gif_2.gif63.17 KB
gif_3.gif59.54 KB
HVB's picture

I'm just too old for this nonsense. Too meaningless and over complicated - whatever it is! And your images don't match the text. That smirk is NOT 'highly pleased' by any interpretation. - Herb

5star's picture

+1

n.

JamesM's picture

Are you showing them actual size?

apankrat's picture

I'd say #3 is most interesting from an interaction perspective if you got the smiley fully animated from 0 to 100% in 1% increments. The first two options I don't really care for, but then I'm probably not a part of your target audience either.

smxsmxsmx's picture

I'm just too old for this nonsense. Too meaningless and over complicated - whatever it is! And your images don't match the text. That smirk is NOT 'highly pleased' by any interpretation. - Herb

The final product will be quite the opposite of non-sense.

As I pointed out the Smiley and its modification through either 1) "visual differentiation", 2) "adjectives" or 3) "quantification by percentage" will only be the first part of a complex emotional statement.

Our aim is that this statement will be meaningFull and built up by the user successively through adding other parts to this statement to eventually share a unique badge stating his situative feeling.

The interface and interactive design needs to be simple and straightforward but at the same time nudging the user to make a rich statement. I am fully aware of the risk of it getting over complicated. So I am asking you and your silent follower: How is it "over complicated"? How to avoid?

Finally, I doubt that you're too old for this. You just don't (and are not able, yet) to see the full picture. Literally speaking. Upon release our app will not only inspire our users to express themselves richly. And share pieces of their life to engage with their social circles. But also will the users' input feed a heavy AI algorithm that eventually will be of unseen personal and shocking use to the app's user. Given how trivial it all starts ... with a Smiley.

Are you showing them actual size?

Well the size depends on the individual handset. This is based on 1280x720 which for example the Galaxy S III features.

I'd say #3 is most interesting from an interaction perspective if you got the smiley fully animated from 0 to 100% in 1% increments. The first two options I don't really care for, but then I'm probably not a part of your target audience either.

The idead to Fully animate the Smiley is interesting. Thanks. Why do you prefer the third over the other ones that's based on the target audience?

apankrat's picture

Because the first two are basically you good old smiley pack with a bit UI throw in. It's not novel nor is it engaging.

DanJWill's picture

Hi smxsmxsmx, it's very hard for users of a forum to give feedback on such a narrow piece of interactive information. I can see what you're asking for feedback on but all you seem to be getting is dislike of the visual impact of the design.

Be careful for asking advice in a graphic design-based forum on an interactive project, it can be like asking your sports mates if your photographic art is good (no disrespect to the brilliance of typographers). The detail needed to ascertain what it is your project/design is about to give critique outweighs the advantage for such a small snapshot of your project.

Typically interactivity needs to be broken down to its fundamental function, disregarding aesthetic, so it's the function it's self that is analysed in a controlled way. With full colour graphics, composed into something that resembles an app, that's all we look at and the guys are right, it's not very appealing.

A three selection input (#1) and a percentage-based input (#3) are two completely different things.
If you're prompting users to select how they feel in this section, depending on the importance of this stage in your design, to provide the user with pre-chosen selections would be very beneficial to move on to the next section. If you are wanting something more specific, and this part is the crux of your design (this is all it does) it has to be backed up by reporting & analysing that can properly determine the importance between being 65% pleased and 75% pleased. There's no point if both 65% & 75% pleased both fall into the 'very pleased' category and you write off any incremental differences.

In the end, we don't have any idea what we're pleased about or why we'd be sharing it so we have no care to decide whether to push a button or pick a percentage. That's all your design is telling us.

P.S. Why is the user choosing his satisfaction based on a graphic? This graphic should be chosen automatically once a set scores are entered as part of a survey e.g. Shipping = 5/5, Service = 2/5, product = 3/5 therefore a graphic is generated based on that response.
If this is just to post a smiley on my Facebook that looks more contempt than blazé, I don't see the point.

Syndicate content Syndicate content