This page was created in response to the coding challenge during a hiring evaluation.
Notes
edit- for a faster turn-around time, this page is designed only for Vector skin (for now)
- to work and appear properly, please
importScript
User:Luxfx/Noarticletext.js in your common.js file
importScript( 'User:Luxfx/Noarticletext.js' );
- in order to show formatted results, some of the API calls are with false information
Primary Problem
editContrary to the increase of readership, the number of active editors has declined. (see graph to right)
Secondary Problems
editWhile the entire problem is a complicated hydra, one easily identifiable focal point is the user flow stemming from the No article text template. This template is visible after a user clicks a red link (links to pages that have not yet been created).
The following issues have been identified with this template:
- Wall of Text[1] - The copy on this page needs to be more scannable.
- Lack of symbology[2] - There are no visual indicators as to what can be done from this page. Users that have experienced document creation functionality on other websites, desktop applications, and mobile apps will have been exposed to common icons, which can be utilized in this instance to convey meaning and assist scannability (see above).
- Assumption of familiarity - Under many namespaces there are no wizard-type tools available from this page, nor access to the visual editor, which can cause a potential new editor to feel overwhelmed.
- Lack of encouragement - Another area that effects the willingness to proceed from a potential new editor is encouragement. Users should be reassured that:
- their knowledge is valuable
- a large quantity of time is not immediately required, and
- they have the capability (or even responsibility) to add their knowledge
Proposed Solution
editThe proposed solutions to the above issues noted are visible at User:Luxfx/Noarticletext (assuming the js import was included as instructed). They include:
- wall of text
- large icon to left for focal point #1 for the eyes during scanning
- wrapping primary message "wikipedia does not have..." in a border to clarify the problem
- separated groups of actions into callout boxes
- main function (to create a page) is provided with callout buttons
- special information and suggestion notes related to main function are given special boxes within the outer Create action box
- symbology
- box with a light dashed border is included to symbolize missing content
- green circle with + is included as visual indication of the functionality of adding content
- alert sign is added to the "wikipedia does not have..." text to indicate undesired result
- border around alert is tinted slightly red, also to indicate undesired result
- added create/search/link icons to action callout boxes
- information and suggestion icons are added to special boxes inside outer Create action box
- familiarity / ease of use
- two callout buttons for main task to provide clear action elements
- to create page
- to use article wizard
- arrows are added to the callout button style to ensure understanding that they are action calls
- the action box icons also act as direct links for usage of the relative command
- two callout buttons for main task to provide clear action elements
- encouragement
- information box is added to show potential editors that they are part of a larger crowd (comfort in numbers)
- suggestion box is added to explain that the user's sandbox can be used for temporary editing, which could be created quickly without much time commitment
New Users
editBecause this page relies on custom scripts and stylesheets the ability to show this as a new user (that has not yet created an account) was not possible without simulation. I have several thoughts on the concept, as follows:
- New users, when clicking a red link, are not presented with a "what if". To borrow the paradigm from desktop applications, and some web and mobile applications, the options available to a logged in users should be visible, although grayed out and non-functional.
- Additional callouts should be present with a traditional account icon:that will allow the new user to create a new account, with a 'redirect' url that will bring them back to this page with the then-working options for creating a page.
References
edit- ^ Nielsen, Jakob. "Top 10 Mistakes in Web Design". Jakob Nielsen’s Alertbox. section 4. Retrieved 1 January 2011.
{{cite web}}
: CS1 maint: location (link) - ^ Horton, William. "Designing icons and visual symbols". Retrieved 4 January 1996.
{{cite web}}
: Check date values in:|accessdate=
(help)