MVP design and definition

[artemkloko]

In order to start any implementation we need to define what we actually want to achieve. After the initial implementation we can revisit and make changes according to perceived user experience or to our liking's.

I propose keeping this issue open and contributing to it mostly with questions, which then can be answered by anyone that has a vision about the relevant topic, regardless of the accumulated knowledge that the person possesses.

If you want to add a question/answer click on the "3 dots" in the top right corner of the comment, and then on "Edit". If you are unsure where to add some information, you can also add it as a new comment and we will sort it out later.

If you think some information is outdated/irrelevant/incorrect, please do not delete it, instead "cross it out" (ie. strike-through) by adding ~~ at the beginning and at the end of that information. For example ~~Some outdated information~~ will be rendered as Some outdated information. This should be done so we don't "step on each other's toes", deleting some person's contribution that we think is incorrect, while that same information took effort to be gathered and might be considered very valuable by someone else.

Answers can be added by inserting a bullet point with an indent.

If any question/answer is too long to be added in the list, please add a summary/conclusion with a link to the full explanation/discussion.

[artemkloko]

User Interface

• Which "screens" will the website have
  • Further explanation: "Screen" can be considered a webpage, or a state, or part of the user interaction that we want for sure to exist for users to see. Some examples include - home page, contact us page, user list (graphical representation of some part of the network), user details (graphical representation of a single node in the network), settings page, search for users page, etc
  • Home
  • Sign in
    • Is this also Sign up page, or is Sign up a separate page?
  • User list/network
  • User details
• What details we want to display about each user/node
• What should be the graphical representation of a user/node
• What should be the graphical representation of the network
• Do we want 2D or 3D space for the network representation
• Will we show the network partially and let user navigate
• Will the navigation be done with mouse, keyboard, trackpad, touch
• Will the user be able to see the whole network at any point
• Do we have preferred colors
• Will we support light/dark modes
• Will the user be able to edit their information after the Sign up

[Similarities]

[ ] design needs to cover/ be compatible with a lot of users we already had some ideas about it!

[Similarities]

• STATIC version which can NOT access the whole map - only a certain ROI one can scroll or drag in x and y -- or animation on mouse hold --- or similar ! disadvantage: we choose who is displayed first and there is no overview

[Similarities]

• ZOOM version (fake 3D) is done via size changes of the profile icons the users are organized in layers zooming changes size (and removes top layer) ! Disadvantage: loading time! overcrowded....

[Similarities]

INTERSECTION POINT MAP - design idea: design with a lot of users (> 200): 4 - screens:

• screen 1 "entry": random input pictures of our users (or optional this becomes a feature)
• screen 2 'map1': many user map (probably abstrac without icons -- users represented via something e.g. a dot
• screen 3 'map2': excerpt / ROI (rectangle of interest) of a smaller amount of users with icons, name, keyword and acces to click on single user profile
• screen 4 'single user profile' : uploaded pictures, some info (keywords), link or contact information.

alternatively - one could pack screen 3 into a mouse-over: profile icon, name, keyword and entry click button appears on mouse over (that would be the GAMER-STYLE variant #haha)

[Similarities]

... and with this: QUESTION about the inter-connection line design:

[wolfhardfehre]

General Skeleton of all pages

• sign in/sign up, button to slide show view, button to network view -> in a small navbar at the top
• (pretty standard :) ) footer contains copyright (with current year), impressum, manifest, terms & conditions, support contact email, version

Profile screen of a single user

• screen is overlay on network or slideshow
• close/back button

attributes:

• show picture (1-10): carrousel with previous and next button
• profile name: set when creating account
• keywords (at least one): topic with hashes
• [optional] links to social media: facebook, google, etc.
• [optional] contact form to send email (same as login email address) to a person without showing email address
• [optional] bio/description: 300 letter limitation

Network view with multiple users

• enter website with user id and generate around this user new mini profiles of other randomly chosen users
• given user is displayed in the middle
• use panning for scrolling through network (probably needs paging/reload at edges)
• for now (working number) of mini profiles
• random intersection points connecting with lines using bi-central design
• when mini profile clicked -> choose single user profile overlay
• back button to slide show

mini profile attributes:

• icon (a random thumbnail of any user picture) representation of multiple users
• profile name
• 1-2 keywords

Slideshow view of random users

• show randomly selected picture (only one) per user: changing every 2-3 seconds or choose previous or next

attributes:

• picture bigger size
• profile name
• 1-2 keywords

[estorna]

Hi all, Here is a simple designed for the main page as agreed previously. Tell me what you think or whether I have forgotten something. Have a good night

https://www.figma.com/file/XbsvAIQFfn2CtJO2Rnyprv/ReLink?node-id=0%3A1

[wolfhardfehre]

Here is a first suggestion of the database models, we'll need. Please don't hesitate to comment or ask if something is not clear :)

users

column	type	nullable	other
id	UUID	false	primary key
name	text	false	-
email	text	false	-
password_digest	text	false	-
short_description	text	true	-
contactable	boolean	false	-
access_token	text	false	-
activation_token	text	false	-
activated_at	timestamp without timezone	false	-
created_at	timestamp without timezone	false	-
updated_at	timestamp without timezone	false	-

links (one to many)

column	type	nullable	other
id	UUID	false	primary key
link	text	false	-
user_id	UUID	false	foreign key constraint

keywords (many to many)

column	type	nullable	other
id	UUID	false	primary key
keyword	text	false	-
user_id	UUID	false	foreign key constraint

images (one to many)

column	type	nullable	other
id	UUID	false
image_link	text	false	-
user_id	UUID	false	foreign key constraint

[artemkloko]

User profile view

Feedback

• keywords are missing

[Similarities]

• draw network with javascript: found some method using only "let canvas = document.querySelector('canvas')"

managed one tutorial to get this :D

• the 'user divs = mini profiles' are at the moment represented by the big circles with the red lines and black filling
• the 'intersection points' are the grey circles
• often refered as "chart drawing with javascript without any packages"
• script is in relink/network #yeahi! - try it :D + have fun with: playing around with the numbers of either intersection or users

[ ] ToDo: nearest neighbor distance - avoid overlappings [ ] ToDo: lines behind the circles not other way round [ x] ToDo: write as class

[Similarities]

to keep updated : Anna, Wolle and me did some work on class-integration for drawing the network, can be found in the branch "'add-interseciton-to-network' #18" . for the design:

• each mini-profile draws a line to 1x closest intersection point + 1x random intersection point
• the ratio between profiles and intersection points should be smaller than 3: 1

alternative design (and hey we have yet not tried out all possibilities :D) :

• each mini profile only connects to the closest intersection point