diff --git a/components/links.html b/components/links.html index 019133a..a4f637a 100644 --- a/components/links.html +++ b/components/links.html @@ -1,152 +1,152 @@ Components: Links – Wikimedia Design Style Guide
Components

Links

Links signal an action that will let the user navigate to another page, view or resource, when they click or tap on them.

link visual example

Using links

Links must include a descriptive link text or a combination of the text and an additional icon.

Designing

Link text
Link text should describe the assigned action as clear and short as possible (e.g. download, submit form, search).

Icon (optional)
Icons simplify user recognition and provide ability to shorten link text to a minimum. Icons should be limited to differentiate from a standard hyperlink (i.e. if it does something other than navigating to a new page). In contrast to buttons, icons are only allowed additionally to link text, not as only link signifier.

Examples of non-standard links include:

  • Links that open a modal instead of a new page (e.g. map links)
  • Links that open a file instead of a web page (e.g. PDF or document links)
  • Links that cause something to happen that the user would otherwise not expect (e.g. play a sound, like pronunciation links)
  • Links that open a new website instead of just a new page (external links)[1]
  • Links that open a non-web protocol URI (e.g. mailto:, tel: links)

Several Wikimedia Movement projects provide extensive “manuals of style” for applying and designing for links, for example English Wikipedia.[2]

States of links

The link styles outlined here were designed with accessible color variations to distinguish the link’s following visually separated interaction states:

links states
-

Links don't feature a disabled state. Consider using quiet buttons for those applications instead.

+

Links focus outline is the default browser focus, here Blink based browsers only with outline color amendment to Accent50. This varies in different browsers.
Links don't feature a disabled state. Consider using quiet buttons for those applications instead.

Types

-

By default links are only underlined on interaction (hover, active).

+

By default, links are only underlined on interaction (hover, active).

Underlined links

To suit user preference and for accessibility reasons MediaWiki also provides a setting to always underline links.

Links of underlined type, visual example

References

  1. English Wikipedia: External links
  2. English Wikipedia: Manual of Style/Linking
