The official Bitcoin client looks awful

[bitplane]

I understand that this may go down like a lead balloon, but please read it anyway because I think it's important.

I'm a programmer rather than a designer, but I can tell a good looking app from one that was made by programmers alone. The official Bitcoin client is one of the latter. For the system to take off we need a good looking client.

How do we make a good looking client?

Well, first of all we need to decide what's wrong with the official client. The main thing I can see with it is that it's full of technical jargon that means nothing to a first time user before they've read the manual, and we all know that users never read the manual. It lacks tooltips to explain the jargon, visual cues and metaphors to show what the things mean. It also just looks ugly, there are no graphics other than the send and address book icons (which are actually reasonably nice and easy to understand IMO)

What does "134,184 blocks" mean to a user? A time-based approach would be more informative. Tell them how out-of-date they are, not some arbitrary number that they don't understand!

What does "2 connections" mean to a user? Showing this as a red to green bar, with a tooltip giving suggestions of how to get better connectivity would be much more user-friendly.

IMO the list of transactions shouldn't even be visible on the first page, it's distracting and noisy. What does "50 confirmations" mean to a user anyway? Offer them some advice here, set a threshold for "confirmed" and have the UI show a confirmed balance and an unconfirmed balance. Advise them how much effort someone would need to put in to steal their BTC based on the number of confirmations.

There are probably other things too, but I personally think the client needs some love from a real UI designer, followed by proper user-testing by people's grandparents.

[1715483968]

1715483968

[1715483968]

1715483968

[wumpus]

https://forum.bitcoin.org/index.php?topic=15276.0

Tooltips etc are already implemented, there are bars for the number of connections, and on initial block download it shows a progress bar.

Number of confirmations is not visible anymore (it shows a clock or tick icon). Filtering is easier using an excel-like filter row, so there are no longer the weird tabs.

Pull requests are welcome.

[bitplane]

Hey that's much nicer, great improvement!

[wumpus]

What does "134,184 blocks" mean to a user? A time-based approach would be more informative. Tell them how out-of-date they are, not some arbitrary number that they don't understand!

This is a pretty good idea BTW. One way to do this would be to show an "OK" icon when the last downloaded block is within a certain time period (1hr or so), otherwise an "in progress" one...

[Oldminer]

Hey that's much nicer, great improvement!

Yea I've been keeping an eye on Bitcoin mark II 

[ascent]

Actually, without offending the developers out there, I still don't think it looks very good.

I think when you fire it up, you should get a (perhaps dark) screen, no itemized listing of transactions, but simply large animated iconic visuals indicating status. The "Send coins" function should be much bigger, and front and center. If you click a tab, you then get an itemized listing of your transactions. There is relatively simple functionality in this application. Make it slick. Make it look like the best iPhone apps out there.

Your balance should not show anywhere on the initial screen. Transactions and balances are only visible when you press the tab. Suppose you wish to open it up with someone behind you to affect a payment to someone (maybe the person standing behind your shoulder)?

[wumpus]

Well, go build it. I'm building a desktop application not a iPhone app. There is no money in this and I'm only doing this for my own fun.

Edit: something like you describe could be done with "Qt quick" though, you can use the model classes of my GUI just replace the views

[ascent]

Well, go build it. I'm building a desktop application not a iPhone app. There is no money in this and I'm only doing this for my own fun.

Do as you will. But my advice was free. Maybe, just maybe, one or two of the words in my statement are worth considering. I meant nothing personal - your version is better looking than the current version, and there is nothing wrong with your programming skills or motivation.

But consider how visual and immediately identifiable a large "Send Money" or "Send Coins" icon against a black background would look in the center of the opening screen. Some animated graphs/bars could be below that. And there would be no need for anyone else in the room to see your balance or transactions unless you choose to click on the appropriate tab/button to view such things.

[ascent]

Edit: something like you describe could be done with "Qt quick" though, you can use the model classes of my GUI just replace the views

I'm currently using Qt to develop an application for a client right now.

[wumpus]

Well as I said, go ahead. Pull requests are welcome.

[ribuck]

What does "134,184 blocks" mean to a user? A time-based approach would be more informative. Tell them how out-of-date they are...

That is a brilliant suggestion. It would avoid a lot of new-user problems.

[wumpus]

What does "134,184 blocks" mean to a user? A time-based approach would be more informative. Tell them how out-of-date they are...

That is a brilliant suggestion. It would avoid a lot of new-user problems.

What about something like this, instead of "Number of blocks",

"Most recent block: 3 days ago"
"Most recent block: 5 hours ago"
"Up to date" if latest block is less than an hour ago

