Qt: new icons

jonasschnelli commented at 12:49 pm on November 5, 2014: contributor

flat and b/w icons seems to be the new trend
support for HiDPI/retina

jonasschnelli commented at 12:51 pm on November 5, 2014: contributor

It’s just a starting-commit which might bring up a discussion. If the change of the icons is welcome, i would also take care about the other icons.

Example how it looks on OSX 10.10 with Qt5: bildschirmfoto 2014-11-05 um 13 45 57

luke-jr commented at 12:57 pm on November 5, 2014: member

What trend? I only see mucho-coloured icons here… NACK ugly black-only icons? :/

I can’t even tell what those smaller 3 icons are supposed to mean!

sipa commented at 1:08 pm on November 5, 2014: member

I have no opinion.

jonasschnelli commented at 1:08 pm on November 5, 2014: contributor

Trend (whatever that means): iOS 8 / WP8: http://www.smashingmagazine.com/wp-content/uploads/2013/09/mobile_os_mini.jpg Windows 10: http://cdn1.vox-cdn.com/uploads/chorus_image/image/40528936/windows10startmenu3_1020.0.0_cinema_1200.0.jpg OSX 10.10: http://www.cronicaweb.com/wp-content/uploads/2014/06/caracteristicas-os-x-10-10.jpg

I just think, flat and b/w icons looks more professional than the current candy-like icons (they are from 2002 and are made for a KDE theme). When it comes to professional software where users should build up trust, less is more (in case of UX).

What would you expect nowadays when you use a ATM? candy 3d icons or a flat clear interface design?

Yes. The three icons next to the address bar (addressbook, copy-from-clipb., delete) are a bit tiny. Maybe they need +10px.

laanwj commented at 1:09 pm on November 5, 2014: member

Looks OK to me, even with the wacky black theme that I use, hadn’t expected that

untitled2

untitled

luke-jr commented at 1:12 pm on November 5, 2014: member

I disagree with using proprietary software (which gets much less end-user input than free software) as a “trend” to follow. The KDE-based icons continue to fit in perfectly (not to mention look nice) in my KDE desktop system.

If anything, we should be discouraging people from running Bitcoin wallets on inherently insecure operating systems… not trying to make it look better there at the expense of the free/secure alternatives.

jgarzik commented at 1:25 pm on November 5, 2014: contributor

Encouraging or discouraging use of certain OS’s is outside the scope of this project.

I do agree that two-color (not necessarily black & white) icons are becoming a bit of a trend. Many mobile apps use a familiar shape, while colors remain consistent with the rest of the [mobile] app page.

jonasschnelli commented at 1:27 pm on November 5, 2014: contributor

@luke-jr maybe we should not mix up platform/open-source preferences with a possible change of icons. I would say nobody will push users into the direction of proprietary software with more flat icons. Even KDE and Gnome are moving to more flat design. IMO: it is more a “spirit of the time” thing which open source/free software is also a part of.

On the other hand bitcoin-core has to compete with other wallet software (especially when sipa’s optimizations are finished). A good UX will make users might stick to / use the reference implementation.

luke-jr commented at 1:32 pm on November 5, 2014: member

Our current icons are already two-colour, and look much better (not to mention easily recognisable)…

laanwj commented at 1:33 pm on November 5, 2014: member

Let’s try to shortcut this discussion. The underlying issue is that the current icons are too low-resolution, so we need higher-resolution icons. @jonasschnelli made one proposal; speaking of which you need to update doc/assets-attribution.md so we can see if the license is acceptable.

Do you have an alternative proposal @luke-jr?

Another option would be to remove the icons from the tabs (and menu, and buttons, and anywhere else they’re not strictly necessary).

jonasschnelli commented at 1:37 pm on November 5, 2014: contributor

the (new) icons used in this commit are vector based (SVG), under CC3.0 license and also on github: http://typicons.com / https://github.com/stephenhutchings/typicons.font

laanwj commented at 1:50 pm on November 5, 2014: member

Is https://creativecommons.org/licenses/by-sa/3.0/ compatible with the MIT license? I suppose there is a problem with the attribution clause? Sorry to be difficult here but we’ve had heated debates about this before so I’d like to preempt that this time.

