Ubuntu

New Software Center icon unclear at normal size

Reported by Jeremy Bicha on 2011-08-25
118
This bug affects 24 people
Affects Status Importance Assigned to Milestone
software-center (Ubuntu)
Undecided
Unassigned

Bug Description

*******************************************************

                  OMG UBUNTU READERS

If you have a comment, please comment on the OMG Ubuntu
site, not here. We will read all those comments. Thanks.

*******************************************************

Today's new Software Center icon does not appear to me to be an improvement over the old design. The new design seems to forget that icons should be legible at a variety of sizes. Even at 128 x 128 pixels (which I think may only be used in the default Ubuntu install in the new Alt-tab switcher and the Software Center itself when looking at the Software Center's install page itself in the Software Center), the individual components are nearly impossible to make out.

This could be fixed by using the same large category icons (earth and calculator) or at least the same scale. Two or three components instead of 10 would be a big improvement.

Also, a stuffed and slightly overflowing bag (like the previous icon) is a better visual metaphor than items either exploding from the bag (as it looks when not against a white background, ie in the dash or in the launcher) or hovering in the air above the bag.

New 128x128 size: http://cdn.omgubuntu.co.uk/wp-content/uploads/2011/08/softwarecenter.png
Old 128x128 size: https://wiki.ubuntu.com/SoftwareCenter?action=AttachFile&do=get&target=softwarestore.svg

ProblemType: Bug
DistroRelease: Ubuntu 11.10
Package: software-center 4.1.19
ProcVersionSignature: Ubuntu 3.0.0-9.12-generic 3.0.3
Uname: Linux 3.0.0-9-generic x86_64
Architecture: amd64
Date: Thu Aug 25 18:45:58 2011
PackageArchitecture: all
ProcEnviron:
 PATH=(custom, no user)
 LANG=en_US.UTF-8
 SHELL=/bin/bash
SourcePackage: software-center
UpgradeStatus: No upgrade log present (probably fresh install)

Jeremy Bicha (jbicha) wrote :
Changed in software-center (Ubuntu):
status: New → Opinion
Jeremy Bicha (jbicha) wrote :

Paul, I think it's a bit quick to label this as opinion which puts this bug out of sight, out of mind. The new icon is not an improvement over the old one and in some concrete ways worse.

description: updated
Changed in software-center (Ubuntu):
status: Opinion → New

I don't know why ubuntu is going to a unprofesional peace of software. Every new feature is going with rough edges, making a good icon it's no so complicated, i can do it! and a lot of pepole can.

Look at new icon, box don't bad but the rest don't match with the rest, don't match becose is a re-using other icons! whtf!?

Jeremy Bicha (jbicha) wrote :

Daniel, you're welcome to submit an icon proposal. I am not a decisionmaker and can't say whether your proposal would have a decent chance of acceptance or not since we're after UI freeze but it still may be worth doing.

According to https://wiki.ubuntu.com/SoftwareCenter#Branding the Design Team was wanting "an attractive shopping bag with handles, such as you might get from a high-class department store." And I think including the Ubuntu logo is cautioned against as it may confuse users.

Matthew Paul Thomas (mpt) wrote :

(Ubuntu Software Center does not use a dummy project to track design work.)

Changed in ayatana-design:
status: New → Invalid

What do you mean Matthew?

Changed in software-center (Ubuntu):
status: New → Confirmed

I redesign with humanity guideless and pixel ajust. ( better work, judge )

this is only a 128x128 icon, but if you like, i can do all sizes. only compare.

I upload svg icon. ( i did with inkscape )

I upload svg icon. ( i did with inkscape )

I try to respect the original but I agree a picture it refers to a application lenses, I think it's more cohesive than ubuntu trademark. and it helps for icon comprehension.

Jeremy Bicha (jbicha) wrote :

Daniel, I like the front on view as that matches many of the existing icons.

On the other hand, the original bug report was about how unclear the extremely small app icons floating above the bag are. I'd like to see those bigger and overflowing like the previous USC logo. When I go shopping, I don't have stuff floating in the air and a bright white light streaming out of the bag but I may have my bag overflowing because there's so much good stuff to get and I can only carry a few bags!

Remember that we need icons that look good and are clear at multiple sizes. Check the source code to see what sizes we're currently using.

I'm working in other sizes, but open my icon with inkscape, and look that the minimum border size as 1px, and it's enough for the icon doesn't looks blurry.

I did all the sizes: 16x16 24x24 48x48 and 128x128.

what do you think?

icons in svg format.

finally a little compareson.

