{"id":241,"date":"2012-11-16T17:53:26","date_gmt":"2012-11-16T17:53:26","guid":{"rendered":"http:\/\/blog.devexperts.com\/?p=241"},"modified":"2022-07-28T11:47:53","modified_gmt":"2022-07-28T11:47:53","slug":"ui","status":"publish","type":"post","link":"https:\/\/devexperts.com\/blog\/ui\/","title":{"rendered":"Designing User Interface in the Trading Software"},"content":{"rendered":"\r\n<p>Users of modern trading platforms demand complex features and flexibility for their day-to-day tasks, and it is the UI designer&#8217;s job to satisfy those needs. This article gives a brief overview of some modern approaches towards workspace organization for complex user interfaces.<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-devexperts-custom-thumbnail\"><figure><picture><source media=\"(max-width: 639px)\" data-srcset=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/Index-postcard-big-1148-X-1148-574x574.png 2x, https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/Index-postcard-big-1148-X-1148-300x300.png 1x\"\/><source media=\"(min-width: 640px) and (max-width: 767px)\" data-srcset=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/Post-inner-banner-2336x1314-1-1168x657.png 2x, https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/Post-inner-banner-2336x1314-1-600x338.png 1x\"\/><source media=\"(min-width: 768px) and (max-width: 1023px)\" data-srcset=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/Post-inner-banner-2336x1314-1-1168x657.png 2x, https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/Post-inner-banner-2336x1314-1-728x410.png 1x\"\/><source media=\"(min-width: 1024px) and (max-width: 1279px)\" data-srcset=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/Post-inner-banner-2336x1314-1-1168x657.png 1x, https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/Post-inner-banner-2336x1314-1-690x388.png 1x\"\/><source media=\"(min-width: 1280px)\" data-srcset=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/Post-inner-banner-2336x1314-1-1752x986.png 2x,\r\n\t\t\t\thttps:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/Post-inner-banner-2336x1314-1-1752x986.png 1.5x,\r\n\t\t\t\thttps:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/Post-inner-banner-2336x1314-1-870x489.png 1x\"\/><img decoding=\"async\" class=\"singleThumbnail lazyload\" src=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/Post-inner-banner-2336x1314-1-1024x576.png\" data-src=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/Post-inner-banner-2336x1314-1-870x489.png\"\/><\/picture><\/figure><\/div>\r\n\r\n\r\n\r\n<p>On the surface, trading seems like a no-brainer from the user interface standpoint: all you need is to buy low, sell high, and some enthusiasm in trading to make your billions.<\/p>\r\n\r\n\r\n\r\n<p>In other words, the tasks that a user needs to complete within a trading platform, are:<\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\"><li>Determine an object to buy or sell (this object is usually called an instrument)<\/li><li>Determine the time that is best to buy or sell<\/li><li>Perform the buy or sell<\/li><li>Monitor the impact of the transaction on your account.<\/li><\/ul>\r\n\r\n\r\n\r\n<p>It seems easy enough. A user interface that would make this simple-minded trader happy would then look like this.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image\"><a href=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/mockup.png\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"213\" src=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/mockup-300x213.png\" alt=\"mockup\" class=\"wp-image-247\" srcset=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/mockup-300x213.png 300w, https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/mockup.png 311w\" sizes=\"auto, (max-width: 959px) calc(100vw - 30px), 870px\" \/><\/a><\/figure>\r\n\r\n\r\n\r\n<p>UI done! Piece of cake, wasn\u2019t it? However the trading process and a workable UI design for it is not that simple.<\/p>\r\n\r\n\r\n\r\n<p>The first issue is the method of buying and selling things on the exchanges. This is usually done by means of trading orders, which are statements with a strict syntax that tell the system you would like to perform some action on a tradable object.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-table\"><table><tbody><tr><td>The simplest order is your intent to buy<\/td><td>Buy the good ABC<\/td><\/tr><tr><td>You would normally like to have a certain price on<br>that, so your order would be<\/td><td>Buy the good ABC at<br>price X<\/td><\/tr><tr><td>&#8230; or cheaper than that, if the market permits<\/td><td>Buy the good ABC at<br>price X or lower<\/td><\/tr><tr><td>You may also want to define simple time conditions<\/td><td>Buy the good ABC at<br>price X or lower after 12pm<\/td><\/tr><tr><td>\u2026or more tricky ones, like<\/td><td>Buy the good ABC at<br>price X or lower after 12pm if the price for A had raised for the past<br>10 deals<\/td><\/tr><tr><td>&#8230; and for sophisticated trading, you&#8217;d start adding<br>further actions like<\/td><td>&#8230; and for<br>sophisticated trading, you&#8217;d start adding further actions like<\/td><\/tr><\/tbody><\/table><\/figure>\r\n\r\n\r\n\r\n<p>\u2026and so on. These are definitely not the most complex cases available, either. The problem is that the UI for sending such orders has to accommodate all of these potential scenarios.<\/p>\r\n\r\n\r\n\r\n<p>But there are still more things that add further complexity, such as requirements and user interfaces that differ depending on what the user is trading (e.g. stocks, FOREX, options or futures), what their goals are (investment or speculation), what the user\u2019s role is in the process, etc.<\/p>\r\n\r\n\r\n\r\n<p>And there&#8217;s still more beyond all of this. One will need a completely different UI should they engage in algorithmic trade. After all, you don&#8217;t want just two buttons to control that wicked robot capable of running your account balance down from 100K to zero in no time. Consequently, the tools are completely different if you make the switch from manual to &#8220;algo&#8221;.<\/p>\r\n\r\n\r\n\r\n<p>Yet another thing to mention is that professional traders want professional tools. From the user interface standpoint, this means &#8220;professionally looking&#8221;, or simply speaking, &#8220;something that doesn&#8217;t look too simple&#8221;. The professional trading UI needs to have enough complexity and power to meet all of the potential needs of clients, and yet still be user-friendly despite appearing somewhat intimidating at first glance. It turns out that this relates not only to true pro apps but also for amateurs\u2014we all want to look like the cool guys, don&#8217;t we?<\/p>\r\n\r\n\r\n\r\n<p>Normally, a trader would require several tools on the screen all at once. One doesn&#8217;t just issue an order and then stop and go watch quotes. Trading platforms tend to use every single screen pixel for useful information. The more dense the data output, the more tools must be readily available under your cursor.<\/p>\r\n\r\n\r\n\r\n<p>Finally, let&#8217;s consider the desire for flexibility and the requirements to support multiple devices of various sizes to complete this real world nightmare of UI design problems. How do we simplify this and fit it all into a single application?<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"157\" src=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/win-ok-300x157.png\" alt=\"\" class=\"wp-image-248\" srcset=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/win-ok-300x157.png 300w, https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/win-ok.png 803w\" sizes=\"auto, (max-width: 959px) calc(100vw - 30px), 870px\" \/><\/figure>\r\n\r\n\r\n\r\n<p>Someone familiar with modern operating systems like Windows might suggest that the multi-document approach could work here. You can set up boxes that can be resized, moved and positioned wherever one likes. In fact many developers implement this in their platforms.<\/p>\r\n\r\n\r\n\r\n<p>The bad news is that this windowed approach needs some serious UI work. Either that or your trading platform screen becomes cluttered with garbage in no time. And &#8211; you cannot use this design for touchscreen devices.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image\"><a href=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/win-not-ok.png\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"126\" src=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/win-not-ok-300x126.png\" alt=\"\" class=\"wp-image-251\" srcset=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/win-not-ok-300x126.png 300w, https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/win-not-ok.png 1001w\" sizes=\"auto, (max-width: 959px) calc(100vw - 30px), 870px\" \/><\/a><\/figure>\r\n\r\n\r\n\r\n<p>So where do we start then? First of all, we must accept that different devices, be it smartphones, iPads or desktop computers, each need a different approach. There are existing strategies that can be used, as well as new smarter solutions can also be created. I&#8217;ll cover the findings from Devexperts\u2019 experience that we use in designing our products for different devices:<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-smartphones-and-small-devices\">Smartphones and small devices<\/h2>\r\n\r\n\r\n\r\n<p>The problems with these begin with the small screen size:<\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\"><li>The in-app navigation selection eats up space<\/li><li>You don&#8217;t see the big picture of your account\u2019s state from the in-depth views<\/li><li>You need different views of the same data, and they also eat up space<\/li><li>Certain important forms (like order entry) can get very long, and it is no surprise that you quickly run out of space.<\/li><\/ul>\r\n\r\n\r\n\r\n<p>We solve these first two issues by setting up a dashboard that shows the \u201cbig picture\u201d and that can be accessed by a simple gesture from everywhere in the app. The dashboard itself serves also as a navigation menu, so you can quickly switch between different tasks.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image is-resized\"><a href=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/dashboard-vertical-dashboard.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/dashboard-vertical-dashboard-176x300.png\" alt=\"\" class=\"wp-image-254\" width=\"176\" height=\"300\" srcset=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/dashboard-vertical-dashboard-176x300.png 176w, https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/dashboard-vertical-dashboard.png 450w\" sizes=\"auto, (max-width: 959px) calc(100vw - 30px), 870px\" \/><\/a><\/figure>\r\n\r\n\r\n\r\n<p>Simple gestures can be also used for data views. In the example below, you switch from one set of data columns to another by simply swiping the screen right or left.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image\"><a href=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/swipe-table.png\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"244\" src=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/swipe-table-300x244.png\" alt=\"swipe-table\" class=\"wp-image-255\" srcset=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/swipe-table-300x244.png 300w, https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/swipe-table.png 697w\" sizes=\"auto, (max-width: 959px) calc(100vw - 30px), 870px\" \/><\/a><\/figure>\r\n\r\n\r\n\r\n<p>The forms are made modular, which aids in creating complex orders, yet the main action button always stays on the screen.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-ipad-and-tablets\">iPad and tablets<\/h2>\r\n\r\n\r\n\r\n<p>A tablet computer seems much closer to a large PC, but still has some of the smartphone problems.<\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\"><li>Despite the bigger screen, users are still operating the tablet apps with their fingers. That is, the interactive controls must be somewhat large<\/li><li>Users see the screen as bigger, so more data and more tool panels seem to fit; the classic \u201cleft-navigation-and-content\u201d approach is too limiting for them<\/li><li>Still, this multitude needs to give way to a big chart from time to time and somehow the UI has to combine both<\/li><li>When you start trying to show more components than a single screen can fit, the user can easily get lost. This means that showing the path and the current position in the app are required<\/li><\/ul>\r\n\r\n\r\n\r\n<p>We started with giving the user the ability to have more than just two content panels. It can be a wide (yet limited) area that has zones&#8230;<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image\"><a href=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/newMockup_3.png\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"193\" src=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/newMockup_3-300x193.png\" alt=\"\" class=\"wp-image-258\" srcset=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/newMockup_3-300x193.png 300w, https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/newMockup_3.png 992w\" sizes=\"auto, (max-width: 959px) calc(100vw - 30px), 870px\" \/><\/a><\/figure>\r\n\r\n\r\n\r\n<p>&#8230;or a canvas of unlimited width that lets you add as many components as you like. Additional controls like the \u201cquick-jump\u201d were designed to ease navigation on such a canvas, but good old fashioned scrolling can also be used, and using a known pattern in the UI adds to the perceived ease-of-use.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image\"><a href=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/newMockup_4.png\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"103\" src=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/newMockup_4-300x103.png\" alt=\"\" class=\"wp-image-260\" srcset=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/newMockup_4-300x103.png 300w, https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/newMockup_4-1024x354.png 1024w, https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/newMockup_4.png 1551w\" sizes=\"auto, (max-width: 959px) calc(100vw - 30px), 870px\" \/><\/a><\/figure>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-web-and-desktop-platforms\">Web and desktop platforms<\/h2>\r\n\r\n\r\n\r\n<p>Web and \u201cnative\u201d apps now have much in common, including UI problems. Here are a few of the things that we design for:<\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\"><li>Ease of switching between multiple and single monitor configurations, e.g. from desktop PC to laptop<\/li><li>Different screen layouts and tool sets for different tasks, all being easily switchable<\/li><li>Resolving issues associated with a lack of screen \u201creal estate\u201d<\/li><li>Ways of organizing screen layouts<\/li><li>System performance and enhancement<\/li><\/ul>\r\n\r\n\r\n\r\n<p>The major flaw in the multi-document (&#8220;windowed&#8221;) approach is the third dimension. Windows can overlap each other causing tools to get buried under where you need them. The first solution is to remove overlapping completely. This works fine for some cases.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image\"><a href=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/u0_original.png\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"202\" src=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/u0_original-300x202.png\" alt=\"\" class=\"wp-image-261\" srcset=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/u0_original-300x202.png 300w, https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/u0_original-1024x690.png 1024w, https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/u0_original.png 1300w\" sizes=\"auto, (max-width: 959px) calc(100vw - 30px), 870px\" \/><\/a><\/figure>\r\n\r\n\r\n\r\n<p>Since resizing and arranging components is a basic feature that users require from a desktop application, attention should be paid to this. Since the choice is often to remove the flaw of overlap, frameworks like the one used in editions of dxTradePro allow automatic &#8216;docking&#8217; and splitting of the workspace to fit components. Presto! No more overlaps.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image\"><a href=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/docking.png\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"211\" src=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/docking-300x211.png\" alt=\"\" class=\"wp-image-262\" srcset=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/docking-300x211.png 300w, https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/docking-1024x720.png 1024w, https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/docking.png 1165w\" sizes=\"auto, (max-width: 959px) calc(100vw - 30px), 870px\" \/><\/a><\/figure>\r\n\r\n\r\n\r\n<p>A useful addition both for \u201cflat\u201d frameworks that don&#8217;t allow overlap, and for 3D-enabled windows, is a way to organize the panels in a more creative and useful way than just a cascade.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image\"><a href=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/2012-11-12_142842.png\"><img loading=\"lazy\" decoding=\"async\" width=\"230\" height=\"209\" src=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/2012-11-12_142842.png\" alt=\"\" class=\"wp-image-263\"\/><\/a><\/figure>\r\n\r\n\r\n\r\n<p>If you still decide to stick to the more traditional window approach, remember that there are already a lot of things done. The multi-document approach can be enriched with tricks like sticky windows and a modular grid. In the latter case a window can only be resized by a multiple of a relatively small &#8216;module&#8217; &#8211; this makes the entire layout much more organized and predictable in behavior.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image\"><a href=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/newMockup_6.png\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"218\" src=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/newMockup_6-300x218.png\" alt=\"\" class=\"wp-image-264\" srcset=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/newMockup_6-300x218.png 300w, https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/newMockup_6-1024x744.png 1024w, https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/newMockup_6.png 1165w\" sizes=\"auto, (max-width: 959px) calc(100vw - 30px), 870px\" \/><\/a><\/figure>\r\n\r\n\r\n\r\n<p>Another frequently required option is to simultaneously enable different workspaces for different tasks (e.g. trading and monitoring), or to simply increase the space not available on a single monitor. We use different approaches here, from traditional tabs to something far more fancy-looking. The requirement met are much the same for all of them: that the switching should be simple, predictable and easily reversible.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image\"><a href=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/2012-11-13_181024.png\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"261\" src=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/2012-11-13_181024-300x261.png\" alt=\"\" class=\"wp-image-265\" srcset=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/2012-11-13_181024-300x261.png 300w, https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/2012-11-13_181024.png 910w\" sizes=\"auto, (max-width: 959px) calc(100vw - 30px), 870px\" \/><\/a><\/figure>\r\n\r\n\r\n\r\n<p>Finally, there is always an option to create a new OS window for a component. Although you are relying on the quality of Microsoft&#8217;s or Apple&#8217;s work here, in some cases this is more acceptable to users and developers, so this option should be considered.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image\"><a href=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/desktop.png\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"241\" src=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/desktop-300x241.png\" alt=\"\" class=\"wp-image-266\" srcset=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/desktop-300x241.png 300w, https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/desktop-1024x823.png 1024w, https:\/\/devexperts.com\/blog\/app\/uploads\/2012\/11\/desktop.png 1275w\" sizes=\"auto, (max-width: 959px) calc(100vw - 30px), 870px\" \/><\/a><\/figure>\r\n\r\n\r\n\r\n<p>We hope this overview will help you make the right choices to aid workspace organization for your trading platform, or any system requiring a complex UI.<\/p>\r\n","protected":false},"excerpt":{"rendered":"<p>Users of modern trading platforms demand complex features and flexibility for their day-to-day tasks, and it is the UI designer&#8217;s &hellip; <\/p>\n","protected":false},"author":11,"featured_media":1668,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2020],"tags":[23,22],"class_list":["post-241","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-fintech","tag-design","tag-ui"],"acf":{"nifty_post_card_image":4308,"nifty_post_card_index_big":4311,"nifty_post_inner_image":4310,"nifty_post_card_banner":4309},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.2 (Yoast SEO v27.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Designing User Interface in the Trading Software \u2013 Devexperts Blog<\/title>\n<meta name=\"description\" content=\"Trading platform has a very complex user interface. We describe how to design an easy-to-use user interface for the trader.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/devexperts.com\/blog\/ui\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Designing User Interface in the Trading Software\" \/>\n<meta property=\"og:description\" content=\"Trading platform has a very complex user interface. We describe how to design an easy-to-use user interface for the trader.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/devexperts.com\/blog\/ui\/\" \/>\n<meta property=\"og:site_name\" content=\"Devexperts Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/devexperts\/\" \/>\n<meta property=\"article:published_time\" content=\"2012-11-16T17:53:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-28T11:47:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/devexperts.com\/blog\/app\/uploads\/2017\/08\/purple-full.png\" \/>\n\t<meta property=\"og:image:width\" content=\"3840\" \/>\n\t<meta property=\"og:image:height\" content=\"700\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Alexey Gaponov\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@devexperts\" \/>\n<meta name=\"twitter:site\" content=\"@devexperts\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alexey Gaponov\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/devexperts.com\/blog\/ui\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/devexperts.com\/blog\/ui\/\"},\"author\":{\"name\":\"Alexey Gaponov\"},\"headline\":\"Designing User Interface in the Trading Software\",\"datePublished\":\"2012-11-16T17:53:26+00:00\",\"dateModified\":\"2022-07-28T11:47:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/devexperts.com\/blog\/ui\/\"},\"wordCount\":1599,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/devexperts.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/devexperts.com\/blog\/ui\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/devexperts.com\/blog\/app\/uploads\/2017\/08\/purple-full.png\",\"keywords\":[\"design\",\"UI\"],\"articleSection\":[\"Fintech\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/devexperts.com\/blog\/ui\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/devexperts.com\/blog\/ui\/\",\"url\":\"https:\/\/devexperts.com\/blog\/ui\/\",\"name\":\"Designing User Interface in the Trading Software \u2013 Devexperts Blog\",\"isPartOf\":{\"@id\":\"https:\/\/devexperts.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/devexperts.com\/blog\/ui\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/devexperts.com\/blog\/ui\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/devexperts.com\/blog\/app\/uploads\/2017\/08\/purple-full.png\",\"datePublished\":\"2012-11-16T17:53:26+00:00\",\"dateModified\":\"2022-07-28T11:47:53+00:00\",\"description\":\"Trading platform has a very complex user interface. We describe how to design an easy-to-use user interface for the trader.\",\"breadcrumb\":{\"@id\":\"https:\/\/devexperts.com\/blog\/ui\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/devexperts.com\/blog\/ui\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/devexperts.com\/blog\/ui\/#primaryimage\",\"url\":\"https:\/\/devexperts.com\/blog\/app\/uploads\/2017\/08\/purple-full.png\",\"contentUrl\":\"https:\/\/devexperts.com\/blog\/app\/uploads\/2017\/08\/purple-full.png\",\"width\":3840,\"height\":700},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/devexperts.com\/blog\/ui\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/devexperts.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Designing User Interface in the Trading Software\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/devexperts.com\/blog\/#website\",\"url\":\"https:\/\/devexperts.com\/blog\/\",\"name\":\"Devexperts Blog\",\"description\":\"We make complex finance ideas on technology, innovation and business simple\",\"publisher\":{\"@id\":\"https:\/\/devexperts.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/devexperts.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/devexperts.com\/blog\/#organization\",\"name\":\"Devexperts LLC\",\"url\":\"https:\/\/devexperts.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/devexperts.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/devexperts.com\/blog\/app\/uploads\/2019\/08\/DX-logo.png\",\"contentUrl\":\"https:\/\/devexperts.com\/blog\/app\/uploads\/2019\/08\/DX-logo.png\",\"width\":167,\"height\":30,\"caption\":\"Devexperts LLC\"},\"image\":{\"@id\":\"https:\/\/devexperts.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/devexperts\/\",\"https:\/\/x.com\/devexperts\",\"https:\/\/www.linkedin.com\/company\/devexperts\",\"https:\/\/www.youtube.com\/channel\/UCF3FRmes2KrcVsTXQ1aAB5w\/featured\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Designing User Interface in the Trading Software \u2013 Devexperts Blog","description":"Trading platform has a very complex user interface. We describe how to design an easy-to-use user interface for the trader.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/devexperts.com\/blog\/ui\/","og_locale":"en_US","og_type":"article","og_title":"Designing User Interface in the Trading Software","og_description":"Trading platform has a very complex user interface. We describe how to design an easy-to-use user interface for the trader.","og_url":"https:\/\/devexperts.com\/blog\/ui\/","og_site_name":"Devexperts Blog","article_publisher":"https:\/\/www.facebook.com\/devexperts\/","article_published_time":"2012-11-16T17:53:26+00:00","article_modified_time":"2022-07-28T11:47:53+00:00","og_image":[{"width":3840,"height":700,"url":"https:\/\/devexperts.com\/blog\/app\/uploads\/2017\/08\/purple-full.png","type":"image\/png"}],"author":"Alexey Gaponov","twitter_card":"summary_large_image","twitter_creator":"@devexperts","twitter_site":"@devexperts","twitter_misc":{"Written by":"Alexey Gaponov","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/devexperts.com\/blog\/ui\/#article","isPartOf":{"@id":"https:\/\/devexperts.com\/blog\/ui\/"},"author":{"name":"Alexey Gaponov"},"headline":"Designing User Interface in the Trading Software","datePublished":"2012-11-16T17:53:26+00:00","dateModified":"2022-07-28T11:47:53+00:00","mainEntityOfPage":{"@id":"https:\/\/devexperts.com\/blog\/ui\/"},"wordCount":1599,"commentCount":0,"publisher":{"@id":"https:\/\/devexperts.com\/blog\/#organization"},"image":{"@id":"https:\/\/devexperts.com\/blog\/ui\/#primaryimage"},"thumbnailUrl":"https:\/\/devexperts.com\/blog\/app\/uploads\/2017\/08\/purple-full.png","keywords":["design","UI"],"articleSection":["Fintech"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/devexperts.com\/blog\/ui\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/devexperts.com\/blog\/ui\/","url":"https:\/\/devexperts.com\/blog\/ui\/","name":"Designing User Interface in the Trading Software \u2013 Devexperts Blog","isPartOf":{"@id":"https:\/\/devexperts.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/devexperts.com\/blog\/ui\/#primaryimage"},"image":{"@id":"https:\/\/devexperts.com\/blog\/ui\/#primaryimage"},"thumbnailUrl":"https:\/\/devexperts.com\/blog\/app\/uploads\/2017\/08\/purple-full.png","datePublished":"2012-11-16T17:53:26+00:00","dateModified":"2022-07-28T11:47:53+00:00","description":"Trading platform has a very complex user interface. We describe how to design an easy-to-use user interface for the trader.","breadcrumb":{"@id":"https:\/\/devexperts.com\/blog\/ui\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/devexperts.com\/blog\/ui\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/devexperts.com\/blog\/ui\/#primaryimage","url":"https:\/\/devexperts.com\/blog\/app\/uploads\/2017\/08\/purple-full.png","contentUrl":"https:\/\/devexperts.com\/blog\/app\/uploads\/2017\/08\/purple-full.png","width":3840,"height":700},{"@type":"BreadcrumbList","@id":"https:\/\/devexperts.com\/blog\/ui\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/devexperts.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Designing User Interface in the Trading Software"}]},{"@type":"WebSite","@id":"https:\/\/devexperts.com\/blog\/#website","url":"https:\/\/devexperts.com\/blog\/","name":"Devexperts Blog","description":"We make complex finance ideas on technology, innovation and business simple","publisher":{"@id":"https:\/\/devexperts.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/devexperts.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/devexperts.com\/blog\/#organization","name":"Devexperts LLC","url":"https:\/\/devexperts.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/devexperts.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/devexperts.com\/blog\/app\/uploads\/2019\/08\/DX-logo.png","contentUrl":"https:\/\/devexperts.com\/blog\/app\/uploads\/2019\/08\/DX-logo.png","width":167,"height":30,"caption":"Devexperts LLC"},"image":{"@id":"https:\/\/devexperts.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/devexperts\/","https:\/\/x.com\/devexperts","https:\/\/www.linkedin.com\/company\/devexperts","https:\/\/www.youtube.com\/channel\/UCF3FRmes2KrcVsTXQ1aAB5w\/featured"]}]}},"_links":{"self":[{"href":"https:\/\/devexperts.com\/blog\/wp-json\/wp\/v2\/posts\/241","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devexperts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devexperts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devexperts.com\/blog\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/devexperts.com\/blog\/wp-json\/wp\/v2\/comments?post=241"}],"version-history":[{"count":27,"href":"https:\/\/devexperts.com\/blog\/wp-json\/wp\/v2\/posts\/241\/revisions"}],"predecessor-version":[{"id":4688,"href":"https:\/\/devexperts.com\/blog\/wp-json\/wp\/v2\/posts\/241\/revisions\/4688"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devexperts.com\/blog\/wp-json\/wp\/v2\/media\/1668"}],"wp:attachment":[{"href":"https:\/\/devexperts.com\/blog\/wp-json\/wp\/v2\/media?parent=241"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devexperts.com\/blog\/wp-json\/wp\/v2\/categories?post=241"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devexperts.com\/blog\/wp-json\/wp\/v2\/tags?post=241"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}