laanwj added the label GUI on Nov 5, 2014

luke-jr commented at 1:56 pm on November 5, 2014: member

@laanwj I’d rather keep the current low-resolution icons that you can tell the purpose of, rather than high-resolution icons that you have to hover over and wait for a tooltip before you know the purpose of. I don’t think we should have to increase the icon sizes just to compensate for lower colour use. :/

MIT license is basically compatible with anything - the real question is do we want the entire distribution tied up by the icon’s additional requirements. BY-SA is less restrictive than the current LGPL, AIUI.

jonasschnelli commented at 2:06 pm on November 5, 2014: contributor

License: it says:

Attribution — You must give appropriate credit, provide a link to the license, and indicate if changes were made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use.

I would say mention the author, etc. in the assets txt file should be fine.

Icon Size: I just increased the size: bildschirmfoto 2014-11-05 um 14 59 31

Looks good and more appropriate (especially the address-book and delete icon, they should be better recognized now).

jonasschnelli force-pushed on Nov 5, 2014

luke-jr commented at 2:16 pm on November 5, 2014: member

The increased size looks terrible IMO. Sure, I can tell what they are, but they’re obviously oversized and out of place. The black icons also sharply contrast with the rest of the UI elements (red debits under “Recent transactions”, blue progress bar, etc)

jonasschnelli force-pushed on Nov 5, 2014

jonasschnelli commented at 2:23 pm on November 5, 2014: contributor

Here is a comparison:

bildschirmfoto-2014-11-05-um-15 18 59

I would say, @luke-jr is right, the icons are a bit to big (4px), but they where also “off the alignment” before the change. On the other hand, “addressbook” and “delete” is more clear for me now (and i would say for most users).

Let me work on the other icons as well as on the status bar to make it more complete.

jonasschnelli force-pushed on Nov 5, 2014

jonasschnelli commented at 2:40 pm on November 5, 2014: contributor

Now without border it looks very aligned: bildschirmfoto 2014-11-05 um 15 38 44

luke-jr commented at 2:40 pm on November 5, 2014: member

The status bar picks up the style from the OS, as it should - please don’t try to change that. I wonder if there’s a nice way to use XDG icon standards too…?

luke-jr commented at 2:42 pm on November 5, 2014: member

