@rio-cloud/uikit-mcp 1.0.0 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +75 -40
- package/dist/doc-metadata.json +1872 -0
- package/dist/docs/components/accentBar.md +582 -0
- package/dist/docs/components/activity.md +330 -0
- package/dist/docs/components/animatedNumber.md +88 -0
- package/dist/docs/components/animatedTextReveal.md +381 -0
- package/dist/docs/components/animations.md +459 -0
- package/dist/docs/components/appHeader.md +737 -0
- package/dist/docs/components/appLayout.md +2016 -0
- package/dist/docs/components/appNavigationBar.md +274 -0
- package/dist/docs/components/areaCharts.md +828 -0
- package/dist/docs/components/aspectRatioPlaceholder.md +106 -0
- package/dist/docs/components/assetTree.md +3223 -0
- package/dist/docs/components/autosuggests.md +1177 -0
- package/dist/docs/components/avatar.md +206 -0
- package/dist/docs/components/banner.md +668 -0
- package/dist/docs/components/barCharts.md +2785 -0
- package/dist/docs/components/barList.md +517 -0
- package/dist/docs/components/basicMap.md +167 -0
- package/dist/docs/components/bottomSheet.md +721 -0
- package/dist/docs/components/button.md +775 -0
- package/dist/docs/components/buttonToolbar.md +134 -0
- package/dist/docs/components/calendarStripe.md +525 -0
- package/dist/docs/components/card.md +86 -0
- package/dist/docs/components/carousel.md +128 -0
- package/dist/docs/components/chartColors.md +716 -0
- package/dist/docs/components/chartsGettingStarted.md +28 -0
- package/dist/docs/components/chat.md +932 -0
- package/dist/docs/components/checkbox.md +996 -0
- package/dist/docs/components/clearableInput.md +806 -0
- package/dist/docs/components/collapse.md +189 -0
- package/dist/docs/components/composedCharts.md +424 -0
- package/dist/docs/components/contentLoader.md +674 -0
- package/dist/docs/components/dataTabs.md +1251 -0
- package/dist/docs/components/datepickers.md +2543 -0
- package/dist/docs/components/dialogs.md +2244 -0
- package/dist/docs/components/divider.md +219 -0
- package/dist/docs/components/dropdowns.md +17550 -0
- package/dist/docs/components/editableContent.md +1127 -0
- package/dist/docs/components/expander.md +970 -0
- package/dist/docs/components/fade.md +836 -0
- package/dist/docs/components/fadeExpander.md +180 -0
- package/dist/docs/components/fadeUp.md +396 -0
- package/dist/docs/components/feedback.md +758 -0
- package/dist/docs/components/filePickers.md +370 -0
- package/dist/docs/components/formLabel.md +251 -0
- package/dist/docs/components/fullscreenMap.md +10 -0
- package/dist/docs/components/groupedItemList.md +1001 -0
- package/dist/docs/components/iconList.md +306 -0
- package/dist/docs/components/imagePreloader.md +167 -0
- package/dist/docs/components/labeledElement.md +115 -0
- package/dist/docs/components/licensePlate.md +412 -0
- package/dist/docs/components/lineCharts.md +2014 -0
- package/dist/docs/components/listMenu.md +392 -0
- package/dist/docs/components/loadMore.md +219 -0
- package/dist/docs/components/mainNavigation.md +129 -0
- package/dist/docs/components/mapCircle.md +93 -0
- package/dist/docs/components/mapCluster.md +337 -0
- package/dist/docs/components/mapContext.md +284 -0
- package/dist/docs/components/mapDraggableMarker.md +150 -0
- package/dist/docs/components/mapGettingStarted.md +39 -0
- package/dist/docs/components/mapInfoBubble.md +135 -0
- package/dist/docs/components/mapLayerGroup.md +94 -0
- package/dist/docs/components/mapMarker.md +1814 -0
- package/dist/docs/components/mapPolygon.md +959 -0
- package/dist/docs/components/mapRoute.md +3816 -0
- package/dist/docs/components/mapRouteGenerator.md +6 -0
- package/dist/docs/components/mapSettings.md +1040 -0
- package/dist/docs/components/mapUtils.md +132 -0
- package/dist/docs/components/multiselects.md +1921 -0
- package/dist/docs/components/noData.md +210 -0
- package/dist/docs/components/notifications.md +314 -0
- package/dist/docs/components/numbercontrol.md +706 -0
- package/dist/docs/components/onboarding.md +297 -0
- package/dist/docs/components/page.md +241 -0
- package/dist/docs/components/pager.md +133 -0
- package/dist/docs/components/pieCharts.md +1284 -0
- package/dist/docs/components/popover.md +222 -0
- package/dist/docs/components/position.md +50 -0
- package/dist/docs/components/radialBarCharts.md +3663 -0
- package/dist/docs/components/radiobutton.md +1271 -0
- package/dist/docs/components/releaseNotes.md +135 -0
- package/dist/docs/components/resizer.md +162 -0
- package/dist/docs/components/responsiveColumnStripe.md +435 -0
- package/dist/docs/components/responsiveVideo.md +71 -0
- package/dist/docs/components/rioglyph.md +331 -0
- package/dist/docs/components/rules.md +965 -0
- package/dist/docs/components/saveableInput.md +1721 -0
- package/dist/docs/components/selects.md +1993 -0
- package/dist/docs/components/sidebar.md +332 -0
- package/dist/docs/components/sliders.md +376 -0
- package/dist/docs/components/smoothScrollbars.md +1180 -0
- package/dist/docs/components/spinners.md +506 -0
- package/dist/docs/components/states.md +1176 -0
- package/dist/docs/components/statsWidgets.md +636 -0
- package/dist/docs/components/statusBar.md +644 -0
- package/dist/docs/components/stepButton.md +61 -0
- package/dist/docs/components/steppedProgressBars.md +1064 -0
- package/dist/docs/components/subNavigation.md +470 -0
- package/dist/docs/components/supportMarker.md +115 -0
- package/dist/docs/components/svgImage.md +248 -0
- package/dist/docs/components/switch.md +554 -0
- package/dist/docs/components/tables.md +8 -0
- package/dist/docs/components/tagManager.md +476 -0
- package/dist/docs/components/tags.md +785 -0
- package/dist/docs/components/teaser.md +925 -0
- package/dist/docs/components/timeline.md +514 -0
- package/dist/docs/components/timepicker.md +262 -0
- package/dist/docs/components/toggleButton.md +178 -0
- package/dist/docs/components/tooltip.md +454 -0
- package/dist/docs/components/virtualList.md +483 -0
- package/dist/docs/foundations.md +20901 -0
- package/dist/docs/start/changelog.md +439 -0
- package/dist/docs/start/goodtoknow.md +14 -0
- package/dist/docs/start/guidelines/color-combinations.md +678 -0
- package/dist/docs/start/guidelines/custom-css.md +42 -0
- package/dist/docs/start/guidelines/custom-rioglyph.md +35 -0
- package/dist/docs/start/guidelines/formatting.md +587 -0
- package/dist/docs/start/guidelines/iframe.md +323 -0
- package/dist/docs/start/guidelines/obfuscate-data.md +30 -0
- package/dist/docs/start/guidelines/print-css.md +36 -0
- package/dist/docs/start/guidelines/spinner.md +710 -0
- package/dist/docs/start/guidelines/supported-browsers.md +10 -0
- package/dist/docs/start/guidelines/writing.md +635 -0
- package/dist/docs/start/howto.md +187 -0
- package/dist/docs/start/intro.md +43 -0
- package/dist/docs/start/responsiveness.md +98 -0
- package/dist/docs/templates/common-table.md +1111 -0
- package/dist/docs/templates/detail-views.md +942 -0
- package/dist/docs/templates/expandable-details.md +228 -0
- package/dist/docs/templates/feature-cards.md +549 -0
- package/dist/docs/templates/form-summary.md +199 -0
- package/dist/docs/templates/form-toggle.md +367 -0
- package/dist/docs/templates/list-blocks.md +1021 -0
- package/dist/docs/templates/loading-progress.md +109 -0
- package/dist/docs/templates/options-panel.md +152 -0
- package/dist/docs/templates/panel-variants.md +164 -0
- package/dist/docs/templates/progress-cards.md +607 -0
- package/dist/docs/templates/progress-success.md +142 -0
- package/dist/docs/templates/settings-form.md +434 -0
- package/dist/docs/templates/stats-blocks.md +1381 -0
- package/dist/docs/templates/table-panel.md +184 -0
- package/dist/docs/templates/table-row-animation.md +317 -0
- package/dist/docs/templates/usage-cards.md +227 -0
- package/dist/docs/utilities/deviceUtils.md +123 -0
- package/dist/docs/utilities/featureToggles.md +90 -0
- package/dist/docs/utilities/fuelTypeUtils.md +186 -0
- package/dist/docs/utilities/routeUtils.md +138 -0
- package/dist/docs/utilities/useAfterMount.md +66 -0
- package/dist/docs/utilities/useAutoAnimate.md +193 -0
- package/dist/docs/utilities/useAverage.md +95 -0
- package/dist/docs/utilities/useClickOutside.md +61 -0
- package/dist/docs/utilities/useClipboard.md +93 -0
- package/dist/docs/utilities/useCount.md +178 -0
- package/dist/docs/utilities/useDarkMode.md +49 -0
- package/dist/docs/utilities/useDebugInfo.md +126 -0
- package/dist/docs/utilities/useEffectOnce.md +58 -0
- package/dist/docs/utilities/useElapsedTime.md +58 -0
- package/dist/docs/utilities/useElementSize.md +71 -0
- package/dist/docs/utilities/useEsc.md +58 -0
- package/dist/docs/utilities/useEvent.md +64 -0
- package/dist/docs/utilities/useFocusTrap.md +85 -0
- package/dist/docs/utilities/useFullscreen.md +198 -0
- package/dist/docs/utilities/useHover.md +55 -0
- package/dist/docs/utilities/useIncomingPostMessages.md +237 -0
- package/dist/docs/utilities/useInterval.md +85 -0
- package/dist/docs/utilities/useIsFocusWithin.md +114 -0
- package/dist/docs/utilities/useKey.md +151 -0
- package/dist/docs/utilities/useLocalStorage.md +91 -0
- package/dist/docs/utilities/useLocationSuggestions.md +114 -0
- package/dist/docs/utilities/useMax.md +62 -0
- package/dist/docs/utilities/useMin.md +78 -0
- package/dist/docs/utilities/useMutationObserver.md +113 -0
- package/dist/docs/utilities/useOnScreen.md +138 -0
- package/dist/docs/utilities/useOnlineStatus.md +49 -0
- package/dist/docs/utilities/usePostMessage.md +117 -0
- package/dist/docs/utilities/usePostMessageSender.md +257 -0
- package/dist/docs/utilities/usePrevious.md +101 -0
- package/dist/docs/utilities/useResizeObserver.md +151 -0
- package/dist/docs/utilities/useScrollPosition.md +252 -0
- package/dist/docs/utilities/useSearch.md +228 -0
- package/dist/docs/utilities/useSorting.md +389 -0
- package/dist/docs/utilities/useStateWithValidation.md +83 -0
- package/dist/docs/utilities/useSum.md +155 -0
- package/dist/docs/utilities/useTableExport.md +404 -0
- package/dist/docs/utilities/useTableSelection.md +1120 -0
- package/dist/docs/utilities/useTimeout.md +55 -0
- package/dist/docs/utilities/useToggle.md +115 -0
- package/dist/docs/utilities/useWindowResize.md +70 -0
- package/dist/index.mjs +271 -0
- package/dist/search-synonyms.json +134 -0
- package/dist/version.json +4 -0
- package/package.json +23 -19
- package/bin/uikit-mcp.mjs +0 -23
- package/data/pages/Components/components/accentbar.json +0 -207
- package/data/pages/Components/components/activity.json +0 -87
- package/data/pages/Components/components/animatednumber.json +0 -99
- package/data/pages/Components/components/animations.json +0 -87
- package/data/pages/Components/components/appheader.json +0 -291
- package/data/pages/Components/components/applayout.json +0 -1198
- package/data/pages/Components/components/appnavigationbar.json +0 -327
- package/data/pages/Components/components/areacharts.json +0 -563
- package/data/pages/Components/components/aspectratioplaceholder.json +0 -75
- package/data/pages/Components/components/assettree.json +0 -3080
- package/data/pages/Components/components/autosuggests.json +0 -710
- package/data/pages/Components/components/avatar.json +0 -157
- package/data/pages/Components/components/banner.json +0 -599
- package/data/pages/Components/components/barcharts.json +0 -1507
- package/data/pages/Components/components/barlist.json +0 -223
- package/data/pages/Components/components/basicmap.json +0 -68
- package/data/pages/Components/components/bottomsheet.json +0 -601
- package/data/pages/Components/components/button.json +0 -583
- package/data/pages/Components/components/buttontoolbar.json +0 -63
- package/data/pages/Components/components/calendarstripe.json +0 -235
- package/data/pages/Components/components/card.json +0 -69
- package/data/pages/Components/components/carousel.json +0 -39
- package/data/pages/Components/components/chartcolors.json +0 -34
- package/data/pages/Components/components/chartsgettingstarted.json +0 -32
- package/data/pages/Components/components/chat.json +0 -39
- package/data/pages/Components/components/checkbox.json +0 -847
- package/data/pages/Components/components/clearableinput.json +0 -789
- package/data/pages/Components/components/collapse.json +0 -175
- package/data/pages/Components/components/composedcharts.json +0 -159
- package/data/pages/Components/components/contentloader.json +0 -233
- package/data/pages/Components/components/datatabs.json +0 -680
- package/data/pages/Components/components/datepickers.json +0 -287
- package/data/pages/Components/components/dialogs.json +0 -1492
- package/data/pages/Components/components/divider.json +0 -93
- package/data/pages/Components/components/dropdowns.json +0 -936
- package/data/pages/Components/components/editablecontent.json +0 -1117
- package/data/pages/Components/components/expander.json +0 -377
- package/data/pages/Components/components/fade.json +0 -403
- package/data/pages/Components/components/fadeexpander.json +0 -75
- package/data/pages/Components/components/fadeup.json +0 -127
- package/data/pages/Components/components/feedback.json +0 -269
- package/data/pages/Components/components/filepickers.json +0 -269
- package/data/pages/Components/components/formlabel.json +0 -115
- package/data/pages/Components/components/fullscreenmap.json +0 -22
- package/data/pages/Components/components/groupeditemlist.json +0 -323
- package/data/pages/Components/components/iconlist.json +0 -45
- package/data/pages/Components/components/imagepreloader.json +0 -81
- package/data/pages/Components/components/labeledelement.json +0 -75
- package/data/pages/Components/components/licenseplate.json +0 -69
- package/data/pages/Components/components/linecharts.json +0 -987
- package/data/pages/Components/components/listmenu.json +0 -313
- package/data/pages/Components/components/loadmore.json +0 -175
- package/data/pages/Components/components/mainnavigation.json +0 -39
- package/data/pages/Components/components/mapcircle.json +0 -34
- package/data/pages/Components/components/mapcluster.json +0 -51
- package/data/pages/Components/components/mapcontext.json +0 -105
- package/data/pages/Components/components/mapdraggablemarker.json +0 -34
- package/data/pages/Components/components/mapgettingstarted.json +0 -27
- package/data/pages/Components/components/mapgroup.json +0 -1198
- package/data/pages/Components/components/mapinfobubble.json +0 -34
- package/data/pages/Components/components/maplayergroup.json +0 -34
- package/data/pages/Components/components/mapmarker.json +0 -700
- package/data/pages/Components/components/mappolygon.json +0 -45
- package/data/pages/Components/components/maproute.json +0 -623
- package/data/pages/Components/components/maproutegenerator.json +0 -16
- package/data/pages/Components/components/mapsettings.json +0 -51
- package/data/pages/Components/components/maputils.json +0 -34
- package/data/pages/Components/components/multiselects.json +0 -1451
- package/data/pages/Components/components/nodata.json +0 -139
- package/data/pages/Components/components/notifications.json +0 -65
- package/data/pages/Components/components/numbercontrol.json +0 -301
- package/data/pages/Components/components/onboarding.json +0 -302
- package/data/pages/Components/components/page.json +0 -197
- package/data/pages/Components/components/pager.json +0 -93
- package/data/pages/Components/components/piecharts.json +0 -731
- package/data/pages/Components/components/popover.json +0 -251
- package/data/pages/Components/components/position.json +0 -69
- package/data/pages/Components/components/radialbarcharts.json +0 -1304
- package/data/pages/Components/components/radiobutton.json +0 -1105
- package/data/pages/Components/components/releasenotes.json +0 -44
- package/data/pages/Components/components/resizer.json +0 -93
- package/data/pages/Components/components/responsivecolumnstripe.json +0 -123
- package/data/pages/Components/components/responsivevideo.json +0 -75
- package/data/pages/Components/components/rioglyph.json +0 -93
- package/data/pages/Components/components/rules.json +0 -410
- package/data/pages/Components/components/saveableinput.json +0 -703
- package/data/pages/Components/components/selects.json +0 -701
- package/data/pages/Components/components/sidebar.json +0 -243
- package/data/pages/Components/components/sliders.json +0 -235
- package/data/pages/Components/components/smoothscrollbars.json +0 -335
- package/data/pages/Components/components/spinners.json +0 -343
- package/data/pages/Components/components/states.json +0 -1705
- package/data/pages/Components/components/statswidgets.json +0 -314
- package/data/pages/Components/components/statusbar.json +0 -177
- package/data/pages/Components/components/stepbutton.json +0 -57
- package/data/pages/Components/components/steppedprogressbars.json +0 -417
- package/data/pages/Components/components/subnavigation.json +0 -107
- package/data/pages/Components/components/supportmarker.json +0 -45
- package/data/pages/Components/components/svgimage.json +0 -81
- package/data/pages/Components/components/switch.json +0 -111
- package/data/pages/Components/components/tables.json +0 -144
- package/data/pages/Components/components/tagmanager.json +0 -86
- package/data/pages/Components/components/tags.json +0 -146
- package/data/pages/Components/components/teaser.json +0 -188
- package/data/pages/Components/components/timeline.json +0 -45
- package/data/pages/Components/components/timepicker.json +0 -163
- package/data/pages/Components/components/togglebutton.json +0 -247
- package/data/pages/Components/components/tooltip.json +0 -270
- package/data/pages/Components/components/virtuallist.json +0 -175
- package/data/pages/Foundations/foundations.json +0 -2475
- package/data/pages/Getting-started/start/changelog.json +0 -22
- package/data/pages/Getting-started/start/goodtoknow.json +0 -32
- package/data/pages/Getting-started/start/guidelines/color-combinations.json +0 -58
- package/data/pages/Getting-started/start/guidelines/custom-css.json +0 -27
- package/data/pages/Getting-started/start/guidelines/custom-rioglyph.json +0 -22
- package/data/pages/Getting-started/start/guidelines/formatting.json +0 -97
- package/data/pages/Getting-started/start/guidelines/iframe.json +0 -93
- package/data/pages/Getting-started/start/guidelines/obfuscate-data.json +0 -22
- package/data/pages/Getting-started/start/guidelines/print-css.json +0 -37
- package/data/pages/Getting-started/start/guidelines/spinner.json +0 -144
- package/data/pages/Getting-started/start/guidelines/supported-browsers.json +0 -22
- package/data/pages/Getting-started/start/guidelines/writing.json +0 -242
- package/data/pages/Getting-started/start/howto.json +0 -72
- package/data/pages/Getting-started/start/intro.json +0 -37
- package/data/pages/Getting-started/start/responsiveness.json +0 -52
- package/data/pages/Templates/templates/common-table.json +0 -39
- package/data/pages/Templates/templates/detail-views.json +0 -71
- package/data/pages/Templates/templates/expandable-details.json +0 -39
- package/data/pages/Templates/templates/feature-cards.json +0 -103
- package/data/pages/Templates/templates/form-summary.json +0 -39
- package/data/pages/Templates/templates/form-toggle.json +0 -39
- package/data/pages/Templates/templates/list-blocks.json +0 -119
- package/data/pages/Templates/templates/loading-progress.json +0 -39
- package/data/pages/Templates/templates/options-panel.json +0 -39
- package/data/pages/Templates/templates/panel-variants.json +0 -39
- package/data/pages/Templates/templates/progress-cards.json +0 -71
- package/data/pages/Templates/templates/progress-success.json +0 -39
- package/data/pages/Templates/templates/settings-form.json +0 -39
- package/data/pages/Templates/templates/stats-blocks.json +0 -135
- package/data/pages/Templates/templates/table-panel.json +0 -39
- package/data/pages/Templates/templates/table-row-animation.json +0 -39
- package/data/pages/Templates/templates/usage-cards.json +0 -39
- package/data/pages/Utilities/utilities/deviceutils.json +0 -39
- package/data/pages/Utilities/utilities/featuretoggles.json +0 -42
- package/data/pages/Utilities/utilities/fueltypeutils.json +0 -118
- package/data/pages/Utilities/utilities/routeutils.json +0 -34
- package/data/pages/Utilities/utilities/useaftermount.json +0 -63
- package/data/pages/Utilities/utilities/useaverage.json +0 -86
- package/data/pages/Utilities/utilities/useclickoutside.json +0 -69
- package/data/pages/Utilities/utilities/useclipboard.json +0 -57
- package/data/pages/Utilities/utilities/usecount.json +0 -92
- package/data/pages/Utilities/utilities/usedarkmode.json +0 -50
- package/data/pages/Utilities/utilities/usedebuginfo.json +0 -63
- package/data/pages/Utilities/utilities/useeffectonce.json +0 -57
- package/data/pages/Utilities/utilities/useelapsedtime.json +0 -57
- package/data/pages/Utilities/utilities/useelementsize.json +0 -63
- package/data/pages/Utilities/utilities/useesc.json +0 -57
- package/data/pages/Utilities/utilities/useevent.json +0 -75
- package/data/pages/Utilities/utilities/usefocustrap.json +0 -57
- package/data/pages/Utilities/utilities/usefullscreen.json +0 -197
- package/data/pages/Utilities/utilities/usehover.json +0 -57
- package/data/pages/Utilities/utilities/useinterval.json +0 -63
- package/data/pages/Utilities/utilities/useisfocuswithin.json +0 -75
- package/data/pages/Utilities/utilities/usekey.json +0 -75
- package/data/pages/Utilities/utilities/uselocalstorage.json +0 -69
- package/data/pages/Utilities/utilities/uselocationsuggestions.json +0 -110
- package/data/pages/Utilities/utilities/usemax.json +0 -86
- package/data/pages/Utilities/utilities/usemin.json +0 -86
- package/data/pages/Utilities/utilities/usemutationobserver.json +0 -69
- package/data/pages/Utilities/utilities/useonlinestatus.json +0 -39
- package/data/pages/Utilities/utilities/useonscreen.json +0 -63
- package/data/pages/Utilities/utilities/usepostmessage.json +0 -80
- package/data/pages/Utilities/utilities/useprevious.json +0 -63
- package/data/pages/Utilities/utilities/useresizeobserver.json +0 -65
- package/data/pages/Utilities/utilities/usescrollposition.json +0 -103
- package/data/pages/Utilities/utilities/usesearch.json +0 -197
- package/data/pages/Utilities/utilities/usesorting.json +0 -139
- package/data/pages/Utilities/utilities/usestatewithvalidation.json +0 -69
- package/data/pages/Utilities/utilities/usesum.json +0 -86
- package/data/pages/Utilities/utilities/usetableexport.json +0 -87
- package/data/pages/Utilities/utilities/usetableselection.json +0 -311
- package/data/pages/Utilities/utilities/usetimeout.json +0 -63
- package/data/pages/Utilities/utilities/usetoggle.json +0 -75
- package/data/pages/Utilities/utilities/usewindowresize.json +0 -63
- package/data/version.json +0 -4
- package/docs/content-schema.md +0 -147
- package/docs/navigation-inventory.json +0 -1310
- package/docs/search-synonyms.json +0 -43
- package/server/index.mjs +0 -268
- package/server/lib/load-docs.mjs +0 -48
- package/server/lib/normalise-doc.mjs +0 -220
- package/server/lib/render-markdown.mjs +0 -82
- package/server/lib/search-index.mjs +0 -49
- package/server/lib/types.js +0 -99
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
# Supported Browsers
|
|
2
|
+
|
|
3
|
+
*Category:* Getting started
|
|
4
|
+
*Section:* Guidelines
|
|
5
|
+
*Source:* https://uikit.developers.rio.cloud/#start/guidelines/supported-browsers
|
|
6
|
+
*Captured:* 2025-12-12T12:38:02.790Z
|
|
7
|
+
|
|
8
|
+
We currently support the following browsers:
|
|
9
|
+
|
|
10
|
+
## Supported Browsers
|
|
@@ -0,0 +1,635 @@
|
|
|
1
|
+
# Writing style guide
|
|
2
|
+
|
|
3
|
+
*Category:* Getting started
|
|
4
|
+
*Section:* Guidelines
|
|
5
|
+
*Source:* https://uikit.developers.rio.cloud/#start/guidelines/writing
|
|
6
|
+
*Captured:* 2025-12-12T12:38:03.632Z
|
|
7
|
+
|
|
8
|
+
UX writing doesn't receive as much attention as it should. In the past, digital experiences featured words written by different individuals - ranging from designers to engineers — at various times and in diverse styles, all without a centralized guide.
|
|
9
|
+
|
|
10
|
+
## Writing style guide
|
|
11
|
+
|
|
12
|
+
Consequently, the language sometimes proves to be confusing, lacking consistency from one screen to another, and occasionally feels robotic or overly enthusiastic when a more conversational tone is needed.
|
|
13
|
+
|
|
14
|
+
A good understanding of UX writing plays a pivotal role in creating better digital experiences. If the language within your product is intricate, uninspiring, or unfriendly, it’s likely that users will perceive your product in the same way — complex, uninspiring, and unfriendly.
|
|
15
|
+
|
|
16
|
+
- Microsoft Writing Style Guide
|
|
17
|
+
- Intuit content design
|
|
18
|
+
- Google’s content design
|
|
19
|
+
- Adobe Spectrum
|
|
20
|
+
|
|
21
|
+
## Here's what you will find in the RIO’s writing style guide
|
|
22
|
+
|
|
23
|
+
- Voice and tone
|
|
24
|
+
- Write like you speak Project friendliness with contractions Get to the point fast Be brief Addressing the user clearly Active and passive voice Focus your message
|
|
25
|
+
- Capitalization
|
|
26
|
+
- Title case vs. sentence case Sentence case rules When in doubt, don’t capitalize Use ALL CAPS only when you should
|
|
27
|
+
- Punctuation
|
|
28
|
+
- Skip periods and unnecessary punctuation Skip colons in headings Use exclamation points sparingly Remember the last comma
|
|
29
|
+
- UI elements
|
|
30
|
+
- Buttons Links Forms Input placeholder Form labels and placeholders Dialogs Error states Notifications
|
|
31
|
+
- Error messages
|
|
32
|
+
- Errors in general Avoid showing a message whenever possible Have the system automatically resolve errors Use plain language, and avoid jargon
|
|
33
|
+
- Commonly misspelled or misformatted words
|
|
34
|
+
|
|
35
|
+
- Write like you speak
|
|
36
|
+
- Project friendliness with contractions
|
|
37
|
+
- Get to the point fast
|
|
38
|
+
- Be brief
|
|
39
|
+
- Addressing the user clearly
|
|
40
|
+
- Active and passive voice
|
|
41
|
+
- Focus your message
|
|
42
|
+
|
|
43
|
+
- Title case vs. sentence case
|
|
44
|
+
- Sentence case rules
|
|
45
|
+
- When in doubt, don’t capitalize
|
|
46
|
+
- Use ALL CAPS only when you should
|
|
47
|
+
|
|
48
|
+
- Skip periods and unnecessary punctuation
|
|
49
|
+
- Skip colons in headings
|
|
50
|
+
- Use exclamation points sparingly
|
|
51
|
+
- Remember the last comma
|
|
52
|
+
|
|
53
|
+
- Buttons
|
|
54
|
+
- Links
|
|
55
|
+
- Forms
|
|
56
|
+
- Input placeholder
|
|
57
|
+
- Form labels and placeholders
|
|
58
|
+
- Dialogs
|
|
59
|
+
- Error states
|
|
60
|
+
- Notifications
|
|
61
|
+
|
|
62
|
+
- Errors in general
|
|
63
|
+
- Avoid showing a message whenever possible
|
|
64
|
+
- Have the system automatically resolve errors
|
|
65
|
+
- Use plain language, and avoid jargon
|
|
66
|
+
|
|
67
|
+
## Voice and tone
|
|
68
|
+
|
|
69
|
+
- Clear and understandable
|
|
70
|
+
- Friendly, honest, and responsible
|
|
71
|
+
- Concise and simple
|
|
72
|
+
|
|
73
|
+
## Write like you speak
|
|
74
|
+
|
|
75
|
+
Read your text aloud. Does it sound like something a real person would say? Be friendly and conversational. No. Robot. Words.
|
|
76
|
+
|
|
77
|
+
> You need an ID that looks like this: "someone@example.com"
|
|
78
|
+
|
|
79
|
+
> Invalid ID
|
|
80
|
+
|
|
81
|
+
> Turn on location service
|
|
82
|
+
|
|
83
|
+
> Enable location service
|
|
84
|
+
|
|
85
|
+
> Preparing video…
|
|
86
|
+
|
|
87
|
+
> Buffering…
|
|
88
|
+
|
|
89
|
+
> This command isn't supported on your phone
|
|
90
|
+
|
|
91
|
+
> This command is only supported on dual-core devices
|
|
92
|
+
|
|
93
|
+
## Project friendliness with contractions
|
|
94
|
+
|
|
95
|
+
Use contractions: it’s, you’ll, you’re, we’re, let’s To sound more conversational and natural. Use commonly understood contractions to keep sentences from feeling out-of-touch, robotic, or overly formal.
|
|
96
|
+
|
|
97
|
+
However, sometimes "do not" can give more emphasis than "don't” when caution is needed.
|
|
98
|
+
|
|
99
|
+
- Avoid contracting nouns with is, does, has, or was. This might make it look like the noun is possessive.
|
|
100
|
+
- Be mindful of how many contractions you use in a sentence. Too many contractions can make things difficult to read.
|
|
101
|
+
- Avoid using contractions when dealing with legal concerns, payment processing, and account security. Casual isn’t always the best style when handling sensitive information.
|
|
102
|
+
|
|
103
|
+
> To help you avoid traffic, remember anniversaries, and in general do more, RIO needs to know what you’re interested in, what’s on your calendar, and who you’re doing things with. The business is closed
|
|
104
|
+
|
|
105
|
+
> To help you avoid traffic, remember anniversaries, and in general do more, RIO needs to know what you are interested in, what is on your calendar, and who you are doing things with. The business's closed
|
|
106
|
+
|
|
107
|
+
## Get to the point fast
|
|
108
|
+
|
|
109
|
+
Lead with what’s most important. Front-load keywords for scanning. Make customer choices and next steps obvious.
|
|
110
|
+
|
|
111
|
+
> Save time by creating a document template that includes the styles, formats, and page layouts you use most often. Then use the template whenever you create a new document.
|
|
112
|
+
|
|
113
|
+
> Templates provide a starting point for creating new documents. A template can include the styles, formats, and page layouts you use frequently. Consider creating a template if you often use the same page layout and style for documents.
|
|
114
|
+
|
|
115
|
+
## Be brief
|
|
116
|
+
|
|
117
|
+
Give customers just enough information to make decisions confidently. Prune every excess word.
|
|
118
|
+
|
|
119
|
+
> Create a chart that's just right for your data by using the Recommended Charts command on the Insert tab.
|
|
120
|
+
|
|
121
|
+
> The Recommended Charts command on the Insert tab recommends charts that are likely to represent your data well. Use the command when you want to visually present data, and you're not sure how to do it.
|
|
122
|
+
|
|
123
|
+
> Read the instructions that came with your device.
|
|
124
|
+
|
|
125
|
+
> Consult the documentation that came with your device for further instructions.
|
|
126
|
+
|
|
127
|
+
## Addressing users clearly
|
|
128
|
+
|
|
129
|
+
When addressing the user directly, it's important to use the second person pronouns 'you' or 'your'' rather than 'my' or 'I.' This choice of words, utilizing 'you,' creates trust and mutual understanding, whereas 'my' can potentially cause confusion among our users. I is also helping the user to feel like the UI is talking to them and referring to their actions.
|
|
130
|
+
|
|
131
|
+
Don’t combine first and second person. Avoid mixing 'me' or 'my' with 'you' or 'your.'
|
|
132
|
+
|
|
133
|
+
An exception to this rule are found in agreements or acknowledgments. For example, “I agree to the terms of service.”
|
|
134
|
+
|
|
135
|
+
> Profile and settings Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam velit commodi sunt nostrum nisi? Voluptas eos dolorum error amet esse. Fugit consequatur obcaecati deleniti! Corrupti praesentium molestiae voluptate a rem.
|
|
136
|
+
|
|
137
|
+
> My profile & settings Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam velit commodi sunt nostrum nisi? Voluptas eos dolorum error amet esse. Fugit consequatur obcaecati deleniti! Corrupti praesentium molestiae voluptate a rem.
|
|
138
|
+
|
|
139
|
+
> You seem to be offline Your data isn't available. Try checking your internet connection.
|
|
140
|
+
|
|
141
|
+
> Offline Data not available
|
|
142
|
+
|
|
143
|
+
## Active and passive voice
|
|
144
|
+
|
|
145
|
+
Use active voice in most cases and use passive voice sparingly.
|
|
146
|
+
|
|
147
|
+
- With active voice, sentences are simpler, shorter, clearer, and more conversational.
|
|
148
|
+
- With passive voice, you can soften and provide distance in select situations (e.g., notification of a disabled account).
|
|
149
|
+
|
|
150
|
+
Active voice means the subject of the sentence performs the action. With passive voice, the subject receives the action. For avoiding passive voice it often helps to rephrase a message and center it around the object or the actions that someone could undertake.
|
|
151
|
+
|
|
152
|
+
Using present tense and an active voice shortens and simplifies our sentences. Past and future tenses, along with passive voice, make our users read more words to convey the same message. Additionally, the active voice ensures we take responsibility for our actions.
|
|
153
|
+
|
|
154
|
+
One exception is when you want to specifically emphasize the action over the subject. In some cases, this is fine: Your account was flagged by our Abuse team.
|
|
155
|
+
|
|
156
|
+
> John Doe resolved your comment Your payment has been declined Something went wrong
|
|
157
|
+
|
|
158
|
+
> Your comment was resolved by John Doe We declined your payment An error happened
|
|
159
|
+
|
|
160
|
+
> Quickly categorize your transactions The team conducted usability tests with customers We couldn’t save your changes. Try again in a moment. Changes saved 34 invoices sent
|
|
161
|
+
|
|
162
|
+
> Your transactions can quickly be categorized Usability tests were conducted with customers Your changes weren’t saved The system saved your changes You sent 34 invoices
|
|
163
|
+
|
|
164
|
+
> Message sent
|
|
165
|
+
|
|
166
|
+
> Message has been sent
|
|
167
|
+
|
|
168
|
+
## Focus your message
|
|
169
|
+
|
|
170
|
+
Create a hierarchy of information. Lead with the main point or the most important content, in sentences, paragraphs, sections, and pages.
|
|
171
|
+
|
|
172
|
+
> To remove a photo from this album, drag it to the trash.
|
|
173
|
+
|
|
174
|
+
> Drag a photo to the trash to remove it from this album.
|
|
175
|
+
|
|
176
|
+
## Capitalization
|
|
177
|
+
|
|
178
|
+
## Title case vs. sentence case
|
|
179
|
+
|
|
180
|
+
In most products and websites today, there are two ways to capitalize words:
|
|
181
|
+
|
|
182
|
+
- Title case: Capitalize every word. This Is Title Case.
|
|
183
|
+
- Sentence case: Capitalize the first word. This is sentence case.
|
|
184
|
+
|
|
185
|
+
Even though title case looks more formal, serious and provides symmetry especially on buttons or short headlines, it is also harder to implement. Many rules and exceptions behind it are sometimes not easy to understand or to grasp.
|
|
186
|
+
|
|
187
|
+
Sentence case on the other hand is much easier to read especially when the text gets long. It is also easier to define and easier to explain to designers and engineers. No rules for what to capitalize and what no. Sentence case also looks more friendly and casual. It feels more natural and approachable.
|
|
188
|
+
|
|
189
|
+
## Sentence case rules
|
|
190
|
+
|
|
191
|
+
Use sentence case, even in headings and titles, labels and buttons.
|
|
192
|
+
|
|
193
|
+
Sentence case is friendly. It helps support the approachable RIO style and brand personality. It also makes translation a bit easier.
|
|
194
|
+
|
|
195
|
+
Sentence case tends to be easier to read and comprehend, especially when CTA labels are more than three words. Also, breadcrumb labels in sentence case are easier to scan.
|
|
196
|
+
|
|
197
|
+
Sentence case improves consistency. In an environment of many independent teams, it’s a lot easier to implement the sentence case.
|
|
198
|
+
|
|
199
|
+
Proper nouns, Products, and branded terms may also be capitalized.
|
|
200
|
+
|
|
201
|
+
> Create new partner Company name of the partner Cancel Add partner
|
|
202
|
+
|
|
203
|
+
> Create New Partner Company Name of the Partner Cancel Add Partner
|
|
204
|
+
|
|
205
|
+
> Order date Transport type Total weight Total volume Dangerous goods Lorem ipsum 1 Kg
|
|
206
|
+
|
|
207
|
+
> Order Date Transport Type Total Weight Total Volume Dangerous Goods Lorem ipsum 1 Kg
|
|
208
|
+
|
|
209
|
+
## When in doubt, don’t capitalize
|
|
210
|
+
|
|
211
|
+
Default to sentence-style capitalization. Capitalize only the first word of a heading or phrase and any proper nouns or names. Never Use Title Capitalization (Like This).
|
|
212
|
+
|
|
213
|
+
> Find a RIO partner New RIO customer Limited-time offer Join us online
|
|
214
|
+
|
|
215
|
+
> Find a RIO Partner New RIO Customer Limited-Time Offer Join Us Online
|
|
216
|
+
|
|
217
|
+
A proper noun is a specific name used for an individual person, place, organization, or sometimes thing, which is always capitalized in English. Proper nouns differ from common nouns, which are general names for a class of objects or concepts.
|
|
218
|
+
|
|
219
|
+
Examples of proper nouns include:
|
|
220
|
+
|
|
221
|
+
- People: "John Smith," "Marie Curie"
|
|
222
|
+
- Places: "New York," "Mount Everest," "The Nile River"
|
|
223
|
+
- Organizations: "Microsoft," "United Nations"
|
|
224
|
+
- Titles: "The Great Gatsby," "Time Magazine"
|
|
225
|
+
|
|
226
|
+
In contrast, examples of common nouns include:
|
|
227
|
+
|
|
228
|
+
- People: "man," "woman"
|
|
229
|
+
- Places: "city," "mountain," "river"
|
|
230
|
+
- Organizations: "company," "club"
|
|
231
|
+
- Titles: "book," "magazine"
|
|
232
|
+
|
|
233
|
+
## Use ALL CAPS only when you should
|
|
234
|
+
|
|
235
|
+
Avoid using ALL CAPITAL LETTERS. It’s like screaming, and it may present additional difficulty for reading longer texts. We occasionally display all capital letters in headings on marketing pages, badges (such as NEW, PLUS, or FREE), or navigation labels but of these uses are exceptions.
|
|
236
|
+
|
|
237
|
+
There are capitalization exceptions on some marketing pages. To attract new customers and encourage action, marketers might capitalize the word free or some catch phrases. Research proves that the capitals are effective for conversion, but the promotional tone of the capital letters is out of place in the in-product conversation.
|
|
238
|
+
|
|
239
|
+
## Punctuation
|
|
240
|
+
|
|
241
|
+
## Skip periods and unnecessary punctuation (" : ! ?")
|
|
242
|
+
|
|
243
|
+
Skip end punctuation on titles, headings, subheads, UI titles, and items in a list that are three or fewer words. Save the periods for paragraphs and body text. This helps readers scan text more easily.
|
|
244
|
+
|
|
245
|
+
- Labels
|
|
246
|
+
- Single sentence tooltip text
|
|
247
|
+
- Bulleted lists
|
|
248
|
+
- Dialog headlines and single sentence dialog body
|
|
249
|
+
|
|
250
|
+
- Multiple sentences
|
|
251
|
+
- Long or complex sentences, if it suits the context
|
|
252
|
+
- Any sentence followed by a link. Links themselves should not be full sentences.
|
|
253
|
+
|
|
254
|
+
> Move a tile 1. Press and hold the tile.
|
|
255
|
+
|
|
256
|
+
> Move a tile. 1. Press and hold the tile.
|
|
257
|
+
|
|
258
|
+
## Skip colons in headings
|
|
259
|
+
|
|
260
|
+
For headings on lists of items, do not use colons. For lists within body text, use a colon.
|
|
261
|
+
|
|
262
|
+
## Use exclamation points sparingly
|
|
263
|
+
|
|
264
|
+
Exclamation points can come across as shouting or overly friendly.
|
|
265
|
+
|
|
266
|
+
> Congratulations! You created your first connection
|
|
267
|
+
|
|
268
|
+
> No contracts! Save a contract and it’ll appear here
|
|
269
|
+
|
|
270
|
+
## Remember the last comma
|
|
271
|
+
|
|
272
|
+
In a list of three or more items, include a comma before the conjunction. Don't use it followed by an ampersand. The comma that comes before the conjunction is known as the Oxford or serial comma.
|
|
273
|
+
|
|
274
|
+
> Android, iOS, and Windows
|
|
275
|
+
|
|
276
|
+
> Android, iOS and Windows
|
|
277
|
+
|
|
278
|
+
## UI elements
|
|
279
|
+
|
|
280
|
+
## Buttons
|
|
281
|
+
|
|
282
|
+
Button texts should always include verbs. Keep things clear and concise, and use sentence case. It’s OK to use an ampersand in button text.
|
|
283
|
+
|
|
284
|
+
Pair action verbs with nouns. Is the user saving details, downloading an invoice, or editing an order? Pairing tells the user exactly what will happen.
|
|
285
|
+
|
|
286
|
+
**In general, follow these guidelines**
|
|
287
|
+
|
|
288
|
+
- Use chevron icons (left and right) to indicate directions
|
|
289
|
+
- Use the plus and delete icons for creation and deletion respectively
|
|
290
|
+
- Explain what’s going to happen next
|
|
291
|
+
- Be concise
|
|
292
|
+
|
|
293
|
+
> Back Remove component Add new vehicle
|
|
294
|
+
|
|
295
|
+
> Back Remove Add New Vehicle
|
|
296
|
+
|
|
297
|
+
**Explain what’s going to happen next**
|
|
298
|
+
|
|
299
|
+
Ambiguous button labels, such as yes/no, submit/cancel, or abort/continue provide minimal information to the user. This requires the user to read the dialog text in order to complete the task, making them prone to misinterpretation and adding extra effort for users.
|
|
300
|
+
|
|
301
|
+
> Edit order? Are you sure you want to edit this existing order? Never mind Edit order
|
|
302
|
+
|
|
303
|
+
> Edit order? Are you sure you want to edit this existing order? Cancel Edit
|
|
304
|
+
|
|
305
|
+
Consider this: If you remove all the text around your buttons, could the user still accomplish the task? If not, change your button labels. Use words that motivate immediate action.
|
|
306
|
+
|
|
307
|
+
**Don’t cancel the cancellation**
|
|
308
|
+
|
|
309
|
+
When you have buttons for actions that could cause problems, like deleting something or stopping a service, it's important to make sure people understand what the buttons do.
|
|
310
|
+
|
|
311
|
+
For example, if one button says confirm and another says cancel, it might not be clear which one actually cancels the action. This can lead to people making mistakes.
|
|
312
|
+
|
|
313
|
+
To help users, always use clear words on buttons that tell them exactly what will happen when they click them.
|
|
314
|
+
|
|
315
|
+
If you use the same words on the buttons as you do in the title or header, it makes everything easier to understand and encourages users to take the right action. This way, you avoid confusing labels like confirm/cancel. Also, if you use a word like 'keep' on the second button, it makes it really easy for users to not accidentally cancel something.
|
|
316
|
+
|
|
317
|
+
> Cancel your order? Keep order Cancel order
|
|
318
|
+
|
|
319
|
+
> Cancel your order? Cancel Confirm
|
|
320
|
+
|
|
321
|
+
**Don’t truncate button text**
|
|
322
|
+
|
|
323
|
+
Avoid truncating button text, as it can confuse users about the buttons intention.
|
|
324
|
+
|
|
325
|
+
Strive for concise button text, and consider using labels if needed.
|
|
326
|
+
|
|
327
|
+
If your buttons have longer text that doesn't fit due to limited space, stack them to ensure clarity, especially in narrow containers with multiple buttons.
|
|
328
|
+
|
|
329
|
+
> Save & continue Submit application
|
|
330
|
+
|
|
331
|
+
> Save and continue editing Submit application for review
|
|
332
|
+
|
|
333
|
+
> Update profile information Generate & download PDF
|
|
334
|
+
|
|
335
|
+
> Update profile information Generate report and download PDF
|
|
336
|
+
|
|
337
|
+
## Forms
|
|
338
|
+
|
|
339
|
+
**General form guidelines**
|
|
340
|
+
|
|
341
|
+
Please follow these rules when implementing and designing form in your service
|
|
342
|
+
|
|
343
|
+
- Mark optional or required fields. Add the "* Fields are required" legend.
|
|
344
|
+
- Group the label and the respective form element and separate them visually from other form elements
|
|
345
|
+
- Use placeholders to provide users a hint to avoid input mistakes
|
|
346
|
+
- In case explain what you want the data for
|
|
347
|
+
|
|
348
|
+
**When to validate**
|
|
349
|
+
|
|
350
|
+
- Validate on submit and re-validate on change
|
|
351
|
+
- Validate on blur
|
|
352
|
+
- Don’t validate on first input click and avoid showing errors immediately when the user starts typing
|
|
353
|
+
- If realtime validation is needed, use a debounce mechanism to delay validation until the user pauses typing for a short period (e.g., 300-500 milliseconds). This reduces the number of validations and prevents overwhelming the user.
|
|
354
|
+
- For input length validation, display a character counter instead of an error message
|
|
355
|
+
- Use default values or limit options, no validation is needed
|
|
356
|
+
- Disable the submit button, if possible, to avoid errors when using multiple required fields
|
|
357
|
+
- Never rely on a red input border alone in case of an error
|
|
358
|
+
|
|
359
|
+
By using techniques like debouncing, on-blur validation, and friendly error messages, you can provide a balanced and user-friendly validation experience.
|
|
360
|
+
|
|
361
|
+
> Name Email address Password Phone number (optional) In case we need to call you for further details
|
|
362
|
+
|
|
363
|
+
> Name* Email address* Password* Phone number
|
|
364
|
+
|
|
365
|
+
In case there is only one or just a few optional fields, rather mark the optional fields than marking all other fields required.
|
|
366
|
+
|
|
367
|
+
> First name* Last name* Date of birth We want to give you a special treat on your birthday Country Comments * Fields are required
|
|
368
|
+
|
|
369
|
+
> First name* Last name* Date of birth Country Comments
|
|
370
|
+
|
|
371
|
+
When using the * character to mark required fields, please add the explanation for the user even though it is common to use.
|
|
372
|
+
|
|
373
|
+
## Input placeholder
|
|
374
|
+
|
|
375
|
+
Placeholder text for form inputs generally should not contain a trailing "..." (ellipsis). The purpose of a placeholder is to provide a short hint to the user about what to enter in the field, and adding an ellipsis can create unnecessary visual clutter and may be confusing.
|
|
376
|
+
|
|
377
|
+
**Best practices for placeholder text**
|
|
378
|
+
|
|
379
|
+
- Clear and concise Keep placeholder text short and to the point. Long placeholder text gets cropped making it inaccessible. Use longer text as help text instead.
|
|
380
|
+
- Descriptive Ensure the placeholder text clearly describes the expected input
|
|
381
|
+
- Avoid ellipses Do not use trailing ellipses for placeholders in inputs, for inputs with autocomplete, selects, or dropdowns. Ellipsis are typically used to indicate truncation or continuation, which is not the purpose of placeholder text. It can create ambiguity and doesn't provide clear guidance on what to enter.
|
|
382
|
+
|
|
383
|
+
**Examples of good placeholder text**
|
|
384
|
+
|
|
385
|
+
- "Search by name"
|
|
386
|
+
- "Search for products"
|
|
387
|
+
- "Search in table"
|
|
388
|
+
- "Find a vehicle by name"
|
|
389
|
+
- "Add comment"
|
|
390
|
+
- "New message"
|
|
391
|
+
- "Enter keywords (e.g., documentation, examples)"
|
|
392
|
+
|
|
393
|
+
> Password Your password must include 1 lowercase letter and 1 uppercase letter as well as a special character
|
|
394
|
+
|
|
395
|
+
> Password
|
|
396
|
+
|
|
397
|
+
## Form labels and placeholders
|
|
398
|
+
|
|
399
|
+
When designing forms, it is crucial to use labels and placeholders effectively to ensure a clear and user-friendly experience.
|
|
400
|
+
|
|
401
|
+
**Differentiating labels and placeholders**
|
|
402
|
+
|
|
403
|
+
- Avoid redundancy Using both a label and a placeholder with the same value is redundant and unhelpful. Each element serves a distinct purpose.
|
|
404
|
+
- Label usage Labels should clearly describe the input field's purpose. They are persistent and help users understand what information is required, even after they begin typing.
|
|
405
|
+
- Placeholder usage Placeholders should provide an example of the expected input format, not a call-to-action (CTA). For example, use "example@mail.com" for an email input field.
|
|
406
|
+
- Special cases for placeholders In most cases, search fields can use a placeholder with CTA text instead of a label. This approach simplifies the form and enhances usability. It can also be applied to other input fields where a label would be unnecessary and would complicate the design, such as message inputs, comment sections, and chat windows.
|
|
407
|
+
- Appropriate styling Form labels should not be styled as headlines. Headline styles are generally too prominent and can distract from the form's usability. Labels should be clear and readable, ensuring they complement the form design without overwhelming it. Headlines should be used for an entire form or a form section to provide clear grouping and structure. For more detailed grouping within a form, you may use the <fieldset> element with a <legend> to create a clearly defined section, which helps users understand the organization and purpose of different parts of the form. This approach enhances readability and navigability, making the form more user-friendly.
|
|
408
|
+
|
|
409
|
+
> Email* Form section using fieldset Lorem ipsum
|
|
410
|
+
|
|
411
|
+
> Name Email* Search features
|
|
412
|
+
|
|
413
|
+
## Dialogs
|
|
414
|
+
|
|
415
|
+
Avoid presenting users with unclear choices. “Cancel” doesn't make sense here because no clear action is proposed.
|
|
416
|
+
|
|
417
|
+
> Not part of your order The selected item is not part of you order and cannot be assigned Ok
|
|
418
|
+
|
|
419
|
+
> Not part of your order The selected item is not part of you order and cannot be assigned Cancel Ok
|
|
420
|
+
|
|
421
|
+
## Error states
|
|
422
|
+
|
|
423
|
+
Always use the header and the description of a state when using components like ErrorState, NotFoundState, EmptyState, or any other state.
|
|
424
|
+
|
|
425
|
+
Leaving out the message and using the headline for the user action feels like shouting to the user.
|
|
426
|
+
|
|
427
|
+
> You have no vehicle selected Please select a single vehicle from the list of your vehicles on the left hand side of your screen
|
|
428
|
+
|
|
429
|
+
> Please select exactly one vehicle
|
|
430
|
+
|
|
431
|
+
## Notifications
|
|
432
|
+
|
|
433
|
+
This guide outlines the best practices for crafting notification messages. The aim is to ensure consistency, clarity, and brevity across all notification messages.
|
|
434
|
+
|
|
435
|
+
**General notification guideline**
|
|
436
|
+
|
|
437
|
+
Naming the subject first in notifications is a common and effective best practice. Here’s why this approach is beneficial:
|
|
438
|
+
|
|
439
|
+
1. Clarity It immediately informs the user about what the notification is regarding. This is particularly useful when multiple notifications are displayed at once or when users are multitasking.
|
|
440
|
+
2. Consistency Maintaining a consistent structure helps users quickly understand the nature of the notification. If the subject is always mentioned first, users will become accustomed to scanning for that information first.
|
|
441
|
+
3. Prioritization In notifications where users might need to take action or understand the context quickly, presenting the subject first allows them to prioritize their attention effectively.
|
|
442
|
+
4. Readability It can improve readability and user experience by clearly separating the notification's subject from its outcome or details.
|
|
443
|
+
|
|
444
|
+
**Considerations**
|
|
445
|
+
|
|
446
|
+
- Keep the message consistent in structure across different contexts
|
|
447
|
+
- Use a period at the end of the message only if part of a full sentence in a larger context but omit it in standalone notifications.
|
|
448
|
+
- Keep the message short and to the point
|
|
449
|
+
- The tone should be professional and neutral
|
|
450
|
+
- Use simple and straightforward language. Don’t use technical terms that may not be familiar to all users.
|
|
451
|
+
- Don’t use exclamation marks (e.g., "Address copied to clipboard!")
|
|
452
|
+
|
|
453
|
+
- Name copied to clipboard
|
|
454
|
+
- Tour published successfully
|
|
455
|
+
- Appointment created successfully
|
|
456
|
+
- Failed to create the appointment
|
|
457
|
+
- The file could not be uploaded
|
|
458
|
+
- Your changes could not be saved
|
|
459
|
+
|
|
460
|
+
> Your request has been submitted Data load error Something went wrong while loading your data. Please refresh the page. Invalid input Please check your email address and try again Appointment not scheduled There’s a conflict with your calendar. Please choose a different time. New feature: Order tracking You can now easily track your orders directly from your account. Check it out today! Account review completed Your account details are up to date. No further action is required.
|
|
461
|
+
|
|
462
|
+
> Completed successfully The form has been submitted Error JSON parse error: Unexpected token < in JSON at position 0 Invalid Input was incorrect Error The appointment wasn’t scheduled because of a conflict with your calendar. Scheduling failed. We’ve added a new feature that lets you track your orders more easily. Try it out today and see how it can improve your experience! Account info: Your account details were recently reviewed, and everything seems to be in order. There’s nothing you need to do at this time.
|
|
463
|
+
|
|
464
|
+
**Usage guide for notifications**
|
|
465
|
+
|
|
466
|
+
A comprehensive guide to using default, info, success, warning, and error notifications effectively.
|
|
467
|
+
|
|
468
|
+
Neutral or low-priority updates that don’t fit into other categories.
|
|
469
|
+
|
|
470
|
+
- Best for: General feedback or updates, non-urgent information, or messages without special emphasis.
|
|
471
|
+
- Examples: "Your report is being generated" "This feature is in beta"
|
|
472
|
+
|
|
473
|
+
- "Your report is being generated"
|
|
474
|
+
- "This feature is in beta"
|
|
475
|
+
|
|
476
|
+
Provide actionable or helpful information to the user.
|
|
477
|
+
|
|
478
|
+
- Best for: Announcements, tips, or non-urgent details users should know.
|
|
479
|
+
- Examples: "A new version of the app is available" "This vehicle has no position data" "Pro tip: Use filters to narrow your search results."
|
|
480
|
+
|
|
481
|
+
- "A new version of the app is available"
|
|
482
|
+
- "This vehicle has no position data"
|
|
483
|
+
- "Pro tip: Use filters to narrow your search results."
|
|
484
|
+
|
|
485
|
+
Celebrate or confirm that an action was successfully completed.
|
|
486
|
+
|
|
487
|
+
- Best for: Positive feedback for completed tasks or goals.
|
|
488
|
+
- Examples: "Your profile has been updated successfully" "Your message has been sent" "Payment processed successfully"
|
|
489
|
+
|
|
490
|
+
- "Your profile has been updated successfully"
|
|
491
|
+
- "Your message has been sent"
|
|
492
|
+
- "Payment processed successfully"
|
|
493
|
+
|
|
494
|
+
Alert users about potential risks or actions they should take to avoid issues.
|
|
495
|
+
|
|
496
|
+
- Best for: Situations requiring user action to prevent problems or risks.
|
|
497
|
+
- Examples: "Your password will expire soon. Update it now." "Your account is approaching its storage limit" "Some items in your cart are no longer available"
|
|
498
|
+
|
|
499
|
+
- "Your password will expire soon. Update it now."
|
|
500
|
+
- "Your account is approaching its storage limit"
|
|
501
|
+
- "Some items in your cart are no longer available"
|
|
502
|
+
|
|
503
|
+
Notify users of problems or issues that require immediate attention.
|
|
504
|
+
|
|
505
|
+
- Best for: Failed actions, critical issues, or situations blocking progress.
|
|
506
|
+
- Examples: "Failed to save changes. Please try again." "Unable to process your payment" "Something went wrong. Contact support for assistance."
|
|
507
|
+
|
|
508
|
+
- "Failed to save changes. Please try again."
|
|
509
|
+
- "Unable to process your payment"
|
|
510
|
+
- "Something went wrong. Contact support for assistance."
|
|
511
|
+
|
|
512
|
+
**"Copy to clipboard" notification guidelines**
|
|
513
|
+
|
|
514
|
+
All success notifications for clipboard actions should follow this structure: "<Item> copied to clipboard"
|
|
515
|
+
|
|
516
|
+
- <Item>: The specific content that has been copied (e.g., Address, Coordinates, Link, Name)
|
|
517
|
+
- copied to clipboard: A fixed phrase that confirms the action and its result
|
|
518
|
+
- Omit the close button as this message should be shown with the default timeout and disappear automatically
|
|
519
|
+
|
|
520
|
+
- Address copied to clipboard
|
|
521
|
+
- Coordinates copied to clipboard
|
|
522
|
+
- Name copied to clipboard
|
|
523
|
+
- Text copied to clipboard
|
|
524
|
+
|
|
525
|
+
> Coordinates copied to clipboard
|
|
526
|
+
|
|
527
|
+
> 48.11293, 11.53486 Copied to clipboard.
|
|
528
|
+
|
|
529
|
+
## Error messages
|
|
530
|
+
|
|
531
|
+
## Errors in general
|
|
532
|
+
|
|
533
|
+
Errors can cause frustration, confusion, a loss of data, or more work for the user. These moments make it harder for them to finish their task.
|
|
534
|
+
|
|
535
|
+
No matter the design component or the length of the message, the most thorough error messages consist of three clear communication elements
|
|
536
|
+
|
|
537
|
+
- What happened
|
|
538
|
+
- The underlying cause (if possible)
|
|
539
|
+
- How to fix it
|
|
540
|
+
|
|
541
|
+
## Avoid showing a message whenever possible
|
|
542
|
+
|
|
543
|
+
The best error message is no error happening at all.
|
|
544
|
+
|
|
545
|
+
Find ways to avoid the error altogether, like by using in-line validation, visual cues, and disabled states to guide users.
|
|
546
|
+
|
|
547
|
+
> Description (required) Submit
|
|
548
|
+
|
|
549
|
+
> Description (required) Description required Submit
|
|
550
|
+
|
|
551
|
+
## Have the system automatically resolve errors
|
|
552
|
+
|
|
553
|
+
Avoid using error messages as the first solution. Instead, design things so that the user interface doesn't need to show errors or ask users to fix problems whenever you can.
|
|
554
|
+
|
|
555
|
+
For instance, if a user types "101" into a field that should only allow numbers up to 100, like percentages, the system should automatically change the value to 100.
|
|
556
|
+
|
|
557
|
+
> Input that auto-corrects %
|
|
558
|
+
|
|
559
|
+
> Input that allows invalid data Invalid input. Please enter a maximum of 100% %
|
|
560
|
+
|
|
561
|
+
## Use plain language, and avoid jargon
|
|
562
|
+
|
|
563
|
+
Your Users may not understand "server architecture" or "client-side queries". Know your audience, and write your error messages in plain, usable language so that your user will understand what went wrong and how it’s being resolved.
|
|
564
|
+
|
|
565
|
+
Technical terms are different than jargon. If you’re confident that your audience would be readily familiar with technical terms, and if such terms are relevant to the message, you can include them.
|
|
566
|
+
|
|
567
|
+
> We had trouble processing your request because the server's pathway to the data was slow. We're working to fix it.
|
|
568
|
+
|
|
569
|
+
> Your request encountered a server-side bottleneck due to inefficient API endpoint routing
|
|
570
|
+
|
|
571
|
+
## Commonly misspelled or misformatted words
|
|
572
|
+
|
|
573
|
+
## List of commonly misspelled words
|
|
574
|
+
|
|
575
|
+
There are quite a few words that are commonly written incorrectly or inconsistently in software and UI texts. Here are some frequent ones
|
|
576
|
+
|
|
577
|
+
- Login vs. log in ✅ Correct: Log in (verb) / Login (noun, adjective) ❌ Incorrect: Login to your account (should be Log in to your account)
|
|
578
|
+
- Sign up vs. signup ✅ Correct: Sign up (verb) / Signup (noun, adjective) ❌ Incorrect: Create a sign up (should be Create a signup)
|
|
579
|
+
- Log out vs. logout ✅ Correct: Log out (verb) / Logout (noun, adjective) ❌ Incorrect: Please logout (should be Please log out)
|
|
580
|
+
- Cancel vs. abort ✅ Preferred: Cancel (stop an action before it completes, more user friendly) ✅ Correct but technical: Abort (To forcefully stop a process. Used in more technical contexts, like system failures - e.g., "Process aborted due to an error") ❌ Incorrect in general UI: Abort (too harsh for standard user actions)
|
|
581
|
+
- Email vs. e-mail ✅ Correct: Email (correct and widely used in software, more modern, should be capitalized at the start of a sentence) ✅ Correct within copy: email (standard when it's in the middle of a sentence, as it's a common noun, e.g., "Please enter your email address.") ❌ Incorrect: E-mail (technically correct but outdated)
|
|
582
|
+
- Email vs. e-mail in German context 🇩🇪 ✅ Correct in German UI: E-Mail (official and correct) ❌ Incorrect: Email (while gaining popularity, "Email" is still considered incorrect in formal German writing) ❌ Incorrect: email without capitalization in German ✅ Correct: E-Mail-Adresse (official and correct) ❌ Incorrect: Email-Adresse without capitalization in German
|
|
583
|
+
- Username vs. user name ✅ Correct: Username ❌ Incorrect: User name (though some older UIs still use this)
|
|
584
|
+
- Last name vs. surname 🟢 Preferred: Last name (even in en-GB UI) ✅ Formal: Surname (less common in UI, more in official documents) ❌ Incorrect: Lastname (should be two words: Last name)
|
|
585
|
+
- Last name vs. surname in German context 🇩🇪 🟢 German UI: Nachname ✅ Official forms: Familienname (but avoid in casual UI)
|
|
586
|
+
- Ok vs. okay ✅ Correct: OK (most common in UI) ❌ Incorrect: Okay (too informal for UI)
|
|
587
|
+
- Home page vs. homepage ✅ Correct: Home page (two words) ❌ Incorrect: Homepage (often used but technically incorrect)
|
|
588
|
+
- 2FA vs. two-factor authentication ✅ Correct: Two-factor authentication (2FA) ❌ Incorrect: 2FA authentication (redundant)
|
|
589
|
+
- Wi-fi vs. wifi vs. WiFi ✅ Correct: Wi-Fi ❌ Incorrect: WiFi (often seen but not the official spelling)
|
|
590
|
+
|
|
591
|
+
- ✅ Correct: Log in (verb) / Login (noun, adjective)
|
|
592
|
+
- ❌ Incorrect: Login to your account (should be Log in to your account)
|
|
593
|
+
|
|
594
|
+
- ✅ Correct: Sign up (verb) / Signup (noun, adjective)
|
|
595
|
+
- ❌ Incorrect: Create a sign up (should be Create a signup)
|
|
596
|
+
|
|
597
|
+
- ✅ Correct: Log out (verb) / Logout (noun, adjective)
|
|
598
|
+
- ❌ Incorrect: Please logout (should be Please log out)
|
|
599
|
+
|
|
600
|
+
- ✅ Preferred: Cancel (stop an action before it completes, more user friendly)
|
|
601
|
+
- ✅ Correct but technical: Abort (To forcefully stop a process. Used in more technical contexts, like system failures - e.g., "Process aborted due to an error")
|
|
602
|
+
- ❌ Incorrect in general UI: Abort (too harsh for standard user actions)
|
|
603
|
+
|
|
604
|
+
- ✅ Correct: Email (correct and widely used in software, more modern, should be capitalized at the start of a sentence)
|
|
605
|
+
- ✅ Correct within copy: email (standard when it's in the middle of a sentence, as it's a common noun, e.g., "Please enter your email address.")
|
|
606
|
+
- ❌ Incorrect: E-mail (technically correct but outdated)
|
|
607
|
+
|
|
608
|
+
- ✅ Correct in German UI: E-Mail (official and correct)
|
|
609
|
+
- ❌ Incorrect: Email (while gaining popularity, "Email" is still considered incorrect in formal German writing)
|
|
610
|
+
- ❌ Incorrect: email without capitalization in German
|
|
611
|
+
|
|
612
|
+
- ✅ Correct: E-Mail-Adresse (official and correct)
|
|
613
|
+
- ❌ Incorrect: Email-Adresse without capitalization in German
|
|
614
|
+
|
|
615
|
+
- ✅ Correct: Username
|
|
616
|
+
- ❌ Incorrect: User name (though some older UIs still use this)
|
|
617
|
+
|
|
618
|
+
- 🟢 Preferred: Last name (even in en-GB UI)
|
|
619
|
+
- ✅ Formal: Surname (less common in UI, more in official documents)
|
|
620
|
+
- ❌ Incorrect: Lastname (should be two words: Last name)
|
|
621
|
+
|
|
622
|
+
- 🟢 German UI: Nachname
|
|
623
|
+
- ✅ Official forms: Familienname (but avoid in casual UI)
|
|
624
|
+
|
|
625
|
+
- ✅ Correct: OK (most common in UI)
|
|
626
|
+
- ❌ Incorrect: Okay (too informal for UI)
|
|
627
|
+
|
|
628
|
+
- ✅ Correct: Home page (two words)
|
|
629
|
+
- ❌ Incorrect: Homepage (often used but technically incorrect)
|
|
630
|
+
|
|
631
|
+
- ✅ Correct: Two-factor authentication (2FA)
|
|
632
|
+
- ❌ Incorrect: 2FA authentication (redundant)
|
|
633
|
+
|
|
634
|
+
- ✅ Correct: Wi-Fi
|
|
635
|
+
- ❌ Incorrect: WiFi (often seen but not the official spelling)
|