433 lines
20 KiB
Plaintext
433 lines
20 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
|
|
|
|
|
|
- RAVEN PROPOSED NAV PANEL
|
|
|
|
- "HOME" (Current user specific stuff only)
|
|
- "OVERVIEW" (old "dashboard" not sure of the LT name but it's the old dashboard) of service if a tech or has access to tech related shit like current dashboard
|
|
- A customer had thoughts on the dashboard:
|
|
- case 1974: shootnsharp@thesoileaus.com "In my opinion, the dashboard would be much more functional and valuable if I could determine how many work orders show on the screen and possibly even what statuses (or be able to sort by status, priority, etc.) The At a Glance stats of Service Rate Quantity is helpful but would be even more relevant if it showed what was approaching due date, overdue, waiting on parts, pending parts requests, items on loan stats, preventative maintenance work orders approaching and overdue. Having the capability to customize the Dashboard is key because each Service business has its own metrics that are most important to its business."
|
|
- SCHEDULE (User's own schedule only if applicable, all users can have a schedule so it goes here)
|
|
- MEMOS (for user)
|
|
- SCHEDULE MARKERS (list for user, convenience extra so don't need to hunt around on calendar)
|
|
- SETTINGS
|
|
- User locale settings
|
|
- Any other user specific settings that the User can control (and sb able to control more than in v7 if it doesn't affect anyone else)
|
|
- Change login?
|
|
- notification subscriptions
|
|
- Notifciation deliveries
|
|
- CUSTOMERS
|
|
- CUSTOMERS (customers)
|
|
- HEAD OFFICES
|
|
- SERVICE
|
|
- WORKORDERS (was "service" in v7, now all "service" workorders are just workorders)
|
|
- ALL LEVELS
|
|
- NOTE: Either all levels still in menu at left here or somehow at right in separate boxes maybe, I like the idea of the in menu better with single right pane for simplicity
|
|
- TEMPLATES
|
|
- QUOTES
|
|
- See "Workorders" above same layout
|
|
- PREVENTIVE MAINTENANCE
|
|
- See "Workorders" above same layout
|
|
- UNITS
|
|
- UNIT MODELS
|
|
- CONTRACTS
|
|
- CUSTOMER SERVICE REQUESTS
|
|
- LOANERS (not 100% certain about this location for this item)
|
|
- SCHEDULE (all users not just current one)
|
|
- INVENTORY
|
|
- PARTS (part list)
|
|
- INVENTORY
|
|
- PART REQUESTS
|
|
- PURCHASE ORDERS
|
|
- PO ITEMS (WEIRD)
|
|
- PO RECEIPTS
|
|
- PO RECEIPT ITEMS (ALSO WEIRD)
|
|
- ADJUSTMENTS
|
|
- WIDGETS (for testing purposes)
|
|
- VENDORS
|
|
- single level, no subitems
|
|
- ACCOUNTING
|
|
- Any new accounting funcationlity (theres' some new workorder stuff for accting)
|
|
- All old plugin accounting integration stuff
|
|
- ADMINISTRATION
|
|
- GLOBAL SETTINGS
|
|
- LICENSE RELATED
|
|
- USERS
|
|
- LOCALIZED TEXT DESIGN
|
|
- REPORT TEMPLATES
|
|
- FILES IN DATABASE
|
|
- SCHEDULE MARKERS (DEPRECATED) (This shows *all* sm for all users, kind of weird, not documented at all, leaving it out)
|
|
- HISTORY (event log) view, filter, sort etc the whole thing here to see what activity is happening in general
|
|
- KPI WIDGETS AND GRAPHS AND SHIT FOR BIZ ADMIN
|
|
- OPERATIONS CONSOLE
|
|
- SERVER CONTROL? (close/open server ops? Or does that happen automatically when doing other jobs?)
|
|
- "ARCHIVE" (BACKUP /RESTORE)
|
|
- JOBS (view status of, trigger some maybe)
|
|
- SERVER LOGS
|
|
- METRICS
|
|
- NOTIFICATION CONFIG AND CHECK DELIVERIES
|
|
|
|
|
|
|
|
[HOLDER]
|
|
[HOLDER]
|
|
ACTION
|
|
ACTION
|
|
ACTION
|
|
ACTION
|
|
ACTION
|
|
[HOLDER]
|
|
ACTION
|
|
|
|
So top level can be a holder or an action
|
|
if holder then we are in second level
|
|
SECOND LEVEL
|
|
Can be a holder or an action
|
|
if Holder then we are in third level
|
|
Can only be an action
|
|
action
|
|
action
|
|
|
|
FOR REFERENCE HERE IS THE v7 NAV panel LAYOUT:
|
|
- V7 nav panel is like this:
|
|
- DASHBOARD
|
|
- SERVICE
|
|
- All levels of workorders of this type
|
|
- Templates for workorders of this type
|
|
- QUOTES
|
|
- All levels of workorders of this type
|
|
- Templates for workorders of this type
|
|
- PREVENTIVE MAINTENANCE
|
|
- All levels of workorders of this type
|
|
- Templates for workorders of this type
|
|
- SCHEDULE
|
|
- INVENTORY
|
|
- parts
|
|
- po's
|
|
- po items (weird)
|
|
- po receipts
|
|
- po receipt items (also weird)
|
|
- adjustments
|
|
- adjustment items (strange)
|
|
- part inventory
|
|
- part requests
|
|
- CLIENTS (CUSTOMERS)
|
|
- clients (customers)
|
|
- head offices
|
|
- contracts
|
|
- projects
|
|
- customer service requests
|
|
- UNITS
|
|
- units
|
|
- unit models
|
|
- loan items
|
|
- VENDORS
|
|
- vendors
|
|
- CURRENT USER
|
|
- memos
|
|
- notification subscriptions
|
|
- notification deliveries
|
|
- wiki page (personal, wtf?)
|
|
- SEARCH
|
|
- ADMINISTRATION
|
|
- global settings
|
|
- regions
|
|
- security groups
|
|
- users
|
|
- custom field design
|
|
- localized text design
|
|
- notification deliveries (last 7 days)
|
|
- report templates
|
|
- files in database
|
|
- schedule markers (wtf forgot about this what's it for again?)
|
|
|
|
|
|
|
|
=-=-=-=-=-=
|
|
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
|
|
|
|
========================================================================================
|
|
SHELL and UI elements plan:
|
|
|
|
|
|
|
|
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 could be control panel, lists, (rarely) reports, (rarely) graphs, calendar etc, but most often lists
|
|
|
|
EXAMPLE:
|
|
SELECT NAV.INVENTORY -> SHOWS MULTIPLE TOP LEVEL UI WIDGETS RELATED TO INVENTORY:
|
|
- PARTS LIST WIDGET
|
|
- 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 LIST
|
|
- LINKS TO: CREATE, REPORTS, GRAPHS (ROLES CONTROLLED)
|
|
- PART REQUESTS OVERVIEW ETC....
|
|
- PART ASSEMBLIES
|
|
- PART CATEGORIES
|
|
- PART WAREHOUSES
|
|
- Maybe some stock graphs and reports in same page?? Or are these sub types of lists? (probably since you can select in the list what to report / graph)
|
|
|
|
----------
|
|
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 HOME view, ordered by source type i.e. all widget lists together and in order of creation or something or nameable maybe?
|
|
- Home view can contain any widget that can be customized or the stock ones,
|
|
defaults to dashboard of some kind or defaults empty maybe with a placeholder "save widgets here"
|
|
|
|
- Stock widgets always remain in their places pre-defined so can't mess up the view / can always find them
|
|
- Customized widgets all go to home page?
|
|
- This way user can build up the UI they want to see every day
|
|
|
|
|
|
TYPES OF CUSTOMIZABLE WIDGETS
|
|
- List
|
|
- Report
|
|
- Control panel (like global options, list of options right in main widget)
|
|
- Graph
|
|
- Calendar / schedule
|
|
- subtypes or morphs?
|
|
- Day / month / week etc
|
|
|
|
Fixed widgets
|
|
- CRUD editor, kind of built into the other widgets as the default editor type for each type
|
|
|
|
|
|
UI Made up of the customizable and fixed widgets then subbed in place, so a list widget is generic but then is put into an outer component where it has custom elements and list specific api stuff added
|
|
- icon, api, lt etc
|
|
|
|
|
|
WIDGET HIEARCHY
|
|
|
|
AYWIDGET (OUTER WRAPPER)
|
|
HOSTS ONE OF THESE:
|
|
List
|
|
Report
|
|
Graph
|
|
Calendar
|
|
CRUD editor
|
|
|
|
AYWIDGET abilities:
|
|
- Can have a name / title and be customized
|
|
- Can be positioned in order
|
|
- Can be fullscreen or several set smaller sizes
|
|
- Can be moved to home page
|
|
|
|
|
|
BREAKPOINTS
|
|
=-=-=-=-=-=
|
|
|
|
Plan: Layout and design each component for the smallest screen size first, then add more elements to each one as the size increases.
|
|
- “when in doubt, just remove.” (or place in a menu out of main view)
|
|
- It makes no sense to target individual devices anymore. Instead, add breakpoints where your design breaks.
|
|
If you start with your design for the smallest device and start to drag your browser window wider, when do the lines become too long to read comfortably?
|
|
When could you make better use of the screen? That is the point at which to add a Media Query and write some additional CSS.
|
|
- So design with the tiny ones and minimalist, then drag out and see where can add more value with more stuff.
|
|
- Ideally at this point I'd like to see small and large only, medium specific design not necessary but testing obviously is (TIME TO MARKET!)
|
|
- NAV For example a menu can be fully shown as icons in a larger size but might be behind another click in smaller
|
|
- Functionality: figure out what the minimum most important things to show at small size then add more "optional" stuff as it increases
|
|
- Grid: show the Name column first and selector, then add the most relevant columns in order of relevancy
|
|
- 1-Name, 2-Tags?, 3- etc
|
|
- graph: mini graph at smallest size with controls hidden for modifying it, then more controls and larger graph at larger sizes
|
|
- Crud: all is needed, but responsive layout so long vertical column in sm and increasing columns by similar group of items in larger
|
|
- Menu controls maybe buried if not super needed in sm but all visible in large increasingly by usage
|
|
|
|
Can I make one component for each type that is responsive or do I need to make a separate component for each breakpoint I will support?
|
|
- One component pros: less code to maintain theoretically, cons: maybe less well designed for that size
|