[prof7bit]

Edit: something like you describe could be done with "Qt quick" though

<0.02 BTC>
<rant type="not personal" target="many" trigger="Qt">

It can be easily (and quickly) done with *any* modern GUI toolkit, it just needs developers who feel "at home" with the used toolkit or at least do not have irrational prejudices against it. A Qt developer will of course not like wx and find Qt easier but you will hear quite the opposite if you ask people who are well versed with wx, they will tell you that they don't like Qt. Both of them will have valid points but none of them has the absolute truth.

It looks like currently the Qt developers seem to be in superior numbers in the bitcoin community which I personally find a real pity becuse it will (a) not allow the current toolkit to be *correctly* used to its full potential (which in turn will then additionally be used as an unjust argument against it) or even outright irrational refusal to use it correctly and (b) a lot of manpower will go into porting an existing appliction from one toolkit to the other (both of which would be equally suited and capable) for *no other* reason than satisfying the personal likes and dislikes of the current majority of devs, time that could better be used to make improvements to the current GUI and the bitcoin implementation itself.

</rant>
</0.02 BTC>

[wumpus]

Yes but my point is that Qt quick is meant for easily scripting iphone-like animated bling bling interfaces as ascent was talking about. Even a graphic designer without much coding skills could make it.

I'm not a graphic designer though. I don't plan on hiring one either, so he/she would have to voluntarily work on this.

I am the only dev actively working with the users here to improve the GUI, and I prefer working with Qt (non-quick) so it makes sense to use that. "Porting over the application" has already been done weeks ago.

[WakiMiko]

Actually, without offending the developers out there, I still don't think it looks very good.

I think when you fire it up, you should get a (perhaps dark) screen, no itemized listing of transactions, but simply large animated iconic visuals indicating status. The "Send coins" function should be much bigger, and front and center. If you click a tab, you then get an itemized listing of your transactions. There is relatively simple functionality in this application. Make it slick. Make it look like the best iPhone apps out there.

Your balance should not show anywhere on the initial screen. Transactions and balances are only visible when you press the tab. Suppose you wish to open it up with someone behind you to affect a payment to someone (maybe the person standing behind your shoulder)?

This is a desktop application and not an iPhone app, so functionality should come way before fancy visuals and useless eyecandy. Also, I dislike desktop applications that try to sport their own oh-so-cool look and do not adhere to the OS's look-and-feel, they always make a rather toy-ish impression on me.
Extreme example:

http://www.hardwarecanucks.com/wp-content/uploads/SOC-4.jpg

Qt is cross-platform and provides a native look-and-feel for different OSs, desktop environments and even mobile phones, so I think it is a good idea to use it.

[prof7bit]

Qt is cross-platform and provides a native look-and-feel for different OSs, desktop environments and even mobile phones, so I think it is a good idea to use it.

wxWidgets is cross platform too and unlike Qt its even using the native widgets available on the various platforms themselves. If you really want to argue in favor of nativeness of the look & feel then wx would clearly be the better choice and not an owner-drawn themed emulation like Qt.

[wumpus]

It seems you have outdated information. Qt has a native handler for GTK, MacOSX and Windows at least.

Anyway, the widget toolkit is not really the topic of discussion here.

[ascent]

Extreme example:

http://www.hardwarecanucks.com/wp-content/uploads/SOC-4.jpg

Showing something ugly is not an argument against developing something elegant and beautiful.

[wumpus]

Extreme example:

Showing something ugly is not an argument against developing something elegant and beautiful.

There is no argument, just make what you want. If you want a iPhone-like GUI, make a iPhone-like GUI. If you want a better wxWindows-based GUI, make a better wxWindows-based GUI. I really don't understand some of the people here.

You can either work with me or do your own thing. Open source = freedom.

[prof7bit]

It seems you have outdated information. Qt has a native handler for GTK, MacOSX and Windows at least.

No, nothing has changed. Qt is still emulatig the L&F as it has always done and is rendering every single pixel of every control itself rather than using the platform native controls. Just look into the source code to see it for yourself.

[dan_a]

There is no argument, just make what you want. If you want a iPhone-like GUI, make a iPhone-like GUI. If you want a better wxWindows-based GUI, make a better wxWindows-based GUI. I really don't understand some of the people here.

You can either work with me or do your own thing. Open source = freedom.

And if you can't make it, offer a BTC bounty for someone else to.

[wumpus]

No, nothing has changed. Qt is still emulatig the L&F as it has always done and is rendering every single pixel of every control itself rather than using the platform native controls. Just look into the source code to see it for yourself.

