381 lines
17 KiB
Plaintext
381 lines
17 KiB
Plaintext
UI DESIGN DOC
|
|
|
|
Requirements
|
|
- Responsive but favoring larger screens primarily
|
|
- Smaller screens will be able to do everything but the layout is not the primary one
|
|
- Service techs have an ipad or notebook
|
|
- Anticipate a list of things each role needs immediately in front of them and try for that
|
|
- componentized UI elements so can re-use and mix and even support customizing with user defined layout
|
|
- So for example a customer list is a self contained subset of a list widget and can be plunked down anywhere required
|
|
- This will save me time so identify the "types" of ui elements (picklist, filterable data list, entry form etc)
|
|
- Then can build specific versions of the types identified like a client list is a specialized filterable data list etc.
|
|
- If a list then it also knows which element is selected or a list of selected elements so other widgets can operate on it
|
|
- A menu or command widget that can be inserted into another widget, i.e. a part picker for a workorder part list widget or elsewhere a part is required
|
|
- This way I'm only making a few UI objects, not a new one for every single element.
|
|
- Kind of making the pallet first of all required objects then I can "paint" with them on to the UI without getting bogged down in minute details every time I make a form
|
|
- UI elements should be responsive and generic enough to work for many different use cases
|
|
- they should be rights aware and mode aware (editable, read only) enough to handle all that without recoding again and again
|
|
- the page or shell or whatever that holds the widgets should be end user customizable from a widget pallet.
|
|
- The more self contained the widget the more useful
|
|
|
|
- Most people seem to prefer WBI over RI and the reason always seems to be RI is too simple or requires too many clicks
|
|
- So plan on the bigger screen layout being the main UI and smaller screen secondary
|
|
- I want things to be simpler and cleaner than it seems many people do so beware of that tendency
|
|
- People don't want to have to open sub screens any more than absolutely necessary
|
|
- Make sure a screen contains as much as possible to complete it on one screen
|
|
- Clean interface with good negative space but not dumbed down too much
|
|
- Pro-marketing style, stuff that makes it easier to sell
|
|
- emphasize simple fonts with good contrast
|
|
- Blue is a good colour, no purple or pastels
|
|
- DAshboard / customizable UI
|
|
- Ideally people can see as much detail as they want or remove unused ui widget elements
|
|
- So, for example on the dashboard they can customize by plunking down a client list widget, adding a "My workorders" widget for a tech
|
|
- or for a Ops person they can plunk down on their dashboard a current server status widget or active jobs widget etc
|
|
|
|
|
|
EXAMPLE UI INTERACTION ELEMENTS:
|
|
=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-=
|
|
CATEGORY NAV MENU ITEM -> SHOWS TOP LEVEL UI COMPONENT SPACE / PAGE
|
|
TOP PAGE -> SHOWS TOP LEVEL WIDGETS FOR THAT CATEGORY WHICH ARE USED TO DRILL DOWN INTO WHATEVER YOU WANT TO DO WITH IT
|
|
TOP WIDGETS -> SHOW SUMMARY INFO WITH OPTIONS FOR ACTIONS ON THAT ITEM
|
|
|
|
EXAMPLE:
|
|
SELECT NAV.INVENTORY -> SHOWS MULTIPLE TOP LEVEL UI WIDGETS RELATED TO INVENTORY:
|
|
- PARTS OVERVIEW WITH SUMMARY DATA OF TOP LEVEL INTEREST
|
|
- LINKS TO: CREATE, LIST, REPORT, GRAPHS (BASED ON ROLES), PLUGINS THAT AFFECT ALL INVENTORY
|
|
- LIST OPTION: SHOWS LIST OF PARTS WITH ABILITY TO EDIT, DELETE, MASS SELECT AND CHANGE (plugins, delete, tag etc), FILTER BY TAG, DATE RANGE, SORT ETC
|
|
- PO OVERVIEW WITH SUMMARY DATA OF TOP LEVEL INTEREST
|
|
- LINKS TO: CREATE, LIST, REPORTS, GRAPHS (ROLES CONTROLLED)
|
|
- PART REQUESTS OVERVIEW ETC....
|
|
- PART ASSEMBLIES
|
|
- PART CATEGORIES
|
|
- PART WAREHOUSES
|
|
|
|
----------
|
|
Or, no top level at all, just the list with a default view and can be sorted / filtered then saved as a new customized top level list widget showing as customized?
|
|
- And customized moved to dashboard
|
|
|
|
=-=-=-=-=-=
|
|
This is a worked example to determine what UI elements should be where using the Client as the example object type:
|
|
|
|
CLIENT OPS
|
|
=-=-=-=-=-
|
|
- list
|
|
- Select individually
|
|
- mass operations
|
|
- Delete
|
|
- Tag
|
|
- Import / Export / Integrate
|
|
- Notifications
|
|
|
|
- Report / Graph
|
|
|
|
- Search / Find quickly by typing in part of the name or something
|
|
- Filter
|
|
- Sort
|
|
- Set display number per page (sticky)
|
|
- Expand to full screen to show all the columns possible?
|
|
- Or...shows as many columns as possible automatically based on screen size available width
|
|
|
|
- Single
|
|
- CRUD
|
|
- TAGS
|
|
- Duplicate
|
|
- Report / Graph
|
|
- Notifications settings
|
|
- Service BANK
|
|
- CSR
|
|
|
|
- Show all
|
|
- Units
|
|
- Workorders
|
|
- Quotes
|
|
- PM
|
|
- CSR
|
|
- Service history feature for quickly seeing totals and dates (see case for deets)
|
|
- Export / Integrate
|
|
- Attachments
|
|
- Wiki
|
|
- Follow up / schedule
|
|
- Record history (should just show in main UI I think)
|
|
- Notes (separate collection, but maybe should be part of main edit ui)
|
|
|
|
|
|
- Contracts
|
|
- Projects
|
|
|
|
=-=-=-=-=-=-=-=-
|
|
|
|
|
|
|
|
|
|
Graphics and themes for AyaNova
|
|
- No bitmap graphics, vector only!!
|
|
- For the manual and docs will use material theme with MKDOCS generator.
|
|
|
|
ICON FONT - Going with Font Awesome 5.x SOLID FREE icons
|
|
=-=-=-=-=-=-=-=--=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
|
|
- I'll choose the replacement fonts as I need them from the FontAwesome5 collection and document them here.
|
|
- https://fontawesome.com/icons?d=gallery&s=regular,solid&m=free
|
|
|
|
- v7:
|
|
- v7 icons, all orangey brown in color with bits of highlight in each one of other colors. 3d in general
|
|
- Service Workorder (wrench and screwdriver)
|
|
- Workorder items (single wrench alone no screwdriver)
|
|
- Scheduled users (torso in front of calendar)
|
|
- Parts (3d cube)
|
|
- Labor (hammer)
|
|
- Travel (truck looks like loomis courier truck)
|
|
- Loans (plug from electrical cord for no apparent reason)
|
|
- Expenses (riffle of US dollar bills)
|
|
- Service templates (looks like rubber stamp)
|
|
- Quote (pen and paper)
|
|
- all subitems same as for service workorder
|
|
- PM (alarm clock and paper)
|
|
- all subitems same as for service workorder
|
|
- Schedule (looks like the schedule calendar screen but tiny and a bit cluttered)
|
|
- Inventory (3 shapes, pyramid, ball, cube in 3d effect)
|
|
- Parts (cube)
|
|
- PO items and PO receipts (both are kind of just documents, PO receipt is same but with a corner to corner orangey stripe across it that is indechipherable)
|
|
- Part requests (document like a po with a wrnch and hammer Service icon in front of it weirdly when it should be a cube I think)
|
|
- Clients (house icon with door and front mat)
|
|
- Headoffices (larger building, low rise apartment or office tower)
|
|
- Contracts (two hands shaking)
|
|
- Projects (some kind of closed book that looks like a dayplanner with colored tabs sticking out)
|
|
- Dashboard (speedometer / analog meter black dial, silver surround and lettering like from an old time auto dashboard)
|
|
- Units (cog which I don't like)
|
|
- Unit models (some kind of mechanical looking pentagram with a circular thing in the center, weird)
|
|
- Loan items (power plug for no apparent reason)
|
|
- Vendors (shopping basket handheld kind)
|
|
- Current user pane (hard hatted torso person)
|
|
- Memos (inbox looking thing)
|
|
- Notification subscriptions (loudhorn but not 3d, flat side view instead, looks more like a hatchet, man these old icons are fucked and confusing)
|
|
- Notification deliveries (loudhorn but smaller and on top of a sheet of paper)
|
|
- Wiki page (atomic diagram looking thing)
|
|
- Search (magnifying glass)
|
|
- Administration (torso with suit and set of keys superimposed)
|
|
- Global settings (planet right on the nose)
|
|
- Regions (pie chart with wedge extracted slightly)
|
|
- Security groups (keys)
|
|
- Users (hard hatted torso but front on and flat)
|
|
- Custom field ("Abc", probably the font chooser icon in most apps)
|
|
- Localized text design (address card)
|
|
- Notification deliveries (bull horn / hatchet and sheet of paper)
|
|
- Report templates (sheet of paper and small rubber stamp)
|
|
- Files in database (filing cabinet)
|
|
- Schedule markers (post it note with pin and folded up lower right corner)
|
|
- WIKI (atomic nucleus diagram / weird flower)
|
|
- GENERAL UI
|
|
- Delete (red circle with white X through it)
|
|
- OK / ACCEPT (Green circle with white checkmark through it)
|
|
- Cancel (orange circle with white "forbidden" bar across it diagonally from top right to lower left)
|
|
- Save (3.5'' diskette!?)
|
|
- Document attachments (two hardcover books back to back on an angle in 3d)
|
|
- Record history (analog clock face)
|
|
- Follow up (schedule marker post-it note with a chain link overtop of it)
|
|
- Print / report (inkjet printer)
|
|
- Duplicate (rabbit)
|
|
- Plugin (puzzle piece)
|
|
- Attach file [wiki] (file folder)
|
|
- Edit [wiki] (pencil)
|
|
- Reply [memo] (inbox used for memo with left facing green arrow superimposed)
|
|
- Forward [memo] (inbox used for memo with right facing green arrow superimposed)
|
|
- Recent [MRU on main menu] (binoculars)
|
|
|
|
|
|
|
|
|
|
LOGO
|
|
- Need to standardize on a logo and stick to it from now on
|
|
- Simple and clean (script AyaNova used for RI is maybe out)
|
|
- Single colour canucks blue with green contrast if absolutely necessary (don't make it necessary)
|
|
|
|
COLOURS
|
|
- Canucks colours of course, Blue primary and green secondary.
|
|
/* ===================
|
|
AyaNova 8 Westcoast theme
|
|
Based on Canucks current colors
|
|
Primary colour = dark blue
|
|
Web: #00205B
|
|
RGB: 0, 32, 91
|
|
|
|
Secondary colour = green
|
|
Web: #00843D
|
|
RGB: 0, 132, 61
|
|
*
|
|
* #00843D = Green
|
|
#00205B = Blue
|
|
private Color AyaGreen = System.Drawing.ColorTranslator.FromHtml("#00843D");
|
|
private Color AyaBlue = System.Drawing.ColorTranslator.FromHtml("#00205B");
|
|
=================== */
|
|
|
|
- No indigo or pastels ??
|
|
|
|
- Canucks colors in designer
|
|
- https://material.io/tools/color/#!/?view.left=1&view.right=0&primary.color=00205B&secondary.color=00843D
|
|
- Picker tool / generator of pallete: https://material.io/design/color/#tools-for-picking-colors
|
|
|
|
- https://stackoverflow.com/questions/28503998/how-to-create-custom-palette-with-custom-color-for-material-design-app
|
|
- https://material.io/design/color/#color-usage-palettes
|
|
- https://www.materialpalette.com/
|
|
|
|
|
|
Vuetify themes: https://vuetifyjs.com/en/style/theme
|
|
|
|
=-=-=-=-=-
|
|
Ref material kept for new icons possibly:
|
|
<!--
|
|
|
|
<v-list-tile>
|
|
<v-list-tile-action>
|
|
<v-icon>fa-tachometer-alt</v-icon>
|
|
</v-list-tile-action>
|
|
<v-list-tile-content>
|
|
<v-list-tile-title>Dashboard</v-list-tile-title>
|
|
</v-list-tile-content>
|
|
</v-list-tile>
|
|
|
|
<v-list-tile>
|
|
<v-list-tile-action>
|
|
<v-icon>fa-toolbox</v-icon>
|
|
</v-list-tile-action>
|
|
<v-list-tile-content>
|
|
<v-list-tile-title>Service</v-list-tile-title>
|
|
</v-list-tile-content>
|
|
</v-list-tile>
|
|
<v-list-tile>
|
|
<v-list-tile-action>
|
|
<v-icon>fa-pen</v-icon>
|
|
</v-list-tile-action>
|
|
<v-list-tile-content>
|
|
<v-list-tile-title>Quotes</v-list-tile-title>
|
|
</v-list-tile-content>
|
|
</v-list-tile>
|
|
<v-list-tile>
|
|
<v-list-tile-action>
|
|
<v-icon>fa-business-time</v-icon>
|
|
</v-list-tile-action>
|
|
<v-list-tile-content>
|
|
<v-list-tile-title>Preventive maintenance</v-list-tile-title>
|
|
</v-list-tile-content>
|
|
</v-list-tile>
|
|
<v-list-tile>
|
|
<v-list-tile-action>
|
|
<v-icon>fa-calendar-alt</v-icon>
|
|
</v-list-tile-action>
|
|
<v-list-tile-content>
|
|
<v-list-tile-title>Schedule</v-list-tile-title>
|
|
</v-list-tile-content>
|
|
</v-list-tile>
|
|
<v-list-tile>
|
|
<v-list-tile-action>
|
|
<v-icon>fa-dolly</v-icon>
|
|
</v-list-tile-action>
|
|
<v-list-tile-content>
|
|
<v-list-tile-title>Inventory</v-list-tile-title>
|
|
</v-list-tile-content>
|
|
</v-list-tile>
|
|
<v-list-tile>
|
|
<v-list-tile-action>
|
|
<v-icon>fa-address-book</v-icon>
|
|
</v-list-tile-action>
|
|
<v-list-tile-content>
|
|
<v-list-tile-title>Clients</v-list-tile-title>
|
|
</v-list-tile-content>
|
|
</v-list-tile>
|
|
<v-list-tile>
|
|
<v-list-tile-action>
|
|
<v-icon>fa-hockey-puck</v-icon>
|
|
</v-list-tile-action>
|
|
<v-list-tile-content>
|
|
<v-list-tile-title>Units</v-list-tile-title>
|
|
</v-list-tile-content>
|
|
</v-list-tile>
|
|
<v-list-tile>
|
|
<v-list-tile-action>
|
|
<v-icon>fa-shopping-basket</v-icon>
|
|
</v-list-tile-action>
|
|
<v-list-tile-content>
|
|
<v-list-tile-title>Vendors</v-list-tile-title>
|
|
</v-list-tile-content>
|
|
</v-list-tile>
|
|
<v-list-tile>
|
|
<v-list-tile-action>
|
|
<v-icon>fa-user</v-icon>
|
|
</v-list-tile-action>
|
|
<v-list-tile-content>
|
|
<v-list-tile-title>currentuser</v-list-tile-title>
|
|
</v-list-tile-content>
|
|
</v-list-tile>
|
|
<v-list-group prepend-icon="fa-cogs" value="true" no-action>
|
|
<v-list-tile slot="activator">
|
|
<v-list-tile-content>
|
|
<v-list-tile-title>Administration</v-list-tile-title>
|
|
</v-list-tile-content>
|
|
</v-list-tile>
|
|
<v-list-tile @click=";">
|
|
<v-list-tile-action>
|
|
<v-icon>fa-globe</v-icon>
|
|
</v-list-tile-action>
|
|
<v-list-tile-content>
|
|
<v-list-tile-title>Global settings</v-list-tile-title>
|
|
</v-list-tile-content>
|
|
</v-list-tile>
|
|
<v-list-tile @click=";">
|
|
<v-list-tile-action>
|
|
<v-icon>fa-users</v-icon>
|
|
</v-list-tile-action>
|
|
<v-list-tile-content>
|
|
<v-list-tile-title>Users</v-list-tile-title>
|
|
</v-list-tile-content>
|
|
</v-list-tile>
|
|
<v-list-tile @click=";">
|
|
<v-list-tile-action>
|
|
<v-icon>fa-infinity</v-icon>
|
|
</v-list-tile-action>
|
|
<v-list-tile-content>
|
|
<v-list-tile-title>Custom fields</v-list-tile-title>
|
|
</v-list-tile-content>
|
|
</v-list-tile>
|
|
<v-list-tile @click=";">
|
|
<v-list-tile-action>
|
|
<v-icon>fa-language</v-icon>
|
|
</v-list-tile-action>
|
|
<v-list-tile-content>
|
|
<v-list-tile-title>Localization</v-list-tile-title>
|
|
</v-list-tile-content>
|
|
</v-list-tile>
|
|
<v-list-tile @click=";">
|
|
<v-list-tile-action>
|
|
<v-icon>fa-broadcast-tower</v-icon>
|
|
</v-list-tile-action>
|
|
<v-list-tile-content>
|
|
<v-list-tile-title>Notification deliveries</v-list-tile-title>
|
|
</v-list-tile-content>
|
|
</v-list-tile>
|
|
<v-list-tile @click=";">
|
|
<v-list-tile-action>
|
|
<v-icon>fa-pen-fancy</v-icon>
|
|
</v-list-tile-action>
|
|
<v-list-tile-content>
|
|
<v-list-tile-title>Report templates</v-list-tile-title>
|
|
</v-list-tile-content>
|
|
</v-list-tile>
|
|
<v-list-tile @click=";">
|
|
<v-list-tile-action>
|
|
<v-icon>fa-hdd</v-icon>
|
|
</v-list-tile-action>
|
|
<v-list-tile-content>
|
|
<v-list-tile-title>Files</v-list-tile-title>
|
|
</v-list-tile-content>
|
|
</v-list-tile>
|
|
<v-list-tile @click=";">
|
|
<v-list-tile-action>
|
|
<v-icon>fa-lightbulb</v-icon>
|
|
</v-list-tile-action>
|
|
<v-list-tile-content>
|
|
<v-list-tile-title>Reminders</v-list-tile-title>
|
|
</v-list-tile-content>
|
|
</v-list-tile>
|
|
</v-list-group>
|
|
--> |