MIMOA. UID MIMOA Demo 0.8 Version: UID_v0.83.vsd. Versie: UID_v0.83.vsd. UID MIMOA Launch. Matthijs Collard 1. Elements 2. Elements 2 3.

Transcription

1 UID Demo 0.8 Version: UID_v0.83.vsd Elements 2 Elements 2 3 Elements 3 4 Homepage 5 Marker Managing 6 Marker Managing continued 7 Full size map Detail page 8 Project Detail page demo Contactpage 10 Newsletter Logged in 11 Newsletter Not logged in 12 Login 13 Register Details 14 Mi Profile 15 Mi Moa Mi Favorites 16 Mi Moa Been there 17 Mi Moa Mi projects 18 Mi Moa Public Profile 19 1

2 Elements Elements used on the Mimoa Pages Default On click will empthy field Completed Pull down (Implement with advanced search search : All cities Everything Projects Designers Locations Project teams Contributors Photographer Date selector From 02 Jun Jun 2006 To 02 Jun 2006 From and To date is default set to today If the from date is set after to a date past the to date, then to automaticly gets date of From Friendly URL s Friendly URL s and Breadcrumbs are equally build up. Dates that can not be selected because of constraints are greyed out. Selected date is highlighted (i.e. date is in the past) oktober 06 m d w d v z z Project: search result: Countries, cities and project names advanced search: search are written with capitals. advanced result: search/search.php?search=barcelona about page: Add a project: overview/add_ a_ project Use _ (underscore) for spaces Your profile: Log in: in register: Use screen name for personal pages. Breadcrumbs Breadcrumbs should show the site hierarchy, not the user's history. Screen name will be a unique field Breadcrumbs are unobtrusive and useful: project: home > projects > The Netherlands > > The Whale search result: home > search > search result advanced search: home > search > advanced search advanced result: home > search > advanced search > search result Add a project: home > users > pietje > project overview > add a project Your profile: home > users > pietje > my profile Public profile home > users > pietje Log in: home > log in Register: home > register First item is Elements field always home Use screen name for personal pages. Screen name will be a unique - They show users their current location in the site hierarchy - They allow users to backtrack to higher levels - Though they are often overlooked, they never cause problems in usability tests - They take up very little space 2

3 Capitals Elements 2 Elements usedon the Mimoa Pages Comments Not logged in Add comment We prefer you log in when posting a comment. No account? Register here! Name After clicking this link, the user will be taken to the log in page. When successfully logged in, the user will be redirected to this page and not to the project detail page! Logged in Add comment Name Pieter Brand You are not Pieter Brand? Log out Submit Submit In a later stage, when there are many members, the old situation could be restored! Everybody can post. Name be validated. Must be SPAM free! Tell A Friend Popup Confirmation Tell A Friend about The Whale X Close Your friends pieter@hotmail.com Separate multiple addresses with a comma (,) Your name Jan Your address Jan@gmail.com Message (optional) Message sent! Back to Or tell more friends! X Close Show tell a friend window again If user is logged in, details will be filled in automaticly Send to your friend! The details you provide on this page will not be used to send unsolicited , and will not be sold to a 3rd party. content From Jan Thickbox popup Subject Hi The Whale, see it at User friendly URL Jan wants you to see this project at : The_Whale [personal message] Jan Jan@gmail.com Elements 2 3

4 Elements 3 Rating Not rated and not logged in (Not rated yet) Log in to rate! Not logged in (456 Ratings) Log in to rate! Calculation 1 star is 1 point 5 stars is 5 points Saving ratings wants to know the rating of a project split out to country of users who rated. These statistics will be used in a later phase. When a user rates, the amount of points is saved together with the country of the person rating. No other information has to be saved. Logged in Rate this project (456 Ratings) User can use stars to rate himself. Average rating is calculated over all ratings per project Rated Thanks for rating! Personal section Not logged in (456 Ratings) Design: half stars look good? User can rate once based on session/ip Log in Register Logged in Pietje Mi Profile Public profile (personal page) Edit profile page Elements 3 4

5 Homepage HOME MI PAGES PROJECTS NEWS Home Pietje Mi Profile BMW Plant, A Factory in Leipzig, Zaha Hadid? Project focused on map Random Image and description and subtitle Full size map About Mimoa Europe s Modern Architecture organised, mapped and waiting to be discovered by You! Mimoa is the all-you-need-to know Architecture Guide More about Mimoa Contribute, comment and be part of Show all projects Text editable in rich text editor, webkeeper Register contributed by Mike News Mi Guide Beta online! We have been wd, but since late lalorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse nec urna. Aliquam pellentesque volutpat odio. Aliquam convallis Try it now! 23 jan 07 by Pietje Architecture Tour Suspendisse nec urna. Aliquam pellentesque volutpat odio. Suspendisse nec urna. Suspendisse nec urna. Aliquam convallis Read more 23 jan 07 by Pietje More posts in the blog Latest additions This whole section (All news items) in one rich text editor. Mimoa is free to decide what to display here. 1 or more newsitems, announcements, etc. Also, when a Blog is implemented, Mimoa can link to the blog etc THE WHALE Ontwerpgroep Trude Hooykaas Contributed by Pietje IJ TUNNEL Ontwerpgroep Trude Hooykaas Contributed by Pietje ROBERTO BOTTICELLIE S... Ontwerpgroep Trude Hooykaas Contributed by Pietje Show latest three projects Homepage 5

6 Marker Managing Er moet een oplossing komen voor het clusteren van de projecten op de verschillende zoomniveau s. Er worden 4 verschillende views gedefinieerd en wel: Europa, Land, Stad en Straat. Schaal De genomen levels zijn inschattingen. Indien de praktijk uitwijst dat de schaalverdeling beter anders kan, moet dit aan te passen en uit te proberen zijn Wereld / Europa Level 0-9 Clustering Marker/icoon Controls The Netherlands Projects: 82 The Netherlands Projects: 82 Favorites: 4 The Netherlands Projects: 82 Been there: 4 Elk land waar zich een project bevindt krijgt een marker. Deze marker bevindt zich midden in het land Window Het informatie Window geeft de volgende gegevens bij het klikken op de marker: naam land hoeveel projecten totaal in het land Klikken op land geeft voorlopig simple search resultaten weer. Hoeveel Favorites in dit land Hoeveel Been there in dit land In volgende fase geven Been there en Favorites resultaten voor deze projecten. De grootte van het icoon is afhankelijk van het aantal projecten in het land. Textueel wordt het aantal projecten in het land afgebeeld. Er zijn 4 groottes en wel als volgt van groot naar klein: projecten Focus projecten projecten 1-50 projecten Een land marker moet een focus kunnen hebben. Bijvoorbeeld bij uitzoomen op de projectdetailpagina. Het land waar het project zich bevindt krijgt de focus 183 Focus Onderstaande geldt voor alle levels De interface moet de gebruiker controls bieden om de volgende combinaties van getypeerde projecten op de kaart te tonen. Deze combinaties kunnen op elk niveau en schaal voorkomen, dus bij land, stad en project markers: Not logged in: Projects Favorites Been there Project & Favorites Project & Been there Projects Daarnaast moeten alle markers een focus kunnen krijgen. Bij combinaties op europa en land niveau moeten beiden hoeveelheden genoemd worden. Het is dus niet mogelijk om een combinatie van alle drie de typen projecten of alleen de favorites en Been there in een overzicht te zien Voorbeeld controls Greyed out, click will redirect user to login Land Level Clustering Elke stad waar zich een project bevindt krijgt een marker. Deze marker bevindt zich midden in de stad op de locatie waarvoor Google een marker plaatst op een stad. Marker/icoon De grootte van het icoon is afhankelijk van het aantal projecten in de stad. Textueel wordt het aantal projecten in het stad afgebeeld. Er zijn 4 groottes en wel als volgt van groot naar klein: Met standaard checkboxes/radiobuttons is deze control niet ideaal. In bovenstaand voorbeeld is een visueel voorbeeld geschets van een oplossing met custom controls op basis van vormgeving iconen projecten projecten 2-5 projecten 1 project: (Is geen geen Projects: 82 Projects: 82 Favorites: 4 Projects: 82 Been there: 4 Window Het informatie Window geeft de volgende gegevens bij het klikken op de marker: naam Stad hoeveel projecten totaal in het land Klikken op stad geeft voorlopig simple search resultaten weer. Hoeveel Favorites in deze stad Hoeveel Been there in deze stad Focus stadsicoon, maar projecticoon, versie van Straat levels) Een stads marker moet een focus kunnen hebben. Bijvoorbeeld bij uitzoomen op de projectdetailpagina. De stad waar het project zich bevindt krijgt de focus Focus De 1 project marker moet ook een focus kunnen hebben. Uiteraard ook de combinaties van typeringen Focus Marker Managing 6

7 Marker Managing continued Stad Level Clustering Er is geen clustering. Elk project heeft een eigen icoon. Marker/icoon Dit icoon is KLEINER dan het icoon op straatniveau. Alle iconen op deze levels zijn even groot. Voorstel Voorstel kleurgebruik Projects: Groen Favorites: Roze Been there: Grijs Architecten Cie, Frits van Dongen. Housing Window Het informatie Window geeft project informatie Focus De 1 project marker moet ook een focus kunnen hebben. Uiteraard ook de combinaties van typeringen Focus Opmerking Naomi: projects groen, maar dus ook de clustering-iconen groen... tenzij de keuze is gemaakt om ook fav te zien: dan wordt het cluster-icoon ook roze, ook al zit er maar 1 fav in. zie ook de voorbeeld-controls die bovenaan staan: bij t geval dat 'projects' én 'fav/been there' aan staat, wordt het hele icoon een andere kleur (van groen naar roze of grijs). omdat zo in 1 oogopslag te zien is (op het landen-schaalniveau) of je ergens fav hebt. Straat Level Clustering Marker/icoon Er is geen clustering. Elk project heeft een eigen icoon. Icoon is standaard project icoon Architecten Cie, Frits van Dongen. Housing Window Het informatie Window geeft project informatie Focus Een project moet een focus kunnen hebben. Uiteraard ook de combinaties van typeringen Focus Marker Managing continued 7

8 Full size map Detail page HOME MI PAGES PROJECTS NEWS Home > The Netherlands > > The Whale Pietje Mi Profile? Architecten Cie, Frits van Dongen. Housing Visual design to see if all items fit. Project with focus is centered Settings will be remembered and used in the mini map Checkbox and link greyed out/ not clickable if user is not logged in. Link will go to Checkbox and link greyed out/ not clickable if user is not logged in. Link will go to been_there Close full size map Show all projects Show Mi Favorites (34) Show Been there (67) Default on, show all of projects on the map (only available for project detail page otherwise irrelevant) Default on, Marks and displays favorite projects on the map. Will show favorite projects even if show other architecture is turned of. Number indicates amount of favorite projects in total. Default off, Marks and displays Been there projects on the map. Will show Been there projects even if show other architecture is turned of. Number indicates amount of Been there projects in total. Future implementations Route Public transport Hotels, musea etc Advertising Topspots/hotspots Full size map Detail page 8

9 Project Detail page demo 0.8 Guide functionality is not for demo 0.8! Always show last search keyword Demo 0.8: Also search in field Accounts (contributed by) HOME MI PAGES PROJECTS If user is not logged NEWSin, user will be redirected to log in and will be redirected to this page after succesfull login Home > The Netherlands > > Architecten Cie > The Whale The Whale Architecten Cie, Frits van Dongen Location Function Contributed by, The Netherlands Car Showroom, Housing Jack Berusfa + Mi Favorites + Been there! Pietje + Mi Guide Mi Profile Send this page to a friend! Use tooltips for buttons? Full size map Facts: The Whale Address Baron G. A. Tindalplein 1 Link to Anchor below adds 1242DF The Netherlands Project is public! > > Completion floor area/size Costs Opening hours How to get there Link to Pietjes Public profile Project ID Contributed by > Pietje, The Netherlands November m ,- Link to this project using the Design should define place, size and if tooltip is needed Show all projects The Whale is one of three big Go "meteorites" to search result that with have all landed projects of Jack Berusfa in between the lowrise-highdensity housing areas on the Islands of Borneo and Sporenburg at the Eastern Docklands in. This building by Frits van Dongen is one of several important and recognizable blocks. Inside are 194 apartments, 1100 m2 office and retail-space. Underneath is a large parking with 179 places. The traditional closed block (100 by 60 m) has been transformed, the two ends are lifted, Show favorites and the public space flows thought underneath. Inside the icon <a href= target= blank ><img src block is a private garden, designed by West 8. Read comments (4) Direct Wonen Rotterdam Find your home in and around Rotterdam. Directly available! Comments (4) Appartementen vanaf 275 Meer dan verhuurders bieden; huizen en huurwoningen te huur Great building, was there last week, The Whale is one of three big "meteorites" If user logged that have in when landed in between the commenting Link to Public lowrise-highdensity housing areas on the Islands of Borneo profile and Sporenburg at the Eastern Docklands in. Pete (utrecht, the Netherlands) Rectangle banner (456 Ratings) Log in to rate! See elements More of Architecten Cie More Housing Add this project to Mi Favorites I have Been there! Add this project to Mi Guide Simply copy and paste this code to your site or blog: It is closed on Sunday, Better go monday Main urban planner Urban planner Landscape architect Builder Contact page, Construction pass subject. like: Comments on The Whale Supplier Client Architecten Cie UP agency Heijmans Pieters Bouwtechniek NTV NedZink Ontwikkelingsmaatschappij New Deal Found incorrect or incomplete information? Let us know! Have better images? them to us Ann (Tokyo, Japan) Add comment See elements More Car Show Room More in Public profile Add a new project! address info@mimoa.eu Added in 0.8: More contributions from.. More contributions from Pete Project Detail page demo 0.8 9

10 Contactpage Home > Contact Log in Register Your name: Your address Subject Your message Brenda Biamlo Comments on The Whale Name and address are required and must be validated. Fields are automatically filled in when user is logged in Subject is default empthy. If redirected from a project let us know link, subject is prefilled Send message Confirmation Page Home > Contact > Thank you Contactpage 10

11 Newsletter Logged in Logged in, not subscribed Home > Newsletter Pietje Mi Profile Subscribe to the newsletter You can unsubscribe any time from this page or in your profile Logged in, already subscribed Home > Newsletter Pietje Mi Profile You already subscribed to our newsletter! Unsubscribe now Newsletter Logged in 11

12 Newsletter Not logged in Home > Newsletter Pietje Mi Profile Your address I agree to the terms of use of Subscribe! Or unsubscribe address is required and must be validated I Agree box must be Checked If an address is already registered or inactivated: Profile of user will be updated and user can log in and check out box to unsubscribe Confirmation Page If an address is not registered: An account will be made with just an address. If a user registers with this address, the newsletter checkbox will be checked by default Home > Newsletter > Thank you Newsletter Not logged in 12

13 Login HOME MI PAGES PROJECTS NEWS? Home > Log in or register Log in Register Log in or register adress Do you have a account? Yes, password: Remember me I forgot my password No, I will create one now Continue Full size map Show My favorites Show My Been there Why Register? Publish your projects Place comments Choose your favorites Track projects you ve already been to And much more Login 13

14 Register Details HOME MI PAGES PROJECTS NEWS? Home > Register Log in Register Register All we need to know is the following. Later you can complete your profile Screen name must be unique! Show address message if already used Screen name Password Password again Check if this name is available! The screen name you entered is already in use! World countries Full size map Show My favorites Show My Been there First name Last name Town/City Country I agree with the Terms of service and the Privacy policy of I like to receive the newsletter Register! Register Details 14

15 Mi Profile HOME MI PAGES PROJECTS NEWS Home > Users > Pietje > My Profile Pietje Mi Profile Mi Favorites (5) Been there (12) Mi Projects (6) Mi Guides (2) My Profile My profile? address Change password Password Again Screen name Short description about yourself Must be unique, if not unique, tell user: The screen name you entered is already in use! Delete My Account Pietje Check if this name is available! Will be used when you add comments or upload projects. Your public profile can be found here: First name Last name Address (optional) Postal Code (optional) Town/City Country Pieter Van Dijk The Netherlands Some HTML is OK! Your website (optional) Show public profile in new window Show my first- and last name in my public profile ( Show my town in my public profile (address and postal code will never by published) Delete my Account popup I Like to receive everytime my contributed projects are commented I like to receive the newsletter Save changes Are you sure you want to delete your account? You will loose your project overview, favorites, public profile and guides. Your contributed projects will not be deleted Yes, I am sure None of the projects will be deleted. (including unfinished projects) All Contributed by information will display No Mi Profile Your account has been deleted We would appreciate if you tell why you deleted your account Let us know why! To contact page 15

16 Mi Moa Mi Favorites HOME MI PAGES PROJECTS NEWS Home > Users > Pietje > Favorites Pietje Mi Profile Mi Favorites (5) Been there (12) Mi Projects (6) Mi Guides (2) Mi Profile? Mi favorite projects Remove from list without warning Map shows all mi Favorite projects Designer: Architecten Cie, Frits van Dongen. IJ tunnel Project is marked as Been there. Click will bring user to Been Designer: Architecten Cie, Frits there van Dongen. overview Remove from favorites + Been there + Mi Guide Remove from favorites Been there + Mi Guide Full size map Show all projects Project is in Mi Guide. Click will bring user to Designer: Architecten Cie, Frits van Dongen. Mi Guide Remove from favorites + Been there In Mi Guide IJ tunnel Project is Been there and in Mi Guide Designer: Architecten Cie, Frits van Dongen. Remove from favorites Been there In Mi Guide Designer: Architecten Cie, Frits van Dongen. Remove from favorites + Been there + Mi Guide If clicked + Been there than add project to Been there and show Been there Stay on this page If clicked + Mi Guide than add project to Mi Guide and show In Mi Guide Stay on this page Mi Moa Mi Favorites 16

17 Mi Moa Been there Guide functionality is not for demo 0.8! HOME MI PAGES PROJECTS NEWS? Home > Users > Pietje > Been there Pietje Mi Profile Mi Favorites (5) Been there (12) Mi Projects (6) Mi Guides (2) My Profile Been there Remove from list without warning Map shows all Been there projects Designer: Architecten Cie, Frits van Dongen. IJ tunnel See for link functions previous page. Simular functionality Designer: Architecten Cie, Frits van Dongen. No, I have not Been there! + Favorite + Mi Guide No, I have not Been there! + Favorite + Mi Guide Full size map Show all projects Designer: Architecten Cie, Frits van Dongen. No, I have not Been there! + Favorite + Mi Guide IJ tunnel Designer: Architecten Cie, Frits van Dongen. No, I have not Been there! + Favorite + Mi Guide Designer: Architecten Cie, Frits van Dongen. No, I have not Been there! + Favorite + Mi Guide Mi Moa Been there 17

18 Mi Moa Mi projects HOME MI PAGES PROJECTS NEWS Home > Users > Pietje > Projects Pietje Mi Profile? Mi Favorites (5) Been there (12) Mi Projects (6) Mi Guides (2) My Profile Mi Projects Map shows all personal projects Full size map Add project Unfinished (2) Project name Location Designer Modified: Delete Building 1 City, country Designername Bridge City2, country Designername Sent for review (2) Project name Location Designer Modified: Building 3 City, country Designername Bridge 3 City2, country Designername Published (3) Project name Location Designer Modified: Building 5 City, country Designername Bridge 5 City2, country Designername Click to view live Add project Mi Moa Mi projects 18

19 Mi Moa Public Profile Guide functionality is not for demo 0.8! HOME MI PAGES PROJECTS NEWS Home > Users > Pietje Pietje Display only published projects Same page but with Been there Contributed projects (5) Favorites (12) Been there (6) Pietje Mi Profile? Map shows all Favorite projects of Pietje like normal project markers. User can choose to display his/her own favorites on the map as well Full size map Pietje Pieter Brandse The Netherlands Website: About Pietje Show all projects I am an architect from. I am Architecture Junky, so I love the concept of this site. Check out my website too! Show firstname, lastname name and city only if checked in profile Favorites ANA Architecten office, housing, kindergarten IJ tunnel Architecten Cie, Frits van Dongen. office, housing, kindergarten Architecten Cie, Frits van Dongen. office, housing, kindergarten IJ tunnel Architecten Cie, Frits van Dongen. office, housing, kindergarten Architecten Cie, Frits van Dongen. office, housing, kindergarten If no favorites: No favorites! Mi Moa Public Profile 19