diff --git a/img/components/links_states.svg b/img/components/links_states.svg index 8020d3b..101e37a 100644 --- a/img/components/links_states.svg +++ b/img/components/links_states.svg @@ -1,99 +1,104 @@ links_states - - Normal Hover Active Focus Visited - - - - - Neutral point of view - - + + + + + Neutral point of view + + + - - - - - Neutral point of view - - + + + + Neutral point of view + + + - - - - Neutral point of view - - - - + + + + Neutral point of view + + + + + + + Neutral point of view + + + + + Neutral point of view - - - - Neutral point of view + + Normal Hover Active Focus Visited diff --git a/resources/WikimediaUI-components_overview.png b/resources/WikimediaUI-components_overview.png index 2f7c670..4b29e1f 100644 Binary files a/resources/WikimediaUI-components_overview.png and b/resources/WikimediaUI-components_overview.png differ diff --git a/resources/WikimediaUI-components_overview.sketch b/resources/WikimediaUI-components_overview.sketch index 5d444a6..dcd8995 100644 Binary files a/resources/WikimediaUI-components_overview.sketch and b/resources/WikimediaUI-components_overview.sketch differ diff --git a/resources/WikimediaUI-components_overview.svg b/resources/WikimediaUI-components_overview.svg index 7e936e4..a906bfa 100644 --- a/resources/WikimediaUI-components_overview.svg +++ b/resources/WikimediaUI-components_overview.svg @@ -1,5523 +1,5548 @@ WikimediaUI-components_overview - - + + - - + - + - - - - - - - - + + + + + + - - - - - - - + + + + - - + + - - - + + - - + + - - - + + + - - + + - - + + - - + + - - + + - - - - - + + + + + + + + + + + - + - + - + - + - - - - + + + - - - - - - - - - - + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + - + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + - - - - - - - - - - - + - - - - - - - - - + + + - - - - - - - - - - + - - - - + + + + + - + - - - - + + + + + - + - + - + - + + + + + + + + + + + + + - - - - + + + + + - + - - - - - - - + - + + + + + + + + + + + + + + + + + + + + + + + + + + - + - - - - - - - + - + - - - - - - - - - - - - - + - - - - - - - + - - - - - - - + - - - - - - - + - - - - - - - + - - - - - - - + - - - - - - - - - + + + + - + + + + + + + + + + - + - - - - - - - - - - - - - + - - - - - - - + - + - + - - - - - - - + - + - + - - - - - - - + - - - - - - - - - + + + + + + + + + + + - + - - - - - - - + - - - - - - - - - - - - + - + - + - - - - - - - + - + - + - - - - - - - + - - - + + + + + + - - - - - - - - - - + + + - + + + - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + #6b4ba1 Visited link color #ff4242 #447ff5 Hover color on primary (progressive) buttons Hover color on primary (destructive) buttons #404244 `lighten( #202122, 13% )` #6c7378 `lighten( #54595d, 10% )` Emphasized copy color Active button/widgets text MODIFIER COLORS #ac6600 RGB 172, 102, 0 HSB 36, 100%, 67% AA #fc3 RGB 255, 204, 51 HSB 45, 80%, 100% AAA #fef6e7 RGB 254, 246, 231 HSB 39, 9%, 100% AAA Yellow50 Yellow30 Green50 Green30 #00af89 RGB 0, 175, 137 HSB 167,100%,69% AA #d5fdf4 RGB 213, 253, 244 HSB 167, 16%, 99% AAA Yellow90 Green90 #14866d RGB 20, 134, 109 HSB 167, 85%, 53% AA Secondary link highlight Positive messages Warning messages COLOR PALETTE BASE COLORS ACCENT COLORS Primary buttons Links Page accents Focus outlines Active buttons Active links Accent30 Progressive #36c RGB 51, 102, 204 HSB 220, 75%, 80% AA #eaf3ff RGB 234, 243, 255 HSB 214, 8%, 100% AAA Base100 #fee7e6 RGB 255, 231, 230 HSB 2, 10%, 100% AAA Destructive #d33 RGB 221, 51, 51 HSB 360, 77%, 87% AA AA #b32424 RGB 135, 54, 54 HSB 360, 60%, 53% AAA #2a4b8d RGB 42, 75, 141 HSB 220, 70%, 55% AAA Destructive actions – Buttons and Links Alerts Destructive active buttons and links Hovered buttons Active menu items backgrounds Base background Highlight from grey Disabled text input background #fff RGB 255, 255, 255 HSB 0, 0%, 100% AAA Accent90 Accent50 Red90 Red50 Red30 Base90 Base80 Base70 Base50 Base30 Base20 Base10 Base0 Button/3D widget background #f8f9fa RGB 248, 249, 250 HSB 210, 1%, 98% AAA #eaecf0 RGB 234, 236, 240 HSB 220, 3%, 94% AAA #c8ccd1 RGB 200, 204, 209 HSB 213, 4%, 82% AAA #a2a9b1 RGB 162, 169, 177 HSB 212, 8%, 69% AAA #72777d RGB 114, 119, 125 HSB 210, 9%, 49% AA AA #54595d RGB 84, 89, 93 HSB 207, 10%, 36% AAA #202122 RGB 32, 33, 34 HSB 210, 6%, 13% AAA #000 RGB 0, 0, 0 HSB 0, 0%, 0% AAA Disabled button/3D widget background Highlighted border Disabled elements text Placeholder text Active border Copy color Buttons/widgets text Descriptive text on Base90 background Hover color on normal buttons Emphasized secondary text at level AAA need WCAG 2.0 conformance level: (with white/black) SUPPLEMENTARY COLORS BACKGROUND COLORS Layer 1: #f8f9fa Layer 2: #fff Layer 3: #eaecf0 Layer 4: #c8ccd1 Re-enter password Multiline inline message without rich text. Only sentences, which bring clarity on what's happening to the user. Multiline block message with rich text like links to Nas , who • will rule the World and • free all his sons 24 scale-independent pixels (1.5 em) 20 sp (1.25 em) 16 sp (1 em) 12 sp (0.75 em) 8 sp (0.5 em) `font-size: 1em` `font-size: 1em` `font-weight: bold` A neutral message which informs about general higher priority notices to the user. Stay neutral! A neutral message which informs about general higher priority notices to the user. Stay neutral! A success message which means the user did everything right and should know about it. Yay! A success message which means the user did everything right and should know about it. Yay! A warning which is not stopping whatever the user just did, but needs to clear up why things might not work as expected. A warning which is not stopping whatever the user just did, but needs to clear up why things might not work as expected. An error which means it's potentially stopping whatever the user just did and will give them a clear message what is wrong. Re-enter password An error which means it's potentially stopping whatever the user just did and providing them a clear message on what's wrong. There's also an explanatory link . Sizes Notice Success Warning Error MESSAGES Select a file Option 1 Re-enter password Password on general purpose - - + + Vannevar Bush Username CheckboxMultiSelect label Option with a really long label Radio button with really long label Neutral point Neutral point Call to action The document containing a hyperlink is known as its source document. For example, in an online reference work such as Wikipedia, many words and terms in the text are hyperlinked to definitions of those terms. Hyperlinks are often used to implement reference mechanisms, such as tables of contents, footnotes, bibliographies, indexes, letters, and glossaries. `margin-bottom: 1.25em` between widgets with labels `margin-bottom: 1.5em` between widgets without labels EXAMPLE FORM 2 WAYS OF CHOOSING DATE 1. Starting the process from scratch. Choosing YYYY, MM, DD Step 1: Choosing year Step 2: Choosing month Step 3: Choosing day Clicking on year in the field to change year Clicking on month in the field to change month Clicking on day in the field to change day 2. Clicking on YYYY, MM, or DD to alter a specific part of the date. S 28 4 11 18 25 M 29 5 12 19 26 T 30 6 13 20 27 W 31 7 14 21 28 T 1 8 15 22 29 F 2 9 16 23 30 S 3 10 17 24 1 Tue 14 Nov 2013 January 01 February 02 March 03 April 04 May 05 June 06 January 01 February 02 March 03 April 04 May 05 June 06 July 07 August 08 September 09 October 10 November 11 December 12 July 07 August 08 September 09 October 10 November 11 December 12 YYYY-MM-DD Tue 14 Nov 2013 November 2013 2013 2013 S 28 4 11 18 25 M 29 5 12 19 26 T 30 6 13 20 27 W 31 7 14 21 28 T 1 8 15 22 29 F 2 9 16 23 30 S 3 10 17 24 1 YYYY-MM-DD November 2013 1986 1987 1988 1989 1990 1991 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2010 2011 2012 2013 2014 2015 YYYY-MM-DD Tue 14 Nov 2013 DATE PICKER Normal Disabled Text field Interaction Calendar Expanded Calendar interaction Tue Nov 5, 2013 Tue Nov 5, 2013 Tue Nov 5, 2013 Tue Nov 5, 2013 Tue Nov 5, 2013 5 5 5 Tue Nov 5, 2013 Tue Nov 5, 2013 • Clicking on back button takes users to the “Year” selection view. • Scrolling up / clicking “up” button reveal the previous month. • Scrolling down / clicking “down” button reveals the following month. • When user starts typing a number, it changes the numbers within highlighted area • Clicking on back button takes users to the “Year” selection view. • Scrolling up / clicking “up” button reveal the previous set of years. • Scrolling down / clicking “down” button reveal the following set of years. • When user starts typing a number, it changes the numbers within highlighted area Once user selects a new month / day / year, the area highlighted will grow in size and back in place as if making one pulse. The highlight with more contrast and flash When we decide to have users start from scratch in selecting a day in a year, start from the “Year” selection view, followed by “Month” and then “Day.” 48 sp (3 em) height “Currently selected” style 5 Current day Hover state style Placeholder icon for navigate to today’s day When menu is expanded, clicking on the month / day / year, takes user to the month / day / year selection view. The month / day / year will be highlighted. User will be able to type an input like a text field or choose from the selection below. CHANGING “MONTH” GOING BACK TO CHANGE “MONTH” AFTER A SELECTION STARTING FROM SCRATCH GOING BACK TO CHANGE “YEAR” CHANGING “DAY” CHANGING “YEAR” January 01 February 02 March 03 April 04 May 05 June 06 July 07 August 08 September 09 October 10 November 11 December 12 Tue Nov 5, 2013 2013 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 Tue Nov 5, 2015 Select a date Hover Active Focus Hover Active Focus Calendar Expanded User will be able to press ↑ to enter previous year, ↓ to enter year after User will also be able to type the year manually. ↑ to enter previous month if cursor is over “Nov”, ↓ to enter day after if cursor is over “5” User will also be able to type the month and day manually. Placeholder icon for calendar January 01 February 02 March 03 April 04 May 05 June 06 July 07 August 08 September 09 October 10 November 11 December 12 Tue Nov 14, 2013 2013 S 28 4 11 18 25 M 29 5 12 19 26 T 30 6 13 20 27 W 31 7 14 21 28 T 1 8 15 22 29 F 2 9 16 23 30 S 3 10 17 24 1 Tue Nov 14, 2013 November 2013 S 28 4 11 18 25 M 29 5 12 19 26 T 30 6 13 20 27 W 31 7 14 21 28 T 1 8 15 22 29 F 2 9 16 23 30 S 3 10 17 24 1 Tue Nov 5, 2013 November 2013 S 28 4 11 18 25 M 29 5 12 19 26 T 30 6 13 20 27 W 31 7 14 21 28 T 1 8 15 22 29 F 2 9 16 23 30 S 3 10 17 24 1 Tue Nov 5, 2013 November 2013 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 Tue Nov 14, 2013 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 Tue Nov 5, 2013 Button Primary… Button Primary… Button Primary… Button Primary… Option 1 Option 2 Option 3 Option “Currently selected” style Option 1 Normal Legend Hover Active Focus 8 sp (0.5 em) 42 sp height TOOLBAR Island country of Japan Japan is an island country in East Asia. Located in the Pacific Ocean, it lies off the eastern coast of the Asian continent and stretches from the Sea of Okhotsk in the north to the East China Sea and the Philippine Sea in the south. The kanji that make up Japan's name mean "sun origin", and it is often called the "Land of the Rising Sun". Japan is a stratovolcanic archipelago consisting of about 6,852 islands. The four largest are Honshu, Hokkaido, Kyushu, and Shikoku, which make up about ninety-seven percent of Japan's land area and often are referred to as home islands. The country is divided into 47 prefectures in eight regions, with Hokkaido being the northernmost prefecture and Okinawa being the southernmost one. The population of 127 million is the world's tenth largest. Japanese make up 98.5% of Japan's total population. About 13.8 million people live in Tokyo, the capital of Japan. The Greater Tokyo Area is the most populous metropolitan area in the world with over 38 million people. Find a number of Popup variants and language specific alterations at https://doc.wikimedia.org/Popups/master/js/ui/ POPUP Normal Hover Active Focus Expanded Menu Disabled Placeholder User input Placeholder Placeholder Placeholder Label Placeholder Option 1 Option 2 COMBOBOX INPUT FIELD BUTTON + DROPDOWN Normal Hover Active Expanded Menu Disabled Download original file 601 x 601 px jpg Download original file 601 x 601 px jpg Download original file 601 x 601 px jpg Download original file 601 x 601 px jpg Download original file 601 x 601 px jpg Download original file 601 x 601 px jpg Original file 601 x 601 px jpg Small 601 x 601 px jpg Download original file 601 x 601 px jpg Original file 601 x 601 px jpg Download original file 601 x 601 px jpg Small 601 x 601 px jpg Original file 601 x 601 px jpg Small 601 x 601 px jpg Download original file 601 x 601 px jpg Normal Hover Active Expanded Menu Focus Disabled Option 1 Option 2 Option 3 20 sp x 20 sp icon vertical-align: middle ICON DROPDOWN Normal Hover Active Expanded Menu Focus Disabled - - + + Neutral Neutral Neutral Neutral Neutral Neutral Neutral Neutral 2 - - + + Neutral Neutral Neutral 2 - - + + Neutral Neutral Neutral 2 LINK DROPDOWN Item 1 selected Item 2 Item 1 Select an item Select an item Item 1 selected Item 2 Item 1 Select an item Select an item Label Normal Hover Active & Focus Expanded Menu & Focus Disabled DROPDOWN Select a file Select a file Label Select a file Normal Disabled FILE INPUT FIELD 100 - - - - - - - + + + + + + + + + - - - - - - - + + + + + + + + + 100 - - + + - - + + - - + + - - + + Normal Disabled NUMBER INPUT FIELD Disabled textarea - - + + Normal Disabled TEXTAREA Normal Hover Focus & Active Password ****** - + Password PASSWORD INPUT FIELD Normal Hover Focus & Active Disabled Search - - + + - - + + Entering search terms - - + + - - + + - + Search - - + + - - + + Search - - + + - - + + SEARCH INPUT FIELD Placeholder text - + Placeholder - - + + - - + + - - + + - - + + Label Your input Providing input - - + + Your input - - + + Normal Hover Active & Focus Disabled TEXT INPUT FIELDS Option with a really long label today Second option Option 1 Option 2 Normal Hover Active Focus Disabled Minimum 16 sp (1 em) margin - + - + - + - + Option 1 Label for binary selection `vertical-align: middle` one-liner text - + - + - + - - + + - + - + - - + + Selected TOGGLE SWITCH Option 2 Option 1 Radio group label Option with a really long label today Option title Neutral point Neutral point Neutral point Normal Hover Active Focus Disabled Selected Neutral point Neutral point Radio label touch area features `width: 2em;` `height: 2em;` - + Neutral point Neutral point Neutral point Neutral point Neutral point Option with a really long label today Option title `vertical-align: middle` - + - + - - + + - + - + - - + + RADIO BUTTON Indeterminate – some children selected - - + + - - + + Unselected Selected Neutral point INTEDERMINATE Normal Hover Active Focus Disabled Selected Option 2 Option 1 Neutral point Neutral point Neutral point Neutral point Neutral point Neutral point - + Neutral point Neutral point Neutral point Neutral point Checkbox label - + Option with a really long label today Option title `vertical-align: middle` touch area features `width: 2em;` `height: 2em;` - + - + - - + + - + - + - - + + Option with a really long label today Option 2 CHECKBOX Normal Highlighted Highlighted positive Neutral point Neutral point Neutral point TEXT HIGHLIGHT - - - Normal Hover Active Focus Visited - - - Normal Hover Active Focus Visited + + + UNDERLINED LINK - - - UNDERLINED LINK - - - - + + - - - + + + + + Neutral point of view - + + + + + + Neutral point of view + + + - - - - + + + + Neutral point of view + + + + + + Neutral point of view - + - - - - Neutral point of view - - - - - + + Neutral point of view + - - - - Neutral point of view - - - - - Neutral point of view + + Normal Hover Active Focus Visited - - - - - - Neutral point of view + + + UNDERLINED LINK - + + + - - - + + + + + Neutral point of view + + + + + + + + Neutral point of view + + + + + + + + Neutral point of view + + + + + + + Neutral point of view + + + + + + Neutral point of view - - - - - Neutral point of view - - - - - - Neutral point of view + + Normal Hover Active Focus Visited - - + - + - + - + LINK Other Pages More Talk More Pages Other Talk More Pages Other More More Pages Pages Other Other Talk Talk Talk More Pages Other Talk - + - + - - + + Disabled Focus Selected Active Hover Normal BUTTON GROUP Normal Hover Active Focus Disabled 20 sp x 20 sp icon `vertical align: middle` 44 sp minimum width touch target, 32 sp height ICON Button ICON + TEXT Progressive Destructive Progressive Destructive Progressive Destructive Progressive Destructive Progressive Destructive Neutral Neutral Neutral Neutral Neutral - + - + - - + + Normal Hover Active Focus Disabled BUTTONS QUIET - - + + - - + + Toggle Toggle - - + + - - + + Normal Selected TOGGLE BUTTONS ICON + TEXT Normal Hover Active Focus Disabled Primary Button Progressive Destructive Progressive Destructive Progressive Destructive Progressive Destructive Progressive Destructive Button Button Normal Normal Normal Normal Normal - + - + - - + + BUTTONS NORMAL + PRIMARY SPECIFICATIONS SPECIFICATIONS LEGEND Text Icon Button frame 16 sp / 1 em 12 sp / 1.25 em 8 sp / 0.5 em 4 sp / 0.25 em 24 sp / 1.5 em 32 scale-independent pixels / 2 em All single buttons, icons, text field have a min. of 44 scale- independent pixels (sp) width. All single buttons have a max. of 280 sp width. If >280 sp text wraps to the next line. Checkbox group label Option 2