The borderless icons do look okay now, but it’s no longer clear that they’re buttons :(

Is there padding around the icon content that we could just remove?

laanwj commented at 2:43 pm on November 5, 2014: member

@jonasschnelli Looks good to me Do the icons look relatively the same size on higher-resolution screens without either making very small icons or making them blurry? @luke-jr Some people have looked at using distro-provided standard icons, but it didn’t really work out AFAIK. For one because we ship binaries. Linux distributions are just too incompatible.

jonasschnelli commented at 2:49 pm on November 5, 2014: contributor

@luke-jr: no. there is no padding in the icon binary, the padding comes from the .ui file (or Qt defaults). @laanwj: On my HiDPI screen the icons look sharp and optimized. On normal screens they should also look good, because there are constraint height/size in device independent pixels (1:1 on normal screen, 2:1 on HiDPI screens). I’m refreshing my ubuntu vm to do some tests there.

sandakersmann commented at 3:12 pm on November 5, 2014: contributor

I think it looks nice :+1:

jonasschnelli force-pushed on Nov 5, 2014

laanwj commented at 8:22 am on November 6, 2014: member

@luke-jr yes the trend would be better named ‘one-color icons’ not ’two-color icons’. In a way, it’s a blast to the past to the 80’s. But that’s the fashion these days. Who knows in 5 years the pendulum has swung back to rainbows-and-unicorns. @jonasschnelli The buttons in “Send Coins” don’t look and act like buttons at all anymore, but just static images. If you’re going to do the ‘flat button’ thing at least make sure that they react when the mouse passes over so they don’t seem dead - although how is likely theme-dependent. It looks like overriding the border using stylesheet causes Qt to strip them of all button-like behavior?

Would this help? http://qt-project.org/doc/qt-5/qpushbutton.html#flat-prop

jonasschnelli force-pushed on Nov 6, 2014

jonasschnelli commented at 10:06 am on November 6, 2014: contributor

@laanwj: i tried with QPushButton (flat) but then decided to stay with QToolButton for various reasons. I just updated the code to bring back a more button like behavior.

I changed the icons one more time to look less heavy/bold.

bildschirmfoto 2014-11-06 um 11 02 28 bildschirmfoto 2014-11-05 um 15 38 44

jonasschnelli force-pushed on Nov 6, 2014

laanwj commented at 10:43 am on November 6, 2014: member

@jonasschnelli I still don’t like the ’emulated’ buttons in the sendcoins entry. They just act out-of-theme, ie normal buttons highlight on mouse-over here. I don’t think you should tie that change to your icons change.

luke-jr commented at 12:14 pm on November 6, 2014: member

Would it be difficult to match the icon single-colour to the OS-defined progress bar colour?

jonasschnelli force-pushed on Nov 6, 2014

jonasschnelli commented at 12:39 pm on November 6, 2014: contributor

@laanwj: okay. I just reverted the stylesheet thing. Your right. Lets keep focus on the icons. I’m also not sure, if it’s worth to have a button to paste the clipboard to the address textfield. But let’s discuss that in another upcoming pull-request. @luke-jr: it would be very difficult to match the OS progress bar color. In a couple of hours i have replaced every icon so then we might do a review.

jonasschnelli force-pushed on Nov 6, 2014

laanwj commented at 1:01 pm on November 6, 2014: member

@luke-jr Recoloring single-color icons for the status bar is easy, the difficult part will be finding out what the OS-defined progress bar color is and making sure that the combination makes sense. Can be done later anyhow - let’s not do that in this pull.

jonasschnelli force-pushed on Nov 6, 2014

jonasschnelli commented at 2:54 pm on November 6, 2014: contributor

All icons are now replaced. I would appreciate a review.

luke-jr commented at 3:28 pm on November 6, 2014: member

The tabs are bigger. The icons for “Backup wallet” and “Verify message” don’t make sense. The icon for “Verify message” looks like it wants to be a checkbox. The “About Qt” icon is generic. The “Pay to” buttons are larger. Unconfirmed transactions are iconed with a circle that doesn’t convey any particular meaning to me. Mined transactions have some weird triple-tilde icon that has no apparent meaning. “Confirming” transactions also have some weird loop around the partially-filled circle - I think the old “confirming” icons would have looked fine in black?

laanwj commented at 3:38 pm on November 6, 2014: member

Overall it looks good to me, although it takes some getting used to. It does look more serious and less playful now.

Agree @luke-jr about the Mined Transaction icon, I’ve always liked the hammer and pickaxe icon - the three ~ don’t make sense.

jonasschnelli commented at 3:48 pm on November 6, 2014: contributor

Yes. The tabs are slightly bigger (2-4px) to make the menu more clear. Let me try to create better icons for “verify message”, “backup wallet” and “unconfirmed tx”. The about qt icon is generic and i think this is okay (btw: is this menu entry necessary [license] and why the about QT menu is not visible on OSX?). The size of the “pay to” buttons are okay in my eye.

The weird loop around the “confirming” tx should be a watch. :) But, yes, let my try to optimized these as well as the pickaxe thing.

luke-jr commented at 3:57 pm on November 6, 2014: member

Size is a matter of screen “real estate”, not appearance - appearance should conform to the requirements of size, not vice-versa.

jonasschnelli force-pushed on Nov 6, 2014

jonasschnelli commented at 4:32 pm on November 6, 2014: contributor

I just changed the icons for

mined tx
verify message
“confirming message”
backup wallet
about qt

what do you think?

luke-jr commented at 5:40 pm on November 6, 2014: member

I guess these look okay except for changing sizes. Please find a way to make your icons work within the existing space.

luke-jr commented at 5:43 pm on November 6, 2014: member

Guess I posted too prematurely - still has the unreadable “watch”… any reason we can’t use a simple circle progress like we used to?

luke-jr commented at 7:57 pm on November 6, 2014: member

3e1a02db58c07e084273f369f3b602e487a496a7 deals with the colour stuff nicely IMO

jonasschnelli force-pushed on Nov 7, 2014

