The Arternet: Ontwerpdocumentatie

Transcriptie

1 The Arternet: Ontwerpdocumentatie Levi Zimmerman & Robert Stijn V201 Alexander Zeh - The Social Web The Arternet: Ontwerpdocumentatie Levi Zimmerman & Robert Stijn 1

2 Inleiding The Arternet is een social platform waar kunstenaars die geïnspireerd zijn geraakt door bepaalde internet trends, firguren, memes en personages. Het sociale internet is begonnen in Maar pas later, met name toen Google en Facebook naar de beurs gingen begonnen mensen dingen op het internet steeds serieuzer te nemen. Er is zowaar een internet cultuur ontstaan die niet of nauwelijks aanwezig is in onze maatschappij. Daarom biedt The Arternet een platform waar internet enthousiastelingen kunnen discussiëren en hun verafgoding van internet personages en trends kunnen delen. Hiernaast staat een voorbeeld van de collectie waar de gebruiker door heen kan zoeken. The Arternet: Ontwerpdocumentatie Levi Zimmerman & Robert Stijn 2

3 Inhoudsopgave 1. Concept model 4 2. Scenario van gebruiker tot contributor 5 3. Scenario gebruiker naar reader 7 4. Patterns 9 5. Interactie met social object Bronnen 13 The Arternet: Ontwerpdocumentatie Levi Zimmerman & Robert Stijn 3

4 1. Concept model The Arternet: Ontwerpdocumentatie Levi Zimmerman & Robert Stijn 4

5 2. Scenario van gebruiker naar contributor Scenario: Een artiest upload een kunstwerk die refereert aan een specifieke internet trend 1. Profiel pagina Er is een lege default waarin een toevoeg knop staat om een nieuw collectie item toe te voegen. 2. Kiezen uit gallerij / foto maken Je kan uit de galerij van je telefoon een foto kiezen of een foto maken met de knop linksboven. 3. Laadscherm voor kunstwerk Het uploaden van de afbeelding kan nog geannuleerd worden of de gebruiker kan alvast aan de slag met de meta data. 4. Meta info ingevoerd bij kunstwerk De afbeelding is klaar met uploaden en de titel en de tags zijn ingevoerd. The Arternet: Ontwerpdocumentatie Levi Zimmerman & Robert Stijn 5

6 2. Scenario van gebruiker naar contributor 5. Kunstwerk nieuw in collectie Het kunstwerk verschijnt met een schuifende animatie van boven. Ook is de bewerk knop zichtbaar voor de gebruiker zijn eigen collectie items. 6. Kunstwerk nieuw op profiel Op de profiel pagina is het nieuwe collectie item toegevoegd aan de collectie van de gebruiker. Daarnaast wordt er aangemoedigd om nog een nieuw kunstwerk toe te voegen. The Arternet: Ontwerpdocumentatie Levi Zimmerman & Robert Stijn 6

7 3. Scenario van gebruiker naar reader Scenario: Een gebruiker ontdekt content door tags of door de front-pages 1 1. Zoekveld met tags Het zoekveld zoekt op titel, tags, comment hashtags. Voordat de gebruiker begint met zoeken staan de populairste tags onder het zoekveld om ontdekken te stimuleren. 2. New pagina (front-page) Een van de swipe-views is de New page. Dit is het collectie item dat door de artiest in vorig scenario is toegevoegd. 3. Detailweergave kunstwerk Aan de detailweergave zijn de deel, like, comment en capt n? verbonden. Dit zijn de interacties met het sociale object. Later gaan we hier dieper op in. 1 De front-pages zijn: Nieuwe kunstwerken, Populaire kunstwerken en Trending kunstwerken The Arternet: Ontwerpdocumentatie Levi Zimmerman & Robert Stijn 7