Ok just for fun I just checked "src/gui/styles/qgtkpainter.cpp" in Qt 4.7.3.  It really calls gtk to do the drawing (gdk_pixbuf, gtk_icon, GtkWidget). I haven't checked for the other backends, but wouldn't know why this would be different. You can also check by changing the GTK theme. If it drew fake gtk-ish controls it would ignore that.

Edit, for Vista:

 \class QWindowsVistaStyle
  \brief The QWindowsVistaStyle class provides a look and feel suitable for applications on Microsoft Windows Vista.
  \since 4.3
  \ingroup appearance

  \warning This style is only available on the Windows Vista platform
  because it makes use of Windows Vista's style engine.

Do I need to go on?

And if you can't make it, offer a BTC bounty for someone else to.

+1

[Nesetalis]

the information display should be interactive... when i recieve a payment, i should be able to check, right then and there, what address it came from, which address its going to, what tx was paid, and so forth... i should also be able to copy the information with both keyboard shortcuts, and there should be a right click context menu..
the client also has ALOT of wasted space.
screen realestate may not be important for some people, but for me it is. 'send coins' and 'address book' dont need to be on their own line.. it looks like some idiot just threw all the buttons on to the screen in order, and didnt care where they landed.

I should also be able to prune history by a set ammount of time.. transactions over 5000 confirmations are old enough that i probably dont give two shits about them :p the information should be accessable, but it shouldnt be right there on the front of everything hogging resources.

as for comments about Qt.. Qt is awesome, use it :p

[bitplane]

This is a desktop application and not an iPhone app, so functionality should come way before fancy visuals and useless eyecandy. Also, I dislike desktop applications that try to sport their own oh-so-cool look and do not adhere to the OS's look-and-feel, they always make a rather toy-ish impression on me.

Yeah I agree, but not because they're toy-ish but because they deviate from the standards that users expect. The example you gave is bad because of the background, wasted space, layout, tabs and buttons not looking like what users expect and the general clutter of it. Good design is not achieved when there is nothing left to add, but when there is nothing left to remove.

To paraphrase Donald Norman, as little knowledge of how to use the object as possible should be held in the head, it should exist in the "world" (in this case the UI). A good UI design is split into categories to reduce clutter thus preventing the need to memorize actions and locations (knowledge in the head), each item should use metaphor (icons to represent real-world items, pushables "sticking out", draggables that look like they can be grabbed) and logical mappings (sorting a list is done via its column header, use of colours to signify categories) to draw on knowledge that people already have and make things obvious. When there's no other option, use standards; *most* people know how to operate a drop-down list or combo-box because they've used loads of them before.

The problem with programmers or engineers being designers is that we believe we are normal users when we're not! I may have read Norman's design book and Spolsky's UI book, but I still suck at making user-friendly designs because as soon as I start hacking I my innocence is soiled by the technical knowledge I acquire. This is the greatest challenge of UI design and why most apps look like crap.

[wumpus]

the information display should be interactive... when i recieve a payment, i should be able to check, right then and there,

This has been implemented, you get a notification when a transaction comes in, with all that info.

i should also be able to copy the information with both keyboard shortcuts, and there should be a right click context menu..

A right-click context menu on the transaction list? What kind of options would you expect there?

'send coins' and 'address book' dont need to be on their own line..

A toolbar is pretty standard in any application these days.

I should also be able to prune history by a set ammount of time.. transactions over 5000 confirmations are old enough that i probably dont give two shits about them :p the information should be accessable, but it shouldnt be right there on the front of everything hogging resources.

Filtering has been implemented, by default it still shows all transactions in the list, but it is possible to only display the transactions of today, this week, this month etc.

[prof7bit]

Ok just for fun I just checked "src/gui/styles/qgtkpainter.cpp" in Qt 4.7.3.  It really calls gtk to do the drawing (gdk_pixbuf, gtk_icon, GtkWidget). I haven't checked for the other backends, but wouldn't know why this would be different. You can also check by changing the GTK theme. If it drew fake gtk-ish controls it would ignore that.

Look harder. Its drawing its own emulated versions of the controls. It is re-implementing the behavior and it is emulating the look of each control by drawing its own stuff into *generic empty* windows. It is using some native graphics and theming API to draw its own things that look like the original native controls.

[wumpus]

Look harder. Its drawing its own emulated versions of the controls. It is re-implementing the behavior and it is emulating the look of each control by drawing its own stuff into *generic empty* windows. It is using some native graphics and theming API to draw its own things that look like the original native controls.

I don't really care beyond this, this level of nativeness is good enough for me.