jonasschnelli commented at 8:33 am on November 7, 2014: contributor

@luke-jr: the bigger size of the toolbar was a conscious change. I just reverted the size increase change because i might focus on sizes in another pull request. I replaced the watch with a more clear locking circle thing.

SingleColorIcon: looks good. But do you think it’s a good idea to directly tie to QPalette::Highlight? In my eye this can result in a bad looking UI on different OSes. A way might would be, to choose black OR white depending on the OS Palette.

Back to the roots of this change request. My thought are: Bitcoin wants to be clear, stable and professional. The icons should follow this paradigm. Black icons are clear and should perform well on many platforms. This changeset would also support HiDPI screens which would not be possible with the current icons. Adding code to play with the color is to unstable and unpredictable in my eyes.

Some other voices, ACK or NACK?

jonasschnelli commented at 8:40 am on November 7, 2014: contributor

Here are some screenshots of the UI with the new icons on Ubuntu and OSX: https://github.com/jonasschnelli/bitcoin/issues/2

laanwj commented at 8:49 am on November 7, 2014: member

@luke-jr Nice commit; in principle, one-color icons are just glyphs, so coloring them in the text/highlight color makes a lot of sense. Maybe the result may not always be pretty on all platform, but it’s a very consistent way to think about it. @jonasschnelli No matter how we decide select the icon colors, ACK from me. Thanks for bringing back the pickaxe.

jonasschnelli force-pushed on Nov 7, 2014

jonasschnelli commented at 9:04 am on November 7, 2014: contributor

does anyone know, why some of the CI builds fail?
single color icon: how should we proceed? should we try to merge this pull request first and luke-jr might continue with the singleColorIcon or should i try to merge his https://github.com/bitcoin/bitcoin/commit/3e1a02db58c07e084273f369f3b602e487a496a7 commit and finish the work? @laanwj for the pickaxe i had to dig out all my adobe illustrator knowhow. :-)

laanwj commented at 9:07 am on November 7, 2014: member

@jonasschnelli This pull should just be icon changes - coloring work can be done later.

Edit: The travis error here happens on all UI builds. Something with resource linkage;

0qt/qt_bitcoin_qt-bitcoin.o: In function `main':
1
2bitcoin.cpp:(.text.startup+0x39): undefined reference to `qInitResources_bitcoin()'

0/home/travis/build/bitcoin/bitcoin/depends/x86_64-apple-darwin11/lib/libcrypto.a(x86_64cpuid.o) and (default) in /home/travis/build/bitcoin/bitcoin/depends/x86_64-apple-darwin11/lib/libcrypto.a(cryptlib.o)
1
2Undefined symbols for architecture x86_64:
3
4"__Z22qInitResources_bitcoinv", referenced from:
5
6_main in qt_bitcoin_qt-bitcoin.

I cannot reproduce it locally though!

laanwj commented at 12:17 pm on November 7, 2014: member

Searching back the error seems to be:

0RCC: Error in 'qt/bitcoin.qrc': Cannot find file 'res/icons/about_qt.png'

jonasschnelli force-pushed on Nov 7, 2014

Qt: new icons

- flat and b/w icons seems to be the new trend
- support for HiDPI/retina
- change icon sizes
- fix assets-attribution.md
- removed unused icons

31aac02446

jonasschnelli force-pushed on Nov 7, 2014

jonasschnelli commented at 7:21 pm on November 7, 2014: contributor

CI builds issue fixed. Ready to ACK and merge.

laanwj added this to the milestone 0.11.0 on Nov 13, 2014

laanwj merged this on Dec 16, 2014

laanwj closed this on Dec 16, 2014

laanwj referenced this in commit f3af0c898f on Dec 16, 2014

Moneetor commented at 11:10 am on April 22, 2016: none

Those new icons are so awful. I suggest bring back old icons and give to user choice of icon set.

jonasschnelli commented at 11:15 am on April 22, 2016: contributor

@Moneetor: your PR response is a bit late. The new icons has been merged more then a year ago. It would be nice to see a UX designer contributing to Bitcoin-Qt. Complaining is the wrong approach in open source software.

MarcoFalke locked this on Sep 8, 2021

Qt: new icons #5219