Group Critique – 24th January Tuesday

Today we presented our work like previous projects talking through what we did our research outcomes and findings.

Critique Presentation: wikiredesign

Prototype in use with edits

Some of the feedback I had got from the presentation;

“What if someone didn’t want to read the article without having the pop-up and highlights while looking through the page”.

One of these concepts for this was to have this as another tab, so you had the ‘Article’ Tab/Reader View, the ‘Talk’ Tab to show discussions, and what I call for this the ‘Visual Edit History’ to help go along side the ‘View History’ Tab. In my prototype it’s not currently like that as I took the article page itself and would be tricky to do.

Another one of the critiques I got from the critique was I didn’t have a established user need and I just had to create a case for who this concept was targeted for, to just help solidify the concept. I had a rough idea for what the user-base could be for users just starting to Wikipedia who don’t understand their Wiki markup and want a clear view of the edits without the coding in the text.

Based of the feedback I had got I think I want to next time for projects in general not be so focused on the research rather then the development, weaving in research that I found throughout the process. Furthermore, there are some things I would like to add to the prototype so I think I could do this through user testing and questionnaires to get some qualitative and quantitative data. Finally, to again make it clear who would want or need my prototype “Redesign”.

Link to Wikipedia Website Address – http://blueigloo.com/xavier/

Implementation – 23rd January Monday

After during the weekend spending time trying to grab a Wikipedia page I could use to test of to create the prototype the Monday I got Oliver with help to create the pop-up. We used hover function on JQuery code I had already tried during the weekend to get the hover working, we fixed it and managed to get a box to appear. After getting the basic feature working I worked and added to it, to get the look I wanted using Wikipedia existing styles to be coherent with the look.

This slideshow requires JavaScript.

Using my wire-frames to base the design off I managed to style it to how I wanted, keeping the theme the same by using the info-box to keep the look coherent.

Initial Trial of pop-up box

Above shows the prototype in use – using the hover feature to create the pop-up, I made a few tweaks to the box so for some sections the text above it was readable by changing the margin, allowing people to look at the edits and see where the changes are.

Wire-frames – 20th January Friday

Wire-frame

I created a few wire-frames to help create a visualisation of my prototype, and show the two variants of how I could display the pop-up.

My two mock ups of the design, showed different layouts the one on the left showing an example of the traditional Wikipedia structure and the one of the right for a more varied one with two columns. Additionally the left design I decided to create so it shows the content near it and highlights the text, with the surrounding areas darkened to draw focus to the pop-up box. For the right design this focused on hiding some of the text rather then to darken the area so it again, focuses on the pop-up by having less content on the site.

Pop-up Layout

Below is the structure I want for the pop-up box, so it shows when the edit was changed, and the before and after changes and then by who.

Revision as of 17:14, 11 August 2014

Before: “British, but became important members of the French couture establishment”  After:  “British and became part of the French couture establishment”

Edited by: Libby norman

Revision as of 17:45, 15 September 2014

Before: “..French royal families.[end of section]”

After: “[new line added with reference] ..French royal families. Creeds father was said to have designed the outfit worn by Mata Hari when she was shot.”

Edited by: Libby norman

I chose this structure so people can compare when last edits where, as well as what changes were made and who edited it. Furthermore, they can cross compare between edits and see the changes made between previous version and the live updated version.

 

Components – 18th January Wednesday

I was looking at the sections that I could possibly add to my “redesign” for my concept. Using similar features such as GitHubs sections the concept highlights a section that has a comment on and if or it’s been changed in a specific colour. In GitHub red is the original whilst green is the new content that has been updated or added.

“On this day…” Section of the Home Page on the 8th January

18th January Talk Page Section

One of the example edits on the Recent Changes section within today. For example it shows what the topic was, the user who edited the page and how the edit was done if it took up any page size changes, and a small note explaining what the edit was.

• (diff | hist) . . m Music of Indonesia‎; 16:18 . . (+7)‎ . . ‎Kreeperjo (talk | contribs)‎ (I changes some spelling mistakes) (Tag: Visual edit)

Wikipedia Project – Recent Changes & Talk Pages 17th January Tuesday

Another sections they have is a list of the changes that have been made to the page and a small note of what’s been edited.

Legend:

r  – This edit may be damaging and should be reviewed

N – This edit created a new page   

m – This is a minor edit

b – This edit was made by a bot

D – This edit was made at Wikidata

(±123) – Page size change in bytes

Recent changes

Github – 16th January Monday

On Monday after explaining one of my ideas to another tutor he directed me to GitHub and took me through some of the layouts and features it has. For example when looking at the code it’s highlighted in red what’s been deleted or the previous version, and green for what’s been changed or added. Another thing they have is they show an area for “Pull Requests” they have areas for proposed, closed and merged request as well as show Issues, or requests that are currently active.

For example visually showing the changes and sections that have been made with a indications if they were minor or big or still under discussion etc.