[bitplane]

Slightly off-topic, but are there any HTML rendering toolkits that are incredibly lightweight, cross platform and with minimal dependencies? Given all the progress made in the web over the past decade, it may be better to just go ahead and write apps in HTML as they're very flexible and well known by users. A desktop app that looks and feels web 2.0 would be rather nice IMO.

[MysteryMiner]

The official Bitcoin client looks just like it should look.

If for some noob it's too technical (the 3 items on the statusbar, connections, blocks, transaction count), then he must reconsider using Bitcoin and computers in general and return to using showel and axe.

[antares]

Actually, without offending the developers out there, I still don't think it looks very good.

I think when you fire it up, you should get a (perhaps dark) screen, no itemized listing of transactions, but simply large animated iconic visuals indicating status. The "Send coins" function should be much bigger, and front and center. If you click a tab, you then get an itemized listing of your transactions. There is relatively simple functionality in this application. Make it slick. Make it look like the best iPhone apps out there.

Your balance should not show anywhere on the initial screen. Transactions and balances are only visible when you press the tab. Suppose you wish to open it up with someone behind you to affect a payment to someone (maybe the person standing behind your shoulder)?

Hell beware - imo the client is just right - I can approve to some of the OPs suggestions, but it should still be rather functional than "look like some stupid iphone app". People use the client to do transactions, not to waste their time.

[phillipsjk]

Slightly off-topic, but are there any HTML rendering toolkits that are incredibly lightweight, cross platform and with minimal dependencies? Given all the progress made in the web over the past decade, it may be better to just go ahead and write apps in HTML as they're very flexible and well known by users. A desktop app that looks and feels web 2.0 would be rather nice IMO.

No. HTML is a document mark-up language based on SGML. IMO converting web-browsers into Operating Systems is not progress. HTML and Cascading style sheets were never intended exclusively for gui rendering. My favorite web-browser (lynx) is text-based, but has been stuck at about HTML 3.2 because it does not implement the Document Object Model (also used for stylesheets.) That browser uses external viewers for displaying things like images and video. This is a lot more convenient and secure than running a proprietary video player from the website you are visiting (every website using flash and silvelight video).

One other point: Client-side scripting takes control from the user. Before I can trust the EMCA Script in a web-page not to send my information to parts unknown, I have to review the source-code. Not user-friendly at all; as I have to check every time I load the page.

[bitplane]

The official Bitcoin client looks just like it should look.

If for some noob it's too technical (the 3 items on the statusbar, connections, blocks, transaction count), then he must reconsider using Bitcoin and computers in general and return to using showel and axe.

This is technological elitism and a very short-sighted, ignorant view of the world. Either we have a GUI client or we don't, if you don't want a user-friendly UI then stick to the command line.

[antares]

@bitplane - I consider people should at least get some knowledge before using bitcoins - it's usually those people thar are even too dumb to google up those said 3 items that get their wallets stolen and then spread the word about some unsafe service, just because they are too dumb and ignorant to admit that it's their own fault. As I said I can feel for some of your suggestions from the first post, however it shouldn't be too easy. I mean, look at the recent mtgox incident - there were people using unsafe passwords. Those were the one who cried out loud. It's not like we've 1995 here, where password security was something "unheard of before" in the internet community. Therefore I consider at least some basic barrier to keep away those who are even too unwilling to read a couple pages before using something. That again implies that a fluffy colourful iPhone-bitcoin is in fact the wrong step - it attracts those dumb people like light attracts flies.

For Definition: A dumb person is (IMHO) someone who does not know something AND is not willing to get at least basic knowledge by researching the missing information, while complaining when that same persons fails because they did not research at least basic information.

Further, being a noob is not something bad(imho). We all started as noobs, but many of us have evolved and learned about the possibilites, risks and precautions using bitcoin

[bitplane]

No. HTML is a document mark-up language based on SGML. IMO converting web-browsers into Operating Systems is not progress.

I know what HTML is, I was just struggling to think of a GUI toolkit that designers find easy to use, that is cross platform, user-friendly, mature and suited to rapid development. HTML ticks all of those boxes, in fact Windows 8 will use HTML and JavaScript for client-side apps.

The Win32 API and Cocoa are reasonably lightweight, but not cross-platform. GTK, .Net, QT and Java have enormous dependencies and are a ball-ache to just jump in and start developing for. WebKit is tiny but has loads of Apple's dependencies, Mozilla have a very ugly build process.