8 3. Scenario van gebruiker naar reader (optioneel: en naar contributor) 1. Capt n? toevoegen De placeholder tekst moedigt de Capt n aan om te refereren naar personages en/of trends. 2. Eerste comment toevoegen De default state van de comment sectie is een aanmoediging voor de eerste gebruiker om een comment achter te laten. The Arternet: Ontwerpdocumentatie Levi Zimmerman & Robert Stijn 8

9 4. Patterns (4/11) Lege default - nieuwe toevoegen Je geeft aan de gebruiker aan waar zijn kunstwerken terecht komen. Daarnaast geeft het gevoel van onvolledigheid en dit zal de gebruiker stimuleren om iets toe te voegen. Gallery van telefoon Apps zoals Facebook en Twitter integreren de gallery van de telefoon wanneer er media wordt verlangd van de gebruiker. Dit is voor de gebruiker een kortere route om media te uploaden t.o.v. van oude patterns waarin de gebruiker eerst moet kiezen of hij/zij naar de gallerij van zijn telefoon wilt. Modal / lightbox Om een afbeelding naar voren te halen wordt de achtergrond donker gekleurd (transparant) waarmee wordt aangegeven dat de gebruiker weer terug kan naar zijn vorige weergave. Het is een hub-and-spoke interactie. Het is bedoeld om goed een afbeelding te kunnen bekijken. Afbeelding upload (in progressie) De afbeelding wordt vervaagd en de focus ligt op de laadbalk. Het wordt aan de gebruiker duidelijk gemaakt de applicatie bezig is met zijn foto te verwerken. De gebruiker kan de foto tijdens het laden nog annuleren. The Arternet: Ontwerpdocumentatie Levi Zimmerman & Robert Stijn 9

10 4. Patterns (8/11) Tags - bewerken Tags krijgen de vormgeving van een label om aan te geven welke woorden bij elkaar één tag zijn. Daarnaast zijn er kruisjes naast de tags om deze weer te kunnen verwijderen. De labels geven ook aan waar de touch area is van de tag. Nieuw item / notificatie Het rode bolletje geeft aan dat er een nieuw kunstwerk is toegevoegd aan de New pagina. Het rode bolletje vraagt om aandacht en wordt gebruikt om notificaties aan te geven. Android navigatie / swipe views Dit navigatie patroon komt van Android. Je ziet het ook op andere platformen. Het is bedoeld voor een natuurlijker navigatie. Tags - ontdekken Tags worden vaak aangegeven met een #. Op de zoekpagina worden ze onder de zoekbalk in een lijst weergegeven. Dit patroon wordt ook door bijvoorbeeld Twitter gebruikt om gebruikers content te laten ontdekken. The Arternet: Ontwerpdocumentatie Levi Zimmerman & Robert Stijn 10

11 4. Patterns (11/11) Sociale interactie met object Onder de afbeelding staan de sociale interacties bij elkaar gegroepeerd. In dit geval dient de afbeelding als springboard naar contributor acties. Omdat de Capt n een custom functie is van applicatie staat deze dus apart van de rest. Lege default - nieuwe toevoegen Het lege scherm bevat een aanmoediging tekst om de eerste comment te plaatsen. Dit geeft de gebruiker het gevoel dat de applicatie zijn mening wilt horen. Nieuw kunstwerk toegevoegd Als er een nieuw kunstwerk wordt toegevoegd aan je collectie, dan laat deze animatie zien waar je nieuwe kunstwerk terecht komt. The Arternet: Ontwerpdocumentatie Levi Zimmerman & Robert Stijn 11

12 5. Interactie met het social object The Arternet: Ontwerpdocumentatie Levi Zimmerman & Robert Stijn 12

13 6. Bronnen Theorie: - Design for Interaction: The Social Web Reader - Seductive Interaction Design, Stephen P. Anderson Patterns: Facebook Applicatie voor Android; - Twitter Applicatie voor Android; - 9GAG Applicatie voor Android; The Arternet: Ontwerpdocumentatie Levi Zimmerman & Robert Stijn 13