Orion’s user interface has evolved into a flatter, simplified form, resulting in a light, clean, web based software development experience.
Most noticeable is the unification of the navigation and breadcrumb bars into a single bar that floats the breadcrumb in the middle, right at the top of the page. [ CSS3 Flexboxes came in very handy for this work and allow for different configurations ].
The breadcrumb has been programmed to fit within defined bounds, with an algorithm that shows the most relevant parts that fit. In future releases the width of the breadcrumb will respond to the width of the page, but still will not wrap, it will remain as a single line.
In keeping with many web and mobile applications the user interface now has a ‘hamburger’ menu that contains links to all of the pages. On tapping or clicking the hamburger a full menu is shown – displaying two columns that divide standard navigation links from dynamically useful links ( that adjust in relevance to the task that you’re performing ).
Finally on the top bar is a persona icon that keeps links to settings. This simplified look allows a developer to make space for focus on their code – the breadcrumb is prominent, the links are collected in one place and the editing area is generous.
Orion’s pages are developed around tasks. The team has been disciplined to keep each page focused on one job, so that the pages load efficiently and hopefully channel only the necessary user interface for completing a development step. This aligns very well with a mobile first approach, but can sometimes pose questions about the depth of a single task.
Navigation and editing is a combination of tasks that has caused the team to question the right level of page flow. The team has found division between developers that like a navigation tree in one page, and an editor in another – with developers that like a traditional navigation/editing setup in a single page.
Orion introduces a navigation tree alongside the editor in this release, but retains the established single page navigation tree. Switching from the navigation tree in an editor, to the outline function view offers the same previous set-up. Developers can choose how they work.
Orion is continuing to pare the base theme down to a flat, simple, modern look, with monotone icons. There are lots of tools and capability built into Orion, but it is contained well within the clean user interface.
Many of the things a user would look for in a mobile app – fast page load times, simple task based views, good space for editing and creating are all things that benefit Orion on a standard desktop. So the end product looks well on a tablet in landscape mode, as well as on a laptop or desktop screen. It is quick and convenient to integrate git content with self hosted development sites, from wherever you are.