CEGUI and Irrlicht are nice and small, but not very flexible. A small, lightweight, cross-platform HTML4 rendering library with minimal dependencies (zlib, opengl and libpng) would solve a lot of problems in this space. For example we wouldn't need a 10MB download for the Bitcoin client, and the same code could be used across mobile devices with constrained memory.

[bitplane]

@antares, now I may be drunk and this may be offensive, but you're talking bollocks. I don't want to have to search the web to know how to use a piece of software, it should just work. If the user interface of some software requires searching the web before you can use it, then it quite simply fails at its job of interfacing with the user!

If the key audience is a technical elite like you are suggesting, then there should be compile instructions rather than binaries on the main website. I'd be quite happy with that, but that's not the case.

[Hans0]

The question is: Are the bitcoin devs aware that the app sucks big time and know how to improve it? I believe they are. If they are, they don't need our input.

To me it looks like the UI can get most needed features in a fulltime-week effort. It is pretty good already but it need 10-20 additional little tweaks, features and tools to be perfect for noobs as well as for nerds at the same time.

[MysteryMiner]

What should you need to change in Bitcoin client??? You need to bloat the GUI with skinnable themes to attract additional bunch of retarded users who judge software purely from so called "eye candy"? (search youtube for "happy tree friends eye candy") (lol)

You must get rid of the block count in statusbar that most users even did not notice?

The Bitcoin is example of simplicity and functionality. I have said my word.

[Hans0]

For example you need to be able to do ctrl-c on a bitcoin address or have provider-pluggable cloud-based backup built in. There are a million things still to do.

[Nesetalis]

things to put in a context menu: copy recieved address, copy sent address, copy full log, an item to open another window with the transaction log, hide, and pin.

as for the tool bar, a toolbar is fine, but sitting empty like that is pointless waste of space. Stick your bitcoin balance on that as well instead of on its own line... displaying the bitcoin address the way it does doesnt really do anything either by the way, no one cares what the string contains, just so long as it connects to them. More useful would be a tool to choose an address to copy (of your previous addresses) or choosing one of the new ones.

I would really like the information that is acquired through blockexplorer to be accessable, not all of it, just the relevant information to your own transactions.

[MysteryMiner]

For example you need to be able to do ctrl-c on a bitcoin address or have provider-pluggable cloud-based backup built in. There are a million things still to do.

You can do that! There is button "Copy to Clipboard". You probably missed it because the button is yet not skinnable... Sorry, can't resist being sarcastic.

Cloud based backup is bad idea. Backing up wallet on so called "cloud" gives 2 concerns. First the cloud can be destroyed by adversary or accident more easily than offline backups in your phisical possesion. Second, even if the backup crypto is not broken, the theft of wallet is more easily done becouse all you need is login information than wallet.dat file itself. Login information is a little bit easier to retrieve from remote systems using keyloggers than file.

[ascent]

What should you need to change in Bitcoin client??? You need to bloat the GUI with skinnable themes to attract additional bunch of retarded users who judge software purely from so called "eye candy"? (search youtube for "happy tree friends eye candy") (lol)

No. There's a big difference between stupid skinned themes designed by programmers and a clean fluid looking interface that looks contemporary and is designed by a designer.

Everyone, please don't take my original advice. From the replies here, it's obvious it would be confused with some programmer's idea of what a cool skinned theme would look like, which is just wrong. Stick to what you're doing. Maybe someday, you can hire a designer and make it look really good.

[ascent]

Here's a reasonable feature request: when you go to send coins, if the amount is *large*, then perhaps a warning should pop up before the actual coins are sent asking you to verify that you did not make a typo?

Presumably, what is considered a large amount will vary over time and from individual to individual, so this amount could be adjustable.

[Hans0]

For example you need to be able to do ctrl-c on a bitcoin address or have provider-pluggable cloud-based backup built in. There are a million things still to do.

You can do that! There is button "Copy to Clipboard". You probably missed it because the button is yet not skinnable... Sorry, can't resist being sarcastic.

Cloud based backup is bad idea. Backing up wallet on so called "cloud" gives 2 concerns. First the cloud can be destroyed by adversary or accident more easily than offline backups in your phisical possesion. Second, even if the backup crypto is not broken, the theft of wallet is more easily done becouse all you need is login information than wallet.dat file itself. Login information is a little bit easier to retrieve from remote systems using keyloggers than file.

Ok I should not have mentioned concrete examples. Discussing them is besides the point. Let me add to the ctrl-c reply of your that I know that it is possible. I just wish you could it in the window that opens when you double-click a transaction line. You can select the text but do nothing with it.

Again: Discussing them is besides the point. There is a lot do do. Don't make us take your medicine, Dr. Trax. I do not wish to glow in the dark.