Changed in software-center (Ubuntu):
status: Confirmed → In Progress
Changed in ayatana-design:
status: Invalid → In Progress
Adolfo Jayme (fitoschido) wrote :

That comparison is nice, the new icon is really neat! Consider changing it; it’ll need a UI Freeze exception.

José Luis Ricón (artirj) wrote :

+1 for the new icon!

Thanks everybody, my proposal is not perfect, but i can fix some rough edges before final release, if finally canonical designers take it. ( 24x24 needs some imporvements and 512x512 is not created at moment), but I'm realist, they do not even arise.

Adolfo Jayme (fitoschido) wrote :

512x512 size isn’t necessary. If larger sizes are required, simply scale the SVG file. The new icon is crisp and fixes the problem described in this bug.

Adolfo Jayme (fitoschido) wrote :

The new icon looks pretty nice in Unity Launcher.

  • SVG Edit (247.7 KiB, image/svg+xml)

Hi.

I tried to improve your icon, hope you don't mind. I removed these small icons and replaced them with 4 simple ones which should be easy to recognise and are different from the ones for the categories of the USC. Maybe you could transfer some of my changes if you like them

Adolfo Jayme (fitoschido) wrote :

Alexander’s icon should solve the problem of excessive detail at 24x24 size, though.

Matthew Paul Thomas (mpt) wrote :

Daniel, that is beautiful work, thank you. I have shown it to Otto Greenslade, the lead visual designer at Canonical, and we have a few comments.

First, the Dash applications lens icon on the bag is vivid, and has a 3-D inset appearance. This doesn't really match the idea that a bag would be made of thin material. (And USC lets you install things that aren't applications.) I don't think using an Ubuntu logo on the bag would be "confusing" as Jeremy suggested. The only issue (which may be positive or negative) is that it's quite common:
http://en.wikipedia.org/wiki/File:Android_Market.png
http://en.wikipedia.org/wiki/File:Windows_Marketplace_for_Mobile_icon.png
http://en.wikipedia.org/wiki/File:Chrome_Web_Store.png

Next, as far as I know, the four places where this icon will be seen most often are, in order:
(a) the Unity launcher, against a background that averages the colors used in the icon (bug 838050);
(b) the Dash, against a background that is some greyish color, by default greyish-purple;
(c) developer.ubuntu.com, against a white background;
(d) "Get this on Ubuntu" or similar buttons on software vendor Web sites, against a background yet to be decided (possibly black).

So the second issue to tackle is that we can't tell whether the icon fixes *this* bug without testing it against (a) whatever orange tint the Unity launcher generates for it. There's more of a difference with your icon as it is <http://img94.imageshack.us/img94/8307/workspace1004.png> than with the current icon, but that would change as you removed the Dash applications lens from the bag. To test it, enter this at a terminal: "sudo cp your-icon.svg /usr/share/icons/hicolor/scalable/apps/softwarecenter.svg && sudo gtk-update-icon-cache -f /usr/share/icons/hicolor && software-center-gtk3".

Third, rotating the bag to face straight on does make the icon more distinct at small sizes. However, it also makes the icon look less like a shopping bag at any size (it could just as easily be a suitcase or satchel). And it also means the white sparkles would disappear completely against (c) a white background, because none of the inside of the bag is visible to act as a backdrop for them. So, maybe we should use the straight-on perspective only for the smallest sizes, and keep the angle for larger sizes?

description: updated
Changed in ayatana-design:
status: In Progress → Invalid
KEIII (cashagent) wrote :

It'll be nice to see Ubunto logo like the old icon.
Even the size of a small pen, I tried to increase and slightly changed the bottom part of the package.

http://img269.imageshack.us/img269/6821/softwarecenter.png

manny (estelar57) wrote :

@mpt:
>Third, rotating the bag to face straight on does make the icon more distinct at small sizes. However, it also makes the icon look less like a shopping bag at any size (it could just as easily be a suitcase or satchel). And it also means the white sparkles would disappear completely against (c) a white background, because none of the inside of the bag is visible to act as a backdrop for them. So, maybe we should use the straight-on perspective only for the smallest sizes, and keep the angle for larger sizes?

i was thinking the same too about the angle.

the rotated bag could get some kind of image at the center.

@KEIII (cashagent)
this proposal also looks really nice too.

I agree with you Mathew in a lot of your points , and I suspect you based on the usability testings (I read on canonical design blog).

