{"id":2133,"date":"2019-06-04T09:05:51","date_gmt":"2019-06-04T09:05:51","guid":{"rendered":"https:\/\/www.instantdeveloper.com\/?p=2133"},"modified":"2024-04-26T18:09:08","modified_gmt":"2024-04-26T18:09:08","slug":"designing-ux-for-business-software-standard-ux-solutions","status":"publish","type":"post","link":"https:\/\/www.instantdeveloper.com\/en\/blog\/ux-ui-en-en\/designing-ux-for-business-software-standard-ux-solutions\/","title":{"rendered":"Designing UX for business software: standard UX solutions"},"content":{"rendered":"<div id=\"bsf_rt_marker\"><\/div>\n<p>In the <a href=\"https:\/\/www.instantdeveloper.com\/en\/blog\/ux-ui-en-en\/designing-ux-for-business-software-learn-to-know-your-user\/\">previous article<\/a>, we saw that the first step in correctly designing a UX for business type applications lies in knowing your user, and that to do this you must put together the User Profile, User Stories, and Business Model documents.<\/p>\n\n\n\n<p>At this point, all that&#8217;s left is to address the second and final step: creating the application prototype, the <em>mockup<\/em>. People with a background in designing traditional business applications can be tempted to reuse that they already know: menus with many levels, grids with dozens of columns, interminable views.<\/p>\n\n\n\n<p>To change this mindset, the easiest step is to accept the challenges of mobile-first design. If we are able to get our app into a smartphone, then it will certainly be usable on a tablet or desktop as well.<\/p>\n\n\n\n<p>Often when I suggest this approach, the answer is: \u201cImpossible! Our system is too complicated to work on a smartphone.\u201d But if that were truly the case, which users will be able to use it without a complete training course?<\/p>\n\n\n\n<p>I have found that often the real reason for this <em>impossibility<\/em> lies in an insufficient understanding of the process and the user who must execute it. When these factors are present, you only need a <em>set<\/em> of standard templates to apply (but we&#8217;ll get to that).<\/p>\n\n\n\n<p>To get to the mockup, the most important step is to create a <em>wireframe<\/em> model. In practice, this means designing the various application views as rectangles containing just the name and a brief description of the content. Each view must then be linked to the others using arrows, in order to clearly define the navigation path.<\/p>\n\n\n\n<p>With this model you can already perform an initial test: get the User Stories document and check the behavior of the application using the wireframe to see if the user experience is acceptable. For example, if the user is at a bus stop, we can&#8217;t ask them to navigate through ten views to complete a process.<\/p>\n\n\n\n<p>Once the wireframe is satisfactory, it&#8217;s time to move on to the actual mockup. To do this <em>for business type apps<\/em>, we can use relatively well-established models. For example, <a href=\"https:\/\/ionicframework.com\/docs\/components\/\" target=\"_blank\" rel=\"noopener\">Ionic Framework<\/a> contains components that are already ready for tabbed views, lists, and forms.<\/p>\n\n\n\n<p>This versatility is the reason that we included it in Instant Developer, to make it even more intuitive to use, even just for simple mockups. Would you like to see a list of standard views? Open <a href=\"https:\/\/prod3-pro-gamma.instantdevelopercloud.com\/mobiledesignpatterns\/client\/preview.html?device=desktop\" target=\"_blank\" rel=\"noopener\">this page<\/a> and click around.<\/p>\n\n\n\n<p>My last, absolutely vital, piece of advice is to find someone who has already done what you&#8217;re trying to do. There are many applications you can study, and this will make it easier to understand what works and what doesn&#8217;t, simply by trying it for yourself.<\/p>\n\n\n\n<p>And after you&#8217;ve made your mockup, if you still have questions, I&#8217;m here to give more specific advice.&nbsp;<a href=\"mailto:a.maioli@instantdeveloper.com\">Write to me<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In the previous article, we saw that the first step in correctly designing a UX for business type applications lies in knowing your user, and that to do this you must put together the User Profile, User Stories, and Business Model documents. At this point\u2026<\/p>\n","protected":false},"author":3,"featured_media":655,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[142],"tags":[],"class_list":["post-2133","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ux-ui-en-en"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.instantdeveloper.com\/en\/wp-json\/wp\/v2\/posts\/2133","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.instantdeveloper.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.instantdeveloper.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.instantdeveloper.com\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.instantdeveloper.com\/en\/wp-json\/wp\/v2\/comments?post=2133"}],"version-history":[{"count":2,"href":"https:\/\/www.instantdeveloper.com\/en\/wp-json\/wp\/v2\/posts\/2133\/revisions"}],"predecessor-version":[{"id":9660,"href":"https:\/\/www.instantdeveloper.com\/en\/wp-json\/wp\/v2\/posts\/2133\/revisions\/9660"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.instantdeveloper.com\/en\/wp-json\/wp\/v2\/media\/655"}],"wp:attachment":[{"href":"https:\/\/www.instantdeveloper.com\/en\/wp-json\/wp\/v2\/media?parent=2133"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.instantdeveloper.com\/en\/wp-json\/wp\/v2\/categories?post=2133"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.instantdeveloper.com\/en\/wp-json\/wp\/v2\/tags?post=2133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}