This slideshow requires JavaScript.

 

Concept Proposal – 13th January Friday

On Friday we consolidated our ideas for the project one of the ideas I had for my design would be a overlay calling information from the talk pages giving information on what’s been edited or changes. For example, what sections have been editing or changed if they were minor or large and possibly what’s currently being discussed.

I looked at some of the talk pages looking at what’s discussed and what information they are talking about. For example they discuss some possible arguments, then the number of comments behind the point, if it’s been resolved or rejected proposal for changes.

Through  this it would be provide a check for people wanting to access the information and make sure its accurate. In addition as one of the main aims of Wikipedia is to get a free encyclopedia to everyone globally, and this would help be a check to make sure it’s accurate or for someone who wants to see the changes a simplified view for people reading the pages.

Example of the Village Pump Talk Page Discussing Policies

Further Information on Talk Pages – 11th January Wednesday

I found a video made by the Wikimedia explaining further the uses of the talk pages and gave a inside knowledge if you had a account where you could go to find these information, and informed me about other features such as the use of bots that help curate Wikipedia.

“A bot (a common nickname for software robot) is an automated or semi-automated tool that carries out repetitive and mundane tasks to maintain the 41,138,744 pages of the English Wikipedia. Bots are able to make edits very rapidly and can disrupt Wikipedia if they are incorrectly designed or operated. For these reasons, a bot policy has been developed.

There are currently 2,037 bot tasks approved for use on the English Wikipedia; however, not all approved tasks involve actively carrying out edits. Bots will leave messages on user talk pages if the action that the bot has carried out is of interest to that editor. Some bots can be excluded from leaving these messages by using the {{bots}} tags. There are 159 exclusion-compliant bots, which are listed in this category. There are 312 bots flagged with the “bot” flag right now. There is also a range of tools that allow semi-automated editing of large numbers of articles.”

Wikipedia:Bot: https://en.wikipedia.org/wiki/Wikipedia:Bots  (last modified on 3 January 2017, at 23:01.)

Common Themes Among Competitors – 10th December January Tuesday

I decided I’d look at the common themes among each of the webpages looking at their page structure and design. Again referring to this page for webpage structure by a web style guide I found online.

Wikipedia

Wikipedia has its logo in the top corner and its navigation at the side, including its languages. Search bar at the top with further resources/navigation as well as the login features and the main content at to the right of the left scan. Footer has all copyright, polices, contact information and dates etc.

For their home page, they have different topics, and display pages on interest such as ‘In the news’ and ‘On this day..’ showing pages about particular events or information. Below that is their featured picture of the day, and more areas of Wikipedia with their sister projects at the bottom.

Wikipedia Home Page

Veropedia

Veropedia was made by some editors of Wikipedia, so some features may be similar. It’s page structure instead has the navigation at the top which is more common in designs today. Furthermore they have their search engine on the left scan, different to how Wikipedia displays their languages Veropedia has a drop down list.

Their main content for the home page where they have a ‘Today in History’ about events and a feature section, their page uses more drop down lists, for example a drop down for articles in particular regions and one for entering in your birthday.

Veropedia Home Page

Citizendium

Citizendium looks almost identical to Wikipedia as it was launched by Larry Sanger who co-founded Wikipedia in 2001. It’s very similar in which they have the gradient effect, and the logo in the top left, in addition have the search bar and login on the top right side. Navigation and Languages is again in the left scan with the main content being to the right of it. They have a history tab as well as a talk section similar to Wikipedia, furthermore they have topics below with various information and features below in their main content.

Citizendium Home Page

Encyclopedia Britannica

Britannica is very different to Wikipedia where as it has the navigation at the top of the screen. Moreover their logo is same to normal website structure with the logo on the top left. There sections are similar to the featured sections of Wikipedia but more styled with imagery, making up most of the content of the page with little text.

Britannica Home Page

Analysis of Structure

I then took screenshots of some of the other pages and analysed what components they had and the different layouts between them.

This slideshow requires JavaScript.

 

 

Wikipedia Responsive Web Design – 9th January Monday

Based off our workshop, looking into responsive web design, I looked into what Wikipedia did to make their design responsive by looking at some of their pages.

First page I looked at was their home page;

This slideshow requires JavaScript.

As we can see when when the screen size gets smaller, the search bar logo, and languages remain central whilst Wikipedia’s other projects gets more compact and the number of columns reduces. Furthermore, when we get to the iPad screen the summary for it’s other projects is moved above and is shortened rather than being on the left side. When we get to mobile screen size, the sphere shape with the languages is gone, the logo is displayed at the top of the screen followed by the search bar, and below that the languages are all displayed in a list.

Secondly I looked at their main page;

This slideshow requires JavaScript.

However, as we can see when it comes to their main site layout, the only different is the content gets more ‘squished’ together and compressed, with a few alterations to text size for some sections making it quite cluttered.