The current icon is more recognizable in perspective than my proposal, but I think we can make a bag that looks like a bag even if viewed from the front view, like KEII suggestion.
KEII's icon is greatful, is well done and is scalable, if you finally kep the prespective in big sizes, we should use their front views in smalls ( 24x24 and 16x16 ).

 the logo in the bag, I think we need decide some of them, is the application logo or Ubuntu logo, because a non-branded bag is a bag of anyone. I end up, the icon will reproduce on elsewhere, and people will not know what icon refers. On the other hand if we make high contrast icon could lead to confusion of hierarchy, I think the KEEI's design is sufficiently discreet, good work.

Changed in ayatana-design:
status: Invalid → Incomplete

KEEEI, your bag is really great! I modified them a bit so that the bigger sizes feature perspective and contain the tools which were previously on the outside.

together we will make a final great design, good work Alexander, I really like the prespective in big sizes and front view in small, it's wonderful, but we need to put each icon in their respective template, and pay attention with details. A good work is a patient work !

Matteo Pagliazzi (paglia) wrote :

I think the actual icon is perfect it should only have the Ubuntu Logo so it canbe recognizable also out of ubuntu like in website...

KEIII (cashagent) wrote :

This is second version with small changes:
http://img851.imageshack.us/img851/6821/softwarecenter.png

I like the white and orange version - it gets rid of the 'brown paper bag' look completely, and white is more fitting with a high end 'designer bag' feel.

@mpt Are the white sparkles really necessary? I would think that adding logos from the available software (like the old logo) would give a clearer representation of what can be found in the USC.

While these icons look fantastic the new perspective is missing its second handle. A bit odd looking.

Matthew Paul Thomas (mpt) wrote :

The orange variation of KEIII's second version looks very good, except that (as Chauncellor said) it is missing its second handle. The grey variation is more elegant, except that it's a bit hard to see against a white background. Perhaps a slightly darker grey would work, with an even darker grey for the Ubuntu logo?

affects: ayatana-design → null
Changed in null:
status: Incomplete → Invalid

I like the KEIII orange version, because the logo is more sublte and will not confuse the user.

Changed in null:
status: Invalid → In Progress

Daniel, if I'm understanding correctly, Matthew is saying that USC doesn't use ayatana design and so the bug assigned to ayatana is invalid.

Changed in null:
status: In Progress → Invalid

KEEII you can upload a package with icons in their correct folders and templates (128x128 /64x64 /48x48/ 242x24/16x16).

I can help you to adjust the icon to the grid in small cases, if you like. for polish.

http://www.inkscapeforum.com/viewtopic.php?f=6&t=33

this is a guide shows perfect whats the problem with bad build icons, special in small cases. ( like actual software center icon )

KEIII (cashagent) wrote :

Daniel Planas Armangue
This is icons that I've been able to do:
http://img339.imageshack.us/img339/2819/previewdc.png

Great job!
I hope the design team at least have the decency to get your work into account. Although today is really hard to push upstream, but really good work.

Matthew Paul Thomas (mpt) wrote :

We're still missing the second handle. :-) KEIII, would you be able to add it? Then I'll investigate getting a UI Freeze exception. Thanks!

I think that second handle is no necessary, but it will be good in big sizes (128x128 and 64x64 ) in smalls it's probably unreadable and will be confusing, but I'm sure that KEII studied before.

KEIII (cashagent) wrote :

I tried to add a second handle, but have not yet achieved a positive result. In contrast to the thin handles like an Android or Windows package, it seems difficult to do. Of course, I'm talking about the size of the icons 64 and more.

The attachment "SVG file" of this bug report has been identified as being a patch. The ubuntu-reviewers team has been subscribed to the bug report so that they can review the patch. In the event that this is in fact not a patch you can resolve this situation by removing the tag 'patch' from the bug report and editing the attachment so that it is not flagged as a patch. Additionally, if you are member of the ubuntu-sponsors please also unsubscribe the team from this bug report.

[This is an automated message performed by a Launchpad user owned by Brian Murray. Please contact him regarding any issues with the action taken in this bug report.]

tags: added: patch
tags: removed: patch
twipley (smt-infp) wrote :

The http://img339.imageshack.us/img339/2819/previewdc.png is much better than the current, oneiric icon. I also liked the old, brown paper bag icon, though. At any rate, anything is better (and more professional) than the oneiric icon.

It is my sincere hope that a professional-looking icon gets to be found in time for the precise release. I like the current proposition, although after analyzing it the current handles definitely would be problematic in a real-life scenario.

To post a comment you must log in.
This report contains Public information  Edit
Everyone can see this information.

Other bug subscribers