Transcription

Epicor Mobile FrameworkUser InterfaceDesign GuidelinesEpicor Software CorporationFor Internal Use Only

Table of content Get Started/Overview Guiding Design Principles EMF Visual Style Guide EMF Components EMF User Interface Elements

Get Started/OverviewImportance of having this guidelines and how it impacts Epicor has brand and overall experience to the users.Importance of these guidelinesUnderstanding of the FundamentalsWhen starting a new application or redesigning an existing one, it is important fordevelopers to restrain themselves from immediately typing code in and start thinking interms of user experience: what are they trying to achieve, who is the target user of theapplication, what would the user like, what is the user’s list of desired features, whatapplication use cases should be considered?UX design for mobile applications is different from desktop ones. Developers need tounderstand and design within the limits set by several mobile constraints: limited data,limited battery, divided attention, handedness (how devices are held in hand), small screenand network intermittence. The course offers tips on how to design an application taking theconstraints into consideration.Benefits of knowing and applying these guidelinesDesign guidelines are a set of concepts and rules used to create an app's user interface. Thesedefine how the layout on-screen at any one time should be used to maximize the efficiency ofpresenting data to the user, as well as quickly informing them how to choose their next action.The main benefits of following design guidelines and using common UI elements in an appdevelopment process are summarized as follows: User interface consistency, which establishes familiarity and predictability.Clarity towards which information is most important and hence visible and usable.Reduced user confusion and frustration, leading to improved perception of apps.No need to include explicit usage instructions in every app to explain how it must be used.Clearer, more efficient and better looking apps.Faster development time, improved communication among all the stakeholders involved in developing the interface.

EMF Guiding Design PrinciplesEase of Use and Joy of Use are the two critical criteria determining the success of our products and solutions. The best approaches to Successfully & Effectively delivering products that willdelight the users is to thoroughly understand the goals of Users and Stakeholders and keep those goals in mind while designing software. It is essential & important for us to Design &Develop products and solutions maintaining rational aspects like efficiency or usefulness with emotional aspects such as friendliness, reliable or trustable.Our Apps should be: innovative, useful, elegant, understandable, unobtrusive, honest, sustainable, accurate, optimized, minimalist, reliable.The principles described are critical to the design & development of elegant, efficient and intuitive products.Fundamental Principles1Simplify things to increase confidence of the userThings we create should be easy to use, easy to learn, easy to find, andeasy to adapt. Intuition happens outside of conscious reasoning, so byutilizing it you are actually reducing the burden on people's minds. That willmake them feel confident and likely a lot happier.2Time matters, value itOur products should be designed to utilize minimum time of the users toperform/accomplish a task with greater efficiency.3Optimize the design for the most frequent or important tasksUnderstanding how users will use the software you are designing is criticallyimportant. We should use that understanding to anticipate the information,task flows, and features that users require at key points within the userexperience.45Predictable/obviousMake your application predictable/obvious by using industry standard userinterface conventions wherever possible. Use a common set of designpatterns and guidelines so that users don't have to relearn how to performcommon tasks.Consider persons with disabilities when designing your applicationsSome users of your application may have impaired vision or physicallimitations that affect their ability to use the application.6Contextual helpDesign the application so that contextual help is available to users whenthey need it. Users should not have to refer to Help constantly to completetheir tasks.7Create a visual hierarchy that matches the user's needsVisual hierarchy is a combination of several dimensions to aid in theprocessing of information, such as color, size, position, contrast, shape,proximity to resembling items. Not only must a page be well organized sothat it's easy to scan, but the prioritization of information and functionalityought to imitate real world usage scenarios. Don't make the most commonlyused items the furthest out of reach.8Avoid jargon & technical wordsUse widely & universally accepted and understood terminology/languageonly. Speak the users' language, with words, phrases and concepts familiarto the user, rather than system-oriented terms.9Use appropriate defaultsProviding preselected or predetermined options is one of the ways tominimize decisions and increase efficiency. But choose wisely: if you assignthe defaults to the wrong options (meaning that the majority of people areforced to change the selection), you'll end up creating more stress andprocessing time.

EMF Guiding Design PrinciplesFundamental Principles10Provide timely and specific feedbackKeep the user informed why they're waiting. Tell them that you're working.Tell them you heard them and offer the next step along their path. Userexpects feedback when they input a data/information.15Be credible and trustworthyIt's hard to tell who you can trust these days, so the only way to gain theconfidence of your customers is to earn it—do what you say you're going todo, don't over promise and under deliver.11Be consistentNavigational mechanisms, organizational structure and metaphors usedthroughout the design must be predictable and reliable. When things don'tmatch up between multiple areas, the experience can feel disjointed,confusing and uncomfortable. People will start to question whether they'remisunderstanding the intended meaning or if they missed a key cue.Consistency implies stability, and people always want to feel like they're ingood hands.16Test the AppsTesting the Apps with actual devices, users and environment and collectingfeedback will aid us in improvising the overall experience.12Distraction-free experienceAn effective design should always allow people to focus on the task at handwithout having their attention diverted to less critical tasks. Design for tasksto be carried out consecutively instead of concurrently in order to keeppeople in the moment. The design should be organized with related featuresand content areas appropriately chunked.13Reduce latencyKeep the user informed if they have to wait for processing of particulartransaction or data fetching. Use appropriate words to communicate andapproximate time they would need to wait.14Error preventionEven better than good error messages is a careful design which prevents aproblem from occurring in the first place. Either eliminate error-proneconditions or check for them and present users with a confirmation optionbefore they commit to the action. If people make mistakes (either becausethey misunderstood the directions or mistyped or were misled by you),ensure that they are able to easily fix them.

EMFVisual Style Guide

Visual Style GuideThe Epicor Visual Identity is comprised of our logo, design elements, colors, layout style, and image use. The way we present our products and ourselves is second in importance only to thesuccess of the customers we proudly serve. By using this clear and distinctive wordmark, we will maintain a strong presence with all of our audiences in the highly competitive and clutteredenvironments where we communicate.Ensuring consistency and legibility wherever our identity is reproduced will amplify the Epicor presence across all media. To that end, it is important to understand, support, and comply withour identity guidelines.Visit the Epicor Brand Site for more examples: ebook-ens-ug.aspx.BrandEpicor Logo usageThe Epicor logo should always have a minimum area of isolation, separatingit from content and other distracting elements. This clear zone is effectivelythe height and width of the Epicor “E”.Do not reduce the logo to make it fit in the interfaces, always use the largestpossible size of height and proportionate width.Incorrect Logo usageThese examples demonstrate improper use of the Epicor logo. Theseexamples are improper because of illegibility, inconsistency, and lack ofregard for Epicor logo guidelines.

Visual Style GuideColorThe Epicor logo should primarily be represented in blue. It may also berepresented in dark gray, or reversed in white with dark gray background.Primary ColorBlue is the used as primary color on all Epicor App interface to keep it inalign with the brand and maintain consistency.Primary BlueR18, G195, B244Hex #12C3F4Secondary ColorSecondary colors are chosen to complement the primary color palette.These colors can be used as headlines and other dominant designelements.Secondary Dark BlueR0, G138, B169Hex #008aa9Secondary Dark GrayR134, G137, B141Hex #86898DNote: To make the color contrast complaint to the Accessibility Guidelines, check the background and foreground and maintain the contrast ratio. Use the online tool to check thehttp://www.dasplankton.de/ContrastA/.

Visual Style GuideTypographyUsers should be able to read what they see on the without putting effort into it. In order to achieve it weneed to keep the text, which we use to communicate, as readable as possible. Readability is defined asthe amount of effort a user puts into reading and understanding text.Designing for mobile includes the way we present the text on the screen with following aspects.SizeIts emphasizes the text and provides the importance which it needs alongwith the visual hierarchy.HeadingContent - Pellentesque quis hendrerit velit. Lorem ipsum dolor sit amet,consectetur adipiscing elit. Pellentesque quis hendrerit velit. Lorem ipsum.WhitespaceWe design and develop apps mainly for mobile devices, so we are dealingwith smaller screens. To keep providing clarity it is recommended to addspace to the text – between lines and in the margins. This is helping users tobetter interact with the words.ContrastIf text is an important part of the app, texts need to stand out. When definingthe contrast of the text and background, keep the high contrast of black andwhite in mind.Note: To make the color contrast complaint to the Accessibility Guidelines,check the background and foreground and maintain the contrast ratio. Usethe online tool to check the contrast sque quis hendrerit velit.Lorem ipsum dolor sit amet,consectetur adipiscin.Pellentesque quis hendreritvelit. Lorem ipsum dolor sitamet, consectetur adipiscin.Easier to readSpace around the text and inbetween lines makes it easier toread.Harder to read

Visual Style GuideIconographyIcons are a visual representation of an object, action, or idea. If that object, action, or idea is not immediately clear to users, it will make user confusing and frustrating and hinders people fromcompleting a task. Clever and careful use on icons in the App is the key to designing simple and intuitive User Interface screens.Epicor Mobile Framework uses FontAwesome icon font library (http://fontawesome.io/icons/ or http://fontawesome.io/cheatsheet/) instead of the other form of file type like JPEG, PNG and GIF toleverage advantage like light weight and scalable without distortion. Font EMF also has list of custom icon which are created and updated on need basis. When using icons choose the themwisely so its intuitive, meaningful and can be perceived easily by the users.FontAwesome Icon sample listEMF Custom Icon sample list

Visual Style GuideAnimationWhen used appropriately, animation can convey status, provide feedback, enhance the sense of directmanipulation, and help users visualize the results of their actions. Animations provide fluid visualtransitions between different states of your user interface. Use animations consistently throughout yourapp.Animation provides: Guided focus between views. Hints at what will happen if a user completes a gesture. Hierarchical and spatial relationships between elements. Distraction from what’s happening behind the scenes (like fetching content or loading the next view).The most commonly used transitions:SlideA slide transition eases a new screen element onto the display by pushing out the prior screen,implying the two screens are side by side.CoverA cover transition is modal and is used to present views such as action sheets and on-screenkeyboards, which enter and leave via the bottom of the screen. Cover transitions are also used tobring in transient modal elements such as sign-in pages and location-enabling permission requests.ZoomScreens are enlarged from the center of the display, irrespective of the location of the tap initiating thetransition.

EMFComponents

EMF ComponentsShellep.shellIntroep.shell is the outer most container which houses the required UI elements, controls and components. It is the core component necessary to get your app loadon the screen, but likely does not contain the visible content.ShellNavbarThe shell contains other supporting components ep.viewsThe shell comprises of the following section:NavbarContains navigation buttons and App Title or Brand element.Left NavRight NavLeft and Right NavContains navigation menu, feeds or listings.Content CanvasDisplays the main content or information.FooterContent CanvasStructure of shell containerFooterTo be used if any optional action buttons or additional info likecopyrights.UI sections like Navbar, Side navbar and Footer can be set toshow / hide to make visible on the screen.

EMF ComponentsShellep.shellLayout appearanceUI sections displayed in mobile and tablet screens. Left and Right Nav will be hidden in the device view, can be accessed either tapping on menu buttonsplaced on either side of the Navbar or by swipe gesture.NavbarLeft NavContent CanvasNavbarRight NavFooterMobile viewIn mobile view the navbar, content area footer are displayedwhen the app loads. Footer can be added for additionalfunctionality or actionable buttons. Side nav menus overlayall other structural elements.Left NavContent CanvasFooterTablet viewA right nav menu can be accessed temporarily or fixed forpermanent display.Right Nav

EMF l.view.container is a component used inside any views to control the behaviour, appearance and funtions of UI elements like Navbar, Left & Right Navand Footer. This component gives the provision of controlling the behaviour and appearance of UI element on different device screen size. It also allows toswitch buttons appearance and funtions in Navbar to navigate between different views or open sidebar nav.UsageUse it if Use this components to control UI elements in specific views and device screen sizes.Don’t it if If your App has standard UI structure across all views, this component becomes redunant to use.Behavior and Controlsep.shell.view.container component allows you the follow settingssidebarsettings - Settings for Left & Right sidebars - Provide template path.smallmodesettings - Settings for small screen view (smartphone) - Enable or disable variables.largemodesettings - Settings for large screen view (tablet) - Enable or disable variables.btn-home - Settings to button icon and action - Sets the icon for home buttton and specific action.PODChange of Navbar iconsbased on settings indifferent views.Change of Navbar Title in different viewsCustomer Info

EMF ComponentsShellep.shell.view.containerResponsive and AdaptivenessWith use of smallmodesettings and largemodesettings control settings behaviour of UI elements can be made responsive to small and large screen devices.Phone view (Sample screen)Side nav and footer hidden in small screenmode. ‘Value’ for both set to ‘false’.Tablet view (Sample screen)Side nav and footer visible in large screen mode. ‘Value’ forboth set to ‘true’. Side nav slides in and visible when tappedof the navbar icon.

EMF ComponentsContacts Listep.contacts.listIntroWhen presenting large number of data in a ListView which are alphabetical in order, similar to contact list in your phone. It will be time consuming to frustrating foruser to scroll down all the way to the end to find contact list from letter Z. To make things easier and helpful to the user adding have a alphabetical index scrollerto the right side of the screen, allow users to quickly jump to a specific letter without much effort. This component also features a quick search filter which enablesuser to get the most relevant to their query.UsageUse it if Use this components when you have list of data to view in alphabetical order. Use it when user wants to filter results based on their entry which is huge data list.Don’t use it if If your data list view is combination of alpha numberical entries or contains character symbols.Behavior and Interactionep.contacts.list component features and controls as below:quick search - Displays the most relevant to user query. If the search query is cleared, the list view gets to the top of the list.main list view - Allows vertical scroll with swipe gesture in single direction.alphabetical index - Alphabetical index with ‘#’ for nubmer and A to Z letters, on tap of a letter the list view positions to target listing the entries relevant to thatletter.

EMF ComponentsContacts Listep.contacts.listAppearanceInstant search filterSearch#12221335List TitleAAaricAaronList Alphabetical Index

EMF ComponentsContacts Listep.contacts.listExamplePhone viewTablet view

EMF ComponentsIcon Selectorep.icon.selectorIntroThis is a font awesome icon picker which lists all the font awesome icons and their names. This has a text field which displays the selected icon name and abutton which displays the icon list on click of it. There is also a search filter inside icon list dropdown which can be used to filter the list.UsageUse it if Use it when user needs icon as part of any task either to display or associate a meaning or to indicate an action.Behavior and InteractionClick on the button on right side of text field. The icon list with names opens up the icon selector drop down. Users can use search box in the drop down to filterthe list. The selected icon and name is displayed on the text field.Following are the attributes which can be passed to this component:ngModel - (Mandatory) This is the model object to store the selected icon name and it can be used for rest of the application processing.width - (Optional) This is the width of entire icon selector component. Example values 500px, 80% etc.Default is 100%.iconListWidth - (Optional) This is the width of icon selector drop down menu. Example values 200px, 300px etc.Default is 295px.iconListHeight - (Optional) This is the maximum height of icon selector list in the drop down menu. Example values 200px, 300px etc.Default is 400px.

EMF ComponentsIcon Selectorep.icon.selectorAppearanceIcon selectorIcon selector buttonType to filterSearch filter text align-rightIcon selectorfa-align-rightfa-angle-downIcon list with w-downfa-arrow-leftfa-arrow-rightfa-arrow-upOn select Icon name is displayedOn select Icon is displayed

EMF ComponentsIcon Selectorep.icon.selectorExamplePhone viewTablet